CODEWITHSUNDEEP
node.jsimagemulter
MWN
MWN

Reputation: 387

upload files from different fields in a form using multer

I have a document that contains two fields are of input type="file" and I want to upload both of these on submit.

This post method giving me internal server error 500 on uploading two files but when I upload one file, it is OK.

router.post('/', mediaFiles.uploadSingle('icon_url'), mediaFiles.uploadSingle('background_url'),
    async (req, res) => {
       name: req.body.name,
       icon_url: req.file.path.replace(/\\/g, "/"), // req.file['icon_url']
       background_url: req.file.path.replace(/\\/g, "/") // req.file['background_url']
})

you can ignore this MediaFiles class because it provides traditional code to upload images with multer

import multer from "multer";
import path from "path";

class MediaFiles {
    private storage = multer.diskStorage({
        destination: 'uploads/',
        filename: function (req, file, callback) {
            callback(
                null,
                file.originalname.replace(/\.[^/.]+$/, "") + '-' + Date.now() + path.extname(file.originalname))
        }
    })

    uploadSingle(fieldName?: string) {
        try {
            return multer({
                storage: this.storage,
                limits: { fileSize: 1024 * 1024 * 1 }, // 1MB = 1024 * 1024 * 1
                fileFilter: function (req, file, callback) {
                    const fileTypes = /jpeg|jpg|png/;

                    const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());
                    const mimeType = fileTypes.test(file.mimetype);

                    if (extName && mimeType) {
                        callback(null, true)
                    } else {
                        callback(new Error('Error: Images Only!'), null)
                    }
                }
            }).single(fieldName);
        } catch (err) {
            console.log(err.message)
        }
    }
}

export default new MediaFiles();

Upvotes: 1

Views: 282

Answers (1)

Ahmed Al Abdulaal
Ahmed Al Abdulaal

Reputation: 280

I don't think you could have two multer objects, I was having the same problem and here is what worked for me.

const storage = multer.diskStorage()
const mediaFiles = multer({ 
storage:storage })
.fields([{ name: 'icon_url', maxCount: 1 }, { name: 'background_url', maxCount: 1 } ]

router.post('/', mediaFiles, async (req, res) => {
    console.log(req.files) // req.files is an array of files
}

Upvotes: 0

Related Questions