Ignite: Example : File uploading with apisauce.

[matart15]

While uploading file on android I got NETWORK_ERROR with no explanation of what happened. Same request worked on ios.
After few hours of try I found that local file path must start with file:// on android.

  const uploadPost = (videoUrl) => {
    var source = videoUrl;
     if (Platform.OS === 'ios') {
       // source is same
     } else {
       source = 'file://' + videoUrl //                  <-   added this line. android have to add file://
     }
    var video = {
      uri:  source,
      type: 'image/jpeg',
      name: 'photo.jpg',
    };

    var body = new FormData();
    body.append('authToken', 'secret');
    body.append('post_image', video);
    body.append('post_video', video);
    body.append('title', 'A beautiful photo!');

    let url = 'post?api_version=1'
    return api.post(url, body)
  }

Now it works. Writing this for people with same problem.

It would be nice if some uploading example is added to readme.

[kevinvangelder]

Good idea, and thanks for letting us know. It's difficult for us to find all of these edge cases sometimes. I think we should probably add demos to the Wiki versus the readme.

[kevinvangelder]

And a small simplification to your code would be:
var source = (Platform.OS === 'ios') ? videoUrl : 'file://' + videoUrl

[GantMan]

I have a great idea for an upload example. Doing something simple like https://github.com/dmotz/thing-translator

We should add this as an example.

[skellock]

wtf that's amazing!

[skellock]

A file uploading example would be great over in https://github.com/skellock/apisauce.

[tmaly1980]

@matart15 , hmmmm, when I try even your general file upload approach, my request payload looks like:

Content-Disposition: form-data; name="avatar"

[object Object]
------WebKitFormBoundaryYbxWB2VRatQj8YD3--

I'd imagine the 'object Object' is problematic when it should be the base64 data itself. I've verified that it stringifies the object incorrectly on the backend (Laravel). My code looks like (in Services/Api.js):

  const saveProfilePhoto = (file) => {
    let fileUrl = (!file.match(/^file:/) ? 'file://' : '') + file
    let fileMeta = {
      uri: fileUrl,
      name: fileUrl.split(/[\\/]/).pop() // basename
    }
    let body = new FormData()
    body.append('avatar', fileMeta)
    console.log(body)
    return api.post('user/profile', body)
  }

What am I missing?

[tmaly1980]

I've tried the suggestions from here, but I am stuck with [object Object] in the payload:

https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native

[matart15]

@tmaly1980
Seems like your post request is trying to send file as json.

I had similar problem with relay project.
solution was avoiding JSON.stringify() and removing 'Content-Type': 'application/json' header on upload request of fetch function. (https://github.com/facebook/relay/blob/master/packages/react-relay/classic/network-layer/default/RelayDefaultNetworkLayer.js#L97)

I don't know about latest versions. But ignite was using apisauce for network request.
apisauce was using axios for fetch. So you want to look at axios github issues about file upload setting or headers.

Also try this one. from this thread (https://github.com/mzabriskie/axios/issues/318)

  const saveProfilePhoto = (file) => {
    let fileUrl = (!file.match(/^file:/) ? 'file://' : '') + file
    let fileMeta = {
      uri: fileUrl,
      name: fileUrl.split(/[\\/]/).pop() // basename
    }
    let body = new FormData()
    body.append('avatar', fileMeta)
    console.log(body)
    // return api.post('user/profile', body)
    let request = new XMLHttpRequest();
    request.open('POST', url);
    request.send(data);
  }

Also try without debug mode.