11

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 :)

Improve this question
4
  • 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 Commented Jun 1, 2018 at 10:57
  • I think there is no error in my code, the only problem is the raising of the error Commented Jun 1, 2018 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. Commented Jun 1, 2018 at 13:06
  • Yes, fixed it :) Commented Jun 1, 2018 at 13:31

3 Answers 3

Reset to default
10

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)

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

10 Comments

Is the use of filename mandatory? Can I keep the default hash?
nope, it isnt mandatory. should be fine with just destination!
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
Unluckily it says that storage.single is not a function
heyo, oops i forgot to add something! youll need this after: var upload = multer({ storage: storage }) and THEN do upload.single as before.
|
3

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('/'); });
Improve this answer

Comments

1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.