Download Images Using Fetch Express Using Multer

Question

I am trying to upload images to an Express server. I'm not quite sure how to do this, but here is what I got from what I managed to get from MDN, express , react-dropzone and multer Documentation. It seems that Multer does not take the FormData object from react-dropzone , when req.file it, 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 morgan request, the following is issued:

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

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

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

Answer 1

The error occurs because you explicitly specified the 'Content-type' . To do this correctly, you also need to specify a border. A detailed description of multipart/form-data can be found here: How does the HTTP file download work?

To solve the file upload problem, you must remove the 'Content-type' specification from the fetch request. You can also reorganize the uploadImage method to upload the form without parsing the inputs:

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

Answer 2

The problem for me was that Firebase has an error and cannot use multer. You need to use busboy and take it apart manually. I also needed to add a URI from a responsive native imagePicker instead of a file blob. Like this:

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

Answer 3

• Hello! I had a problem loading the image. I have such an object json: file = {lastModified: 1544818295114 lastModifiedDate: Sat December 15, 2018 01:41:35 GMT + 0530 (India Standard Time) {} name: "the mummy poster.jpg" size: 330539 type: "image / jpeg "webkitRelativePath:" "} I used the APi fetch call with the following configuration: let req = new FormData (file); const uploadImage = async (req) => {await fetch (" http: // localhost: 3000 / image / ", {method: "POST", cache: "no-cache", body: req}). then (res => res.json ()) When receiving a request, an error occurs. Please suggest what to do. Thank you