Search code examples
expressreact-nativemulterexpo

How to upload images from react native to an express backend?


I followed this example to upload images to my backend. https://github.com/expo/image-upload-example

The code I use in my RN application is:

  let formData = new FormData();

  formData.append('name',this.state.name);
  formData.append('description',this.state.description);
  formData.append('price',this.state.price);
  formData.append('oprice',this.state.oprice);

  let fileArr = (this.state.image).split('.');
  let type = fileArr[fileArr.length -1]
  let uri = this.state.image


  formData.append('photo',{uri, name: `${this.state.name}.${type}`, type: `image/${type}`});
  console.log(formData);

  AsyncStorage.getItem('jwt', (err, token) => {

  fetch('http://192.168.1.83:8000/ShopRouter/deal', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      Authorization: token,
      'Content-type': false
    },
    body: formData
  })

The code I use for my express backend is:

 app.post('/ShopRouter/deal', passport.authenticate('jwt2', {session:false}), function(req,res) {
    upload(req, res, function(err) {
        if (err) {
            console.log(err);
        }

        console.log(req.file);
        console.log(req.files);
        console.log(req.photo);


        console.log(req.body.name);
        console.log(req.body.description);

My Multer configuration is:

var storage = multer.diskStorage({
  destination: function (req, file, cb, err){
    console.log(file)
    if (err){
      console.log(err)
     }
   cb(null, './uploads/')
  },
 filename: function (req, file, cb) {
   console.log(file)
   cb(null, file.originalname + '-' +Date.now())
  }
 });
  var upload = multer({ storage: storage }).single('photo');

The line console.log(file) prints

{ fieldname: 'photo', originalname: 'An empty bottle .jpg', encoding: '7bit', mimetype: 'image/jpeg' }

I;m not sure why the backend receives this without the uri of the image, nothing gets saved in the upload folder

req.file comes back undefined.


Solution

  • I sorted this out by just uploading the images to s3