CODEWITHSUNDEEP
node.jsformsfile-uploadpostmanmulter
user4688836
user4688836

Reputation:

req.file is undefined when I upload image using multer and html input form

I wanted to upload images using nodeJS and multer, so I did the following:

Below is my multer configuration:

var multer = require('multer');

var storage = multer.diskStorage({

    //Setting up destination and filename for uploads
    destination: function (req, file, cb) {  
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {  
        cb(null, Date.now() + file.originalname);
    }

});

var upload = multer({
    storage: storage,
    limits:{
        fieldSize: 1024*1024*6,
    }
});

Below is my route to upload image:

router.post('/designer', upload.single('designerImage'), async (req, res) => {
    console.log(req.file);

    //rest of the code which is not needed for my query
})

It works perfectly fine when I POST the file using form-data key of type file using POSTMAN. But when I try to send it using a HTML form input, req.file comes out to be undefined and no file gets uploaded to the uploads folder. Below is my HTML form code:

<form action="/designer" method="POST">
    <input type="file" name="designerImage">
<form>

What is the solution to this problem? I've spend hours but couldn't get to a solution.

Upvotes: 0

Views: 386

Answers (1)

Marcos Casagrande
Marcos Casagrande

Reputation: 40404

multer only parses multipart/form-data requests, so you need to add enctype="multipart/form-data" to your form

<form action="/designer" method="POST" enctype="multipart/form-data">
    <input type="file" name="designerImage">
<form>

Upvotes: 2

Related Questions