Multer: upload different file types in different folders

Question

I have a simple form with two file input fields. One is about an image, and the other is about a mp3 file.

I have an express server which utilizes multer as file upload system. I'd like to save the image inside the img, and the mp3 file inside the music folder.

This is what I tried so far:

var musicUpload = multer({dest: 'music'});
var imgUpload = multer({dest: 'img'});

app.post('music', 
         musicUpload.single('music'), 
         imgUpload.single('img'), 
         function (req, res) {
             ...
         });

While this is the form:

<form action="post" enctype="multipart/form-data" action="music">
    <input type="file" id="img" name="img">
    <input type="file" id="music" name="music">
    <input type="submit" value="Send">
</form>

I need to handle the 2 different files in a different way, this is the reason why I used "single" twice. But, unluckly, I receive a "Unexpected field" error message.

How can achieve the result?

Ps. There are many question on SO about multiple files uploading, but none of them solved my specific problem. Don't be too much fast at flagging this question :)

I found a stupid workaround, which is about using `multer().any()` as first middleware. But this copy the file in the root in any way, before executing the other 2 middlewares, but prevents the throwing of the error. It's not what I wanted in any case — Christian Vincenzo Traina, Jun 01 '18 at 10:57
I think there is no error in my code, the only problem is the raising of the error — Christian Vincenzo Traina, Jun 01 '18 at 10:58
you have a missing quote after dest: 'img in your code, i assume thats not your problem but you may want to fix it anyway so that other people dont assume thats your problem. — Matt Pengelly, Jun 01 '18 at 13:06

Matt Pengelly · Accepted Answer · 2018-06-01T20:42:15.367

8

You could try using something like DiskStorage. As per their docs: https://github.com/expressjs/multer

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    if (file.mimetype === 'audio/mp3') {
      cb(null, 'songs')
    } else if (file.mimetype === 'image/jpeg') {
      cb(null, 'img')
    } else {
      console.log(file.mimetype)
      cb({ error: 'Mime type not supported' })
    }
  }
})


var upload = multer({ storage: storage })

and then on the endpoints themselves do:

var upload = multer({storage}); 
  router.post('/song', upload.any(), function(req, res) { 
  ...  
});

this is probably cleaner then your approach and i think gives the functionality you're looking for as it gives you more granular control over saving those files. (with edits by @cristian)

edited Jun 01 '18 at 20:42

answered Jun 01 '18 at 13:10

Matt Pengelly

1,480
2
20
34

Is the use of `filename` mandatory? Can I keep the default hash? – Christian Vincenzo Traina Jun 01 '18 at 13:33
nope, it isnt mandatory. should be fine with just destination! – Matt Pengelly Jun 01 '18 at 13:53
just to be clear, you should be using this in place of your var imgUpload = multer({dest: 'img'}); multer setup. so in my example it would be storage.single('file') or something – Matt Pengelly Jun 01 '18 at 14:01
Unluckily it says that `storage.single` is not a function – Christian Vincenzo Traina Jun 01 '18 at 20:25
heyo, oops i forgot to add something! youll need this after: var upload = multer({ storage: storage }) and THEN do upload.single as before. – Matt Pengelly Jun 01 '18 at 20:28
I read in the official documentation that I need to write: `var upload = multer({storage: storage});` and then use upload as middleware. But in this way I get again `Unexpected field` – Christian Vincenzo Traina Jun 01 '18 at 20:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172273/discussion-between-matt-pengelly-and-cristian-traina). – Matt Pengelly Jun 01 '18 at 20:29
@MattPengelly I'm in the same situation But instead of mime type, I want to place files in different directories based on the field name. Also, I don't want any error if there is an extra file input. – Amarjit Singh Sep 27 '18 at 18:34
I think the answer can be easily adapted to handle your use case as well can't it? Did you try? – Matt Pengelly Sep 27 '18 at 18:40
I did further fixes after this answer, if you wait until I arrive home then I can paste my new code – Christian Vincenzo Traina Sep 28 '18 at 10:17

score 2 · Answer 2 · answered Aug 04 '20 at 08:00

you can add if else statement in multer storage destination and use file.fieldname to determine your input field name and store it in different folder.

var storage = multer.diskStorage({
    destination: function (req, file, cd) {
        if (file.fieldname === 'img') {
            cd(null, '/img');
        }

        else if (file.fieldname === 'music') {
            cd(null, '/music');
        }
        
    },

    filename: function (req, file, cd) {
      cd(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

var upload = multer({storage: storage});

and in your post method this will be the solid partner. reference

var cpUpload = upload.fields([{ name: 'img', maxCount: 1 }, { name: 'music', maxCount: 1 }]);
app.post('/music', cpUpload, function (req, res, next) { 

    console.log(req.file, req.body);
    res.redirect('/');

});

score 1 · Answer 3 · answered Apr 22 '20 at 21:36

Consider looking at the solutions shown here in this similar question, it shows how to use the upload.fields[...] provided by multer for multi-file uploads that gives you more control withe the chance to define if the field is .single or .array using the maxCount:.

OR

Look into my repo (a nuxt-express-mongodb app) under server where i use multer to upload a song/music and image from 1 post request using upload.fields[...] to see a full working implementation.

Multer: upload different file types in different folders

3 Answers3