React-native: Upload a picture to a server

[jnak]

Hey,

I'm trying to upload to a server a picture from the Camera Roll.

I can access an image representation that looks like this:

{
"node": {
  "type":"ALAssetTypePhoto",
  "group_name":"Camera Roll",
  "location":{},
  "image" :{
    "isStored":true,
     "width":1280,
    "uri":"assets-library://asset/asset.JPG?id=AC072879-DA36-4A56-8A04-4D467C878877&ext=JPG",
    "height":850},
    "timestamp":1405312098
  }
}

I was thinking of (somehow) read the binary file, convert that to base64 and post this as JSON using fetch. Is that the best way to upload this to a server for now ?

[ide]

FYI transferring data back and forth between JS and Obj-C is relatively slow so you'll probably want to keep all of the image data in Obj-C. I don't have numbers but I expect you will see it takes a measurable amount of time to transfer several MB of data. It's small compared to the amount of time it takes to upload the photo but it's a good idea to keep the JS <=> Obj-C message queue clear.

You could write a tiny bridge module that receives the asset URL and then performs the upload, reporting progress/error/success information back to JS.

[vjeux]

You can do

xhr.send(node.image)

It's going to send it as an attachment. We use that in the ads manager app

(I hope it's in the open source version)

[jnak]

@ide I know it s not awesome. But I just need to upload one picture for now. I just want a quick way to get it done. I will optimize later :)

@vjeux it seems that the request is empty. When I pass in a string though, I do get the params passed as url params.

What's my best move to get that pic on a server while waiting for xhr.send to be updated ?

Thx!

[vjeux]

cc @nicklockwood do you know if there's a difference between network implementation on opensource/internal?

[nicklockwood]

@vjeux yes, they're separate. I don't think we support image upload in OSS at the moment.

[jnak]

@nicklockwood do you know how I can read the binary data of the image in JS ? It's dirty but it will do the job :)

Thx guys!

[jaygarcia]

FYI transferring data back and forth between JS and Obj-C is relatively slow

I've found that React Native's bridge impl seems to be slower that cordova's :(

I don't have specific bench marks, but if the queue is rapidly utilized, the UI becomes non-responsive whereas with a cordova app, the UI works fine.

I understand the mechanics of why a RN app would be come unresponsive, but I just had to add my experience.

JG

:: sent from my mobile device ::

On Mar 25, 2015, at 20:47, James Ide [email protected] wrote:

FYI transferring data back and forth between JS and Obj-C is relatively slow so you'll probably want to keep all of the image data in Obj-C. I don't have numbers but I expect you will see it takes a measurable amount of time to transfer several MB of data. It's a small compared to the amount of time it takes to upload the photo but it's a good idea to keep the JS <=> Obj-C message queue clear.

You could write a tiny bridge module that receives the asset URL and then performs the upload, reporting progress/error/success information back to JS.

—
Reply to this email directly or view it on GitHub.

[jnak]

I d be down implementing this in objective c, but since I know you guys are
about to release the internal fb component, I d rather spend my time doing
something else :)
On Thu, Mar 26, 2015 at 8:43 PM Jay Garcia [email protected] wrote:

FYI transferring data back and forth between JS and Obj-C is relatively
slow

I've found that React Native's bridge impl seems to be slower that
cordova's :(

I don't have specific bench marks, but if the queue is rapidly utilized,
the UI becomes non-responsive whereas with a cordova app, the UI works
fine.

I understand the mechanics of why a RN app would be come unresponsive, but
I just had to add my experience.

JG

:: sent from my mobile device ::

On Mar 25, 2015, at 20:47, James Ide [email protected] wrote:

FYI transferring data back and forth between JS and Obj-C is relatively
slow so you'll probably want to keep all of the image data in Obj-C. I
don't have numbers but I expect you will see it takes a measurable amount
of time to transfer several MB of data. It's a small compared to the amount
of time it takes to upload the photo but it's a good idea to keep the JS
<=> Obj-C message queue clear.

You could write a tiny bridge module that receives the asset URL and
then performs the upload, reporting progress/error/success information back
to JS.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/201#issuecomment-86773682
.

[sahrens]

It might actually be awhile (or never) before we release the networking module we use internally, so I wouldn't wait for that if you need the functionality...

On Mar 26, 2015, at 6:02 PM, Julien Nakache [email protected] wrote:

I d be down implementing this in objective c, but since I know you guys are
about to release the internal fb component, I d rather spend my time doing
something else :)
On Thu, Mar 26, 2015 at 8:43 PM Jay Garcia [email protected] wrote:

FYI transferring data back and forth between JS and Obj-C is relatively
slow

I've found that React Native's bridge impl seems to be slower that
cordova's :(

I don't have specific bench marks, but if the queue is rapidly utilized,
the UI becomes non-responsive whereas with a cordova app, the UI works
fine.

I understand the mechanics of why a RN app would be come unresponsive, but
I just had to add my experience.

JG

:: sent from my mobile device ::

On Mar 25, 2015, at 20:47, James Ide [email protected] wrote:

FYI transferring data back and forth between JS and Obj-C is relatively
slow so you'll probably want to keep all of the image data in Obj-C. I
don't have numbers but I expect you will see it takes a measurable amount
of time to transfer several MB of data. It's a small compared to the amount
of time it takes to upload the photo but it's a good idea to keep the JS
<=> Obj-C message queue clear.

You could write a tiny bridge module that receives the asset URL and
then performs the upload, reporting progress/error/success information back
to JS.

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
https://github.com/facebook/react-native/issues/201#issuecomment-86773682
.

—
Reply to this email directly or view it on GitHub.

[scottdixon-zz]

I faced the same issue. Here's a naive work around for the time being:
https://medium.com/@scottdixon/react-native-posting-uploading-ios-camera-roll-images-to-a-server-6c74766154cd

@ide is correct, it's really slow transferring data back and forth. Thumbnails seem to hold up OK.

Here's a better way to read and then upload camera roll/image component data:
https://medium.com/@scottdixon/react-native-creating-a-custom-module-to-upload-camera-roll-images-7a3c26bac309

[jnak]

awesome!

[brentvatne]

@scottdixon - awesome :smile:

For the lazy, here's a link @scottdixon's github repo

[kamilkp]

Check out my react-native-file-transfer. It makes the request directly from Obj-C which is faster.

[lifuzu]

@kamilkp Thank you for the sharing, the lib is really cool.

[josebalius]

@kamilkp your plugin doesn't seem to work any more in 0.8.0-rc, any ideas why? - Nvm it does, for some reason I had to re add it to the project in Xcode.

[nicklockwood]

This feature is now built into React Native's XHR implementation anyway. You can attach multiple file attachments to a request body by specifying local file or asset library urls.

[ptmt]

In case anyone is interested: XHR upload example: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/XHRExample.js#L184
Thanks for shipping it!

[narychen]

Though it's closed, I wonder how to compress an image before uploading in react-native because the image in camera roll is too big.

[nicklockwood]

@narychen the best option is currently to use the ImageEditor module to resize the image, then upload the resized one.

[narychen]

It seems ImageEditor not available on android. And the compression quality is not specified.
Maybe write a native module is a better choice?

[nicklockwood]

@narychen you're right that ImageEditor doesn't support a quality parameter, but we could probably add one - resizing the image will make the file much smaller though, and you probably don't need it at 8MP resolution.

ImageEditor is backed by a native module (ImageEditingManager), and it's available on Android, but it looks like it hasn't been open-sourced yet for some reason - @dmmiller, can we move this to the Android OSS folder? - it's already in iOS open source.

[dmmiller]

@nicklockwood I can look into that.

[anback]

let me kow when there is progress! +1!

[dmmiller]

@mkonicek and @bestander are working on open sourcing modules. They would know better if this is planned and when.

[bestander]

Today I plan to release maps.
And this one is next in queue.

[bestander]

And Image editor is released to master.

[apastel]

Anybody have an Android solution for OP's problem?

[mozillo]

Android+1

[anton6]

For those who need a solution for Android, have a look if this works for you.

https://github.com/Wraptime/react-native-get-real-path

[Mastergalen]

Is it possible to upload an image using fetch() instead?

[woniesong92]

This is a solution that works for Android as well. Copied from https://github.com/marcshilling/react-native-image-picker/issues/31, written by alvaromb.

export function postData (url, params, fileURL) {
  let data = new FormData()
  if (fileURL) {
    data.append('image', {uri: fileURL, name: 'image.jpg', type: 'image/jpg'})
  }
  _.each(params, (value, key) => {
    if (value instanceof Date) {
      data.append(key, value.toISOString())
    } else {
      data.append(key, String(value))
    }
  })
  const config = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d',
      'Content-Language': React.NativeModules.RNI18n.locale,
      'Authorization': 'Token ABCDEF123457890',
    },
    body: data,
  }
  return fetch(API_URL + url, config)
    .then(checkStatusAndGetJSONResponse)
}

[Rashhh]

Can anybody would tell me where I am getting it wrong? using form data to upload image to server.

     uploadData()
   {

     let formdata = new FormData();
     formdata.append("case_date", "2016-12-27")
     formdata.append("case_time","17:32")
     formdata.append("category",1)
     formdata.append("description", "this is car accident")
     formdata.append("image_list", {uri: 'file:///storage/emulated/0/DCIM/IMG_20161227_170739.jpg',        name: 'IMG_20161227_170739.jpg.', type: 'multipart/form-data'})


    fetch('myapi',{
      method: 'post',
      headers: {  
            'Content-Type': 'multipart/form-data', 
            'Authorization':'Bearer '+'sdlDpbzyp1DfqcX7ZJ74FLi8WHha06'

         },
        body: formdata
    }).then((response)=>{if(response.status==200)
                       {
                         console.log('response:',response);
                         response.json().then((responseData) => { 
                         console.log("inside responseData 200:",responseData);
                         console.log('responseData:',responseData);

                        })}
                        else
                        if(response.status==400)
                        { 
                        response.json().then((responseData) => { 
                        console.log("inside responseData 400:",responseData);

                        })
                        }
        else

         {console.log('hi else',response.status)}


     }).done();


   }

[ViGi-P]

@Rashhh did you find a solution???
I'm facing the same problem.

[JulianKingman]

If you still have this problem, or encounter it fresh, try adding a boundary to your content type
'Content-Type': 'multipart/form-data; boundary=someArbitraryUniqueString

[s123121]

If anyone coming here searching for why upload to an S3 pre-signed url not working as expect --> USE xhr! It works. There is a problem with fetch regarding Content-Type header. I don't really understand the detail though