Uploading multiple image files with multer from different input fields

Question

I am not able to upload two images from two different input tags using Multer.

This is the code of the html form

<form action="/upload" method="post" enctype="multipart/form-data">
    <h1>Upload Image 1</h1>
    <input name="photo1" type="file" />
    <img id="output_image" />

    <h1>Upload Image 2</h1>
    <input name="photo2" type="file" />
    <img id="output_image1" />
  
    <button type="submit">Upload</button>
</form>

This is the code of the nodejs file

const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.fields([
    { name: 'photo1', maxCount: 1},
    { name: 'photo2', maxCount: 1}
]), (req, res, next) => {
    console.log(req.file);
    next();
});

But the request object is always undefined. I tried following the documentation but it didn't solve this issue.

Previously I tried uploading a single file which did work out. For that I removed the below part of the form

<h1>Upload Image 2</h1>
<input name="photo2" type="file" />
<img id="output_image1" />

And this was the nodejs file same as the one on the documentation

const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('photo1'), (req, res, next) => {
    console.log(req.file);
    next();
});

I am not able to find the mistake here. Is it not possible to take two images from different input fields using multer? Any suggestions would be appreciated.

Your Multer and HTML form setup is right. When using Multer upload.fields() use req.files['photo1'][0] not req.file to access the uploaded files. — Cocest
– Cocest, Commented May 15, 2022 at 10:42

Jatin Mehrotra · Accepted Answer · 2020-09-07 05:57:20Z

3

Use any of the following approaches

Will this help you .any() Accepts all files that comes over the wire. An array of files will be stored in req.files.

WARNING: Make sure that you always handle the files that a user uploads. Never add multer as a global middleware since a malicious user could upload files to a route that you didn't anticipate. Only use this function on routes where you are handling the uploaded files.

i am saying this from [here][1].

or for multiple files use this

Instead of upload.single('image') you want to do upload.array('image'), and then look at req.files instead of req.file.

3)

app.post("/upload", function(req, res, fields) {

  const storage = multer.diskStorage({
    destination: "public/data/",
    filename: function(req, file, cb){
      crypto.randomBytes(20, (err, buf) => {
        cb(null, buf.toString("hex") + path.extname(file.originalname))
      })
    }
  });

  const upload = multer({
    storage: storage
  }).fields([{name: "pp"}, {name: "banner"}]);

  upload(req, res, (err) => {
    if (err) throw err;
  });

});

for more explanation https://codingstatus.com/upload-multiple-files-using-multer-in-node-js-and-express/

edited Sep 7, 2020 at 5:57

answered Sep 7, 2020 at 5:49

Jatin Mehrotra

11.9k4 gold badges54 silver badges124 bronze badges

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

3 Comments

Major_Ash Over a year ago

I tried this approach before switching to upload.fields() but even that didn't work.

Jatin Mehrotra Over a year ago

I have updated my answer, check if that works for you.

Major_Ash Over a year ago

I want to upload multiple files from multiple input fields because i want to handle them differently on the html side which i think is not possible by .arrays() as it takes multiple files from the same input field

Collectives™ on Stack Overflow

Uploading multiple image files with multer from different input fields

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related