Multer: Image Upload with FormData() not work(react + express)

[YanghaKoo]

WritingForm.js

import React, { Component } from "react";
import axios from "axios";

class WritingForm extends Component {
  state = {
    selectedFile: null
  };

  handleSubmit = async () => {
    const { selectedFile } = this.state;

    const fd = new FormData();
    fd.append("img", selectedFile); // 파일 하나 state를 거쳐서 서버로 전송

    const contentType = {
      headers: { "content-type": "multipart/form-data" }
    };

    axios
      .post("/post/test", fd, contentType)
      .then(res => console.log(res))
      .catch(e => console.log(e));
  };

  handleFileChange = e => {
    this.setState({
      selectedFile: e.target.files[0]
    });
    console.log(e.target.files[0]);
  };

  render() {
    return (
      <center>
        <div>
          <input
            id="img"
            name="img"
            type="file"
            className="input"
            onChange={this.handleFileChange}
          />
          <input
            type="button"
            value="Submit"
            className="submit"
            onClick={() => {
              this.handleSubmit();
            }}
          />
        </div>
      </center>
    );
  }
}

export default WritingForm;

post.js

const router = require('express').Router()
const multer = require('multer')
const path = require('path')

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, cb) {
      cb(null, 'uploads/');
    },
    filename(req, file, cb) {      
      const ext = path.extname(file.originalname);
      cb(null, path.basename(file.originalname, ext) + new Date().valueOf() + ext);
    },
  }),
})

// didn't upload image in upload directory
router.post('/test',upload.single('img'), async (req,res, next)=>{
  try{
    console.log(req.file)         // undefined
    console.log(req.files)        // { img:   { name: 'name.jpg',    
                                                    //  data: <Buffer ff d8 ff e1 28 bc 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 0c 00 0e 01 02 00 20 00 00 00 9e 00 00 00 0f 01 02 00 0500 00 00 be 00 00 00 10 01 02 00 ... >,
                                                    //  encoding: '7bit',
                                                    //  truncated: false,
                                                    //  mimetype: 'image/jpeg',
                                                    //  md5: [Function: md5],
                                                    //  mv: [Function: mv] } }
    res.send({"ret":"success"})


  }catch(e){
    console.log(e)
    res.send({'ret':'err'})
    next(e) 
  }
})

Hello, I'm a student in South Korea, and I have difficult in using multer with react.

I studied when upload.single('img') did work, image files should be uploaded to 'uploads' directory and req.file should contain information of file.

But only I have is req.files, despite i used upload.single(), not upload.array()

'req.files' is the only variable that contain file information from front-end.
How can I actually upload file to my 'upload' directory?

Thank you for your help, and sorry for my bad English.

[LinusU]

Could it be another middleware that is consuming the body before Multer? Try and remove any other middleware and see if that solves it...

[YanghaKoo]

Could it be another middleware that is consuming the body before Multer? Try and remove any other middleware and see if that solves it...

Thank you for your reply
i think there is no middleware before multer in ( router.post('/test'), upload.single().. )..

By the way, In my req.files, i got this
{ img:
{ name: 'name.jpg',
data: encoding: '7bit',
truncated: false,
mimetype: 'image/jpeg',
md5: [Function: md5],
mv: [Function: mv] } }

this data dosen't have fieldname property like req.file usually have that property,
With no fieldname in req.files, So I think upload.single('fieldname') does not work.
It that right?

And without mutler(const upload), req.files is always exist, (passed by front-end)

So I wonder if there is any solution with upload files in 'upload' directory with my req.files.img with no 'fieldname' property.

[LinusU]

Which version of multer are you using?

edit:

And without mutler(const upload), req.files is always exist, (passed by front-end)

This is very strange, are you saying that even if you remove multer you have req.files filled out?

[YanghaKoo]

Which version of multer are you using?

edit:

And without mutler(const upload), req.files is always exist, (passed by front-end)

This is very strange, are you saying that even if you remove multer you have req.files filled out?

yes!!!!

````
post.js

const router = require("express").Router();
const fs = require("fs");

router.post("/test", async (req, res, next) => { // without upload.single('img'),
console.log(req.file)
console.log(req.body)
console.log(req.files)
res.send('asd')
});

module.exports = router;
````

Still req.files value is
{ img:
{ name: 'name.jpg',
data: 00 9e 00 00 00 0f 01 02 00 05 00 00 00 be 00 00 00 10 01 02 00 ... >,
encoding: '7bit',
truncated: false,
mimetype: 'image/jpeg',
md5: [Function: md5],
mv: [Function: mv] }
}

still req.file and req.body have no value.

Is there any problem with my code?

[LinusU]

Is it possible that another middleware is added outside of that router?

Otherwise, could you try and reduce it to a minimal test case that I can try to run?

[brunosiqueira]

+1 Same thing started to happen to me.

[YanghaKoo]

oh i fixed it.

There was another middleware that consuming body in my app.js, outside of router!!
Thank you for your kind comment.

@brunosiqueira
maybe your problem is same as mine!

[brunosiqueira]

Thanks for the tip, @YanghaKoo !
It was my case too! The express-fileupload middleware started to interfere with multer.
Now it is working fine!