Soragim
Soragim

Reputation: 337

upload expo camera roll image to server

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 enter image description here

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) {
            .... 
      });
    });
  }

Upvotes: 1

Views: 1985

Answers (2)

Adnan Naeem
Adnan Naeem

Reputation: 29

just add these params in photo this worked for me

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

Upvotes: 0

Soragim
Soragim

Reputation: 337

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

Upvotes: 2

Related Questions