Multer file upload error (nodejs and react)

Question

I've sent this request from client.

if(file){
      const data = new FormData()
      const fileName = Date.now() + file.name
      data.append('file', file) // file comes from state while submitting
      data.append('name', fileName)
      try {
        await axios.post('/upload_image', data)      
      } catch (error) {
        console.log(error.message);
      }
}

Nodejs

const multer = require('multer')


// file upload
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    console.log(req.body);
    cb(null, "./public/images/");
  },
  filename: (req, file, cb) => {
    cb(null, req.body.name)
  },
});
const upload = multer({ storage });
router.post("/upload_image", upload.single('file'), (req,res)=>{
  console.log(req.body);
    try {
        res.status(200).json("file uploaded successfully")
    } catch (error) {
        console.log(error.message);
    }
});

If I print req.body in

router.post("/upload_image", upload.single('file'), (req,res)=>{
 console.log(req.body.name)
console.log(req.file)
......................
.......................
})

Here name gets printed and req.file also gets printed. But, inside

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    ...................
..............................
  },
  filename: (req, file, cb) => {
    console.log(req.body.name); //undefined  
    cb(null, req.body.name)
  },
});

name becomes undefined and app gets crashed. Why the req object didn't go to diskStorage function. What is the issue here?

Maxim Orlov · Accepted Answer · 2021-05-28 16:06:31Z

1

From multer documentation:

Note that req.body might not have been fully populated yet. It depends on the order that the client transmits fields and files to the server.

If you append the name before the file in the frontend, the name should be available at req.body.name.

// Append name first before we send the file
// so we can access it in the backend
data.append('name', fileName);
data.append('file', file);

Alternatively, you can send the file name directly with the file as the 3rd argument to the append function:

data.append('file', file, fileName);

You can then access the file name in the backend with req.file.originalname. Consult this free Request Parsing in Node.js Guide whenever you're working with file uploads in Node.js.

edited May 28, 2021 at 16:06

answered May 28, 2021 at 15:59

Maxim Orlov

2,6721 gold badge18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multer file upload error (nodejs and react)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related