upload expo camera roll image to server

Question

I'm using expo camera to take a picture. The output I get is a file in format file:///data/user/0/host.exp.exponent/..../Camera/1075d7ef-f88b-4252-ad64-e73238599e94.jpg

I send this file path to the following action and try to upload it to

export const uploadUserPhoto = (localUri,uid) => async dispatch => {
    let formData = new FormData();
    formData.append('avatar', { uri: localUri, fileName: uid});

    let res = await fetch(`${API_URL}api/uploadPhoto`, {
      method: 'POST',
      body: formData,
      header: {
        'content-type': 'multipart/form-data',
      },
    });

Afterward, I get [Unhandled promise rejection: TypeError: Network request failed] and nothing arrives to server. I tried using some string to send in the body and the fetch worked, so I guess it has something to do with my formData configuration.

The formData is:

{                                                                                                       
   "_parts": Array [                                                                                                         
            Array [                                                                                                                   
               "avatar",                                                                                                               
                  Object {                                                                                                                  
                  "fileName": "6eAntcmoEsdBeSD2zfka9Nx9UHJ3",                                                                             
                  "type": "jpg",                                                                                                          
                   "uri": "file:///data/us....2e6e3e8d3223.jpg",                                                                                              
                  },                                                                                                                    
               ],                                                                                                                    
            ],                                                                                                                    
}

How I use postman to test my sails controller

Sails controller function:

uploadPhoto: function (req, res) {
    req.file('avatar').upload({
      adapter: require('skipper-s3'),
      key: 'XXXX',
      secret: 'XXX',
      bucket: 'XXX',
      saveAs: req.param('fileName') + '.png',
    }, function (err, filesUploaded) {
            .... 
      });
    });
  }

How do you know what the parameters types and values will work as expected for your server side api. did you tried with postman or another way? — Oleg, Sep 26 '19 at 01:27
Similar problem:: https://stackoverflow.com/questions/42521679/how-can-i-upload-a-photo-with-expo — Oleg, Sep 26 '19 at 01:30
Well I already saw that solution but I don't see any difference between my problem and the one you mentioned. — Soragim, Sep 26 '19 at 14:56
And of course, I tested with postman before. I've added printscreen and my sails code. I see that the POST request isn't even sent, so it must have something to do with the fetch configuration. — Soragim, Sep 26 '19 at 14:57
Try to replace something like this formData.append('avatar', { uri: localUri, name: uid, type : 'png'}) — Oleg, Sep 26 '19 at 15:10
You can add fileName also but with file property and others: file, type, uri — Oleg, Sep 26 '19 at 15:12

score 2 · Accepted Answer · answered Sep 26 '19 at 18:48

Problem was that I didn't specify the filename. Just did this and it worked!!! :)

    data.append('filename', 'avatar');
    data.append('fileName', uid);
    data.append('avatar', {
      uri: photo.uri,
      name: 'selfie.jpg',
      type: 'image/jpg'
    });

    const config = {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
        },
        body: data
      };

  fetch(`${API_URL}api/uploadPhoto`, config).then(responseData => {
  console.log(responseData);
}).catch(err => { console.log(err); });

score 0 · Answer 2 · answered Feb 08 '22 at 12:47

0

just add these params in photo this worked for me

data.append('avatar', {
      uri: photo.uri,
      name: 'selfie.jpg',
      type: 'image/jpg'
    });

answered Feb 08 '22 at 12:47

Adnan Naeem

29
7

upload expo camera roll image to server

2 Answers2