Uploading images with fetch to Express using Multer

Question

I'm attempting to upload images to an Express server. I'm not exactly sure about how to do this, but heres what I've got from what I've been able to pick up from MDN, express, react-dropzone, and multer Documentation. Multer does not seem to pick up the FormData object from react-dropzone, when logging out req.file it returns undefined.

server.js

var storage = multer.diskStorage({
        destination: './public/users',
        filename: function (req, file, cb) {
            switch (file.mimetype) {
                case 'image/jpeg':
                    ext = '.jpeg';
                    break;
                case 'image/png':
                    ext = '.png';
                    break;
            }
            cb(null, file.originalname + ext);
        }
    });

var upload = multer({storage: storage});

app.use(upload.single('photo'));

app.post('/uploadUserImage', function (req, res) {
    console.log(JSON.stringify(req.body.photo)) // form fields
    console.log(req.photo) // form files
    console.log(req.file) // form files
    res.send(req.body.photo);
});

client.js

    function uploadImage (image) {
      var formData = new FormData();
      formData.append('photo', image);
      fetch('http://localhost:8080/uploadUserImage/', {
        method:'POST',
         body: formData
      });
    }

When I make this request morgan logs out the following:

{ photo: '[object File]' } <--- from console.log(req.body');

undefined <--- from console.log(req.file);

multer creates the folder public/uploads but does not place the image in the location. How can I get the photo because I need to run it through sharp (to compress the filesize and resize the image) and then place it in the uploads folder?

score 12 · Answer 1 · edited May 23 '17 at 12:25

12

The error occurs because you specified the 'Content-type' explicitly. To do this properly, you'd also need to specify the boundary. You can find a detailed explanation of multipart/form-data here: How does HTTP file upload work?

To solve the issue with the file upload, you should remove the 'Content-Type' specification from the fetch request. You can also refactor the uploadImage method to upload the form without parsing the inputs:

function uploadImage () {
  // This assumes the form's name is `myForm`
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  fetch('http://localhost:8000/uploadUserImage', {
    method: 'POST',
    body: formData
  });
}

edited May 23 '17 at 12:25

Community

1
1

answered May 27 '16 at 11:32

gnerkus

11,357
6
47
71

Yes, you can. The image should be in your `uploadUserImage` directory in your server. – gnerkus May 27 '16 at 12:33
1

It worked for me, but you should mention that the input's name must match the multer's config `upload.single('photo')` `'photo'` in this case – Jose Villalobos May 22 '18 at 22:53

score -1 · Answer 2 · answered Nov 03 '18 at 03:09

The problem for me was that firebase has an error and can't use multer. You need to use busboy and parse it manually. Also I needed to append the uri from react native imagePicker instead of the file blob. Like this:

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
});

Uploading images with fetch to Express using Multer

server.js

client.js

2 Answers2