Upload a picture to a server

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 ?

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.

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)

@ide

@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!

@nicklockwood

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

@vjeux

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

@nicklockwood

@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!

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 notifications@github.com 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.

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 notifications@github.com 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 notifications@github.com 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
#201 (comment)
.

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 notifications@github.com 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 notifications@github.com 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 notifications@github.com 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
#201 (comment)
.

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

@ide

~~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

awesome!

@scottdixon

@scottdixon - awesome 😄

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

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

@kamilkp

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

let me kow when there is progress! +1!

@mkonicek

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

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

And Image editor is released to master.

Anybody have an Android solution for OP's problem?

Android+1

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

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

This is a solution that works for Android as well. Copied from react-native-image-picker/react-native-image-picker#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)
}

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();


   }

@Rashhh

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

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

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

Navigation Menu

Repository navigation

Upload a picture to a server #201

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Upload a picture to a server #201

Description

Activity

ide commented on Mar 26, 2015

vjeux commented on Mar 26, 2015

jnak commented on Mar 26, 2015

vjeux commented on Mar 26, 2015

nicklockwood commented on Mar 26, 2015

jnak commented on Mar 26, 2015

jaygarcia commented on Mar 27, 2015

jnak commented on Mar 27, 2015

sahrens commented on Mar 27, 2015

scottdixon-zz commented on Apr 8, 2015

jnak commented on Apr 8, 2015

brentvatne commented on Apr 15, 2015

kamilkp commented on Apr 23, 2015

lifuzu commented on Jul 6, 2015

8 remaining items

anback commented on Jan 22, 2016

dmmiller commented on Jan 22, 2016

bestander commented on Jan 22, 2016

bestander commented on Jan 27, 2016

apastel commented on Feb 24, 2016

mozillo commented on Apr 20, 2016

anton6 commented on Jun 22, 2016

Mastergalen commented on Aug 25, 2016

woniesong92 commented on Oct 18, 2016

Rashhh commented on Dec 28, 2016

ViGi-P commented on Jun 9, 2017

JulianKingman commented on Jul 17, 2017

s123121 commented on Jan 12, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions