image upload using multer, reactjs, nodejs

Question

 // nodejs const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "images"); }, filename: (req, file, cb) => { cb(null, req.body.name); }, }); const upload = multer({ storage: storage }); app.post("/api/upload", upload.single("file"), (req, res) => { res.status(200).json("File has been uploaded"); }); app.listen(5000, () => { console.log("server running..."); }); // reactjs const [file, setFile] = useState(""); const handleChange = (e) => { setFile(e.target.files[0]); }; const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("name", file); try { const res = await axios.post("/api/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, }); } catch (err) { console.log(err); } }; // jsx <form onSubmit={handleSubmit}> <input type="file" name="file" onChange={handleChange} /> <input type="submit" value="send" /> </form>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Hello, please I have an issue with running this code using react, it works perfectly using postman but gives this error while using react "POSThttp://localhost:3000/api/upload [HTTP/1.1 500 Internal Server Error 116ms]" , I added "proxy": "http://localhost:5000" on the client package.json file and I also use concurrently to run both the nodejs server and react app

here is the error from node

MulterError: Unexpected field
[0]     at wrappedFileFilter (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\multer\index.js:40:19)
[0]     at Busboy.<anonymous> (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\multer\lib\make-middleware.js:114:7)
[0]     at Busboy.emit (events.js:315:20)
[0]     at Busboy.emit (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\busboy\lib\main.js:38:33)
[0]     at PartStream.<anonymous> (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\busboy\lib\types\multipart.js:213:13)
[0]     at PartStream.emit (events.js:315:20)
[0]     at HeaderParser.<anonymous> (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\dicer\lib\Dicer.js:51:16)
[0]     at HeaderParser.emit (events.js:315:20)
[0]     at HeaderParser._finish (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\dicer\lib\HeaderParser.js:68:8)
[0]     at SBMH.<anonymous> (C:\Users\Acer\Desktop\nodejs\imageupload\node_modules\dicer\lib\HeaderParser.js:40:12)

Answer 1

Remove the header from the Axios request.

const res = await axios.post("/api/upload", formData);

Answer 2

Because in the backend you're using upload.single("file") , in the client, you should change to:

    formData.append("file", file); // instead of formData.append("name", file);

Another solution is to use the code generated by Postman if you have the correct result in this tool. The button </> is on the right bar.