How to send multiple files to AWS S3 using Multer-S3 from different fields

Question

I'm currently using Postman in which I require to upload two files from two different fields to AWS-S3; this is how it looks like: This is the API route that I'm calling:

router.route('/').post(uploadThumbnail, uploadVideo, createVideo);

That route calls three functions(which is supposed to return the data requested from Postman):

exports.createVideo = asyncHandler(async (req, res, next) => {
  // Add user to req,body
  req.body.user = req.user.id;
  // Bring files
  if (req.file) {
    console.log(req.file);
  }
});

Here are the two other functions(with the aws upload function); one for thumbnail and a second one for video_url:

const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: process.env.AWS_BUCKET_NAME,
    acl: 'public-read',
    key: function(req, file, cb) {
      const strOne = process.env.WEBSITE_NAME + '-';
      const userId = req.user.id + '-';
      const userEmail = req.user.email + '-';
      const todaysDate = Date.now().toString() + '.';
      const extension = file.mimetype.split('/')[1];
      const finalStr = strOne.concat(userId, userEmail, todaysDate, extension);
      cb(null, finalStr);
    }
  })
});
exports.uploadThumbnail = upload.single('thumbnail');
exports.uploadVideo = upload.single('video_url');

Everytime I run the post, Postman throws me this error:

{
    "status": "error",
    "error": {
        "name": "MulterError",
        "message": "Unexpected field",
        "code": "LIMIT_UNEXPECTED_FILE",
        "field": "video_url",
        "storageErrors": [],
        "statusCode": 500,
        "status": "error"
    },
    "message": "Unexpected field",
    "stack": "MulterError: Unexpected field\n    at wrappedFileFilter (C:\\xampp\\htdocs\\myporn\\node_modules\\multer\\index.js:40:19)\n    at Busboy.<anonymous> (C:\\xampp\\htdocs\\myporn\\node_modules\\multer\\lib\\make-middleware.js:114:7)\n    at Busboy.emit (events.js:198:13)\n    at Busboy.EventEmitter.emit (domain.js:448:20)\n    at Busboy.emit (C:\\xampp\\htdocs\\myporn\\node_modules\\busboy\\lib\\main.js:38:33)\n    at PartStream.<anonymous> (C:\\xampp\\htdocs\\myporn\\node_modules\\busboy\\lib\\types\\multipart.js:213:13)\n    at PartStream.emit (events.js:198:13)\n    at PartStream.EventEmitter.emit (domain.js:448:20)\n    at HeaderParser.<anonymous> (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\Dicer.js:51:16)\n    at HeaderParser.emit (events.js:198:13)\n    at HeaderParser.EventEmitter.emit (domain.js:448:20)\n    at HeaderParser._finish (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\HeaderParser.js:68:8)\n    at SBMH.<anonymous> (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\HeaderParser.js:40:12)\n    at SBMH.emit (events.js:198:13)\n    at SBMH.EventEmitter.emit (domain.js:448:20)\n    at SBMH._sbmh_feed (C:\\xampp\\htdocs\\myporn\\node_modules\\streamsearch\\lib\\sbmh.js:159:14)\n    at SBMH.push (C:\\xampp\\htdocs\\myporn\\node_modules\\streamsearch\\lib\\sbmh.js:56:14)\n    at HeaderParser.push (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\HeaderParser.js:46:19)\n    at Dicer._oninfo (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\Dicer.js:197:25)\n    at SBMH.<anonymous> (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\Dicer.js:127:10)\n    at SBMH.emit (events.js:198:13)\n    at SBMH.EventEmitter.emit (domain.js:448:20)\n    at SBMH._sbmh_feed (C:\\xampp\\htdocs\\myporn\\node_modules\\streamsearch\\lib\\sbmh.js:188:10)\n    at SBMH.push (C:\\xampp\\htdocs\\myporn\\node_modules\\streamsearch\\lib\\sbmh.js:56:14)\n    at Dicer._write (C:\\xampp\\htdocs\\myporn\\node_modules\\dicer\\lib\\Dicer.js:109:17)\n    at doWrite (_stream_writable.js:415:12)\n    at writeOrBuffer (_stream_writable.js:399:5)\n    at Dicer.Writable.write (_stream_writable.js:299:11)"
}

The function works great but only when sending one single file, it can be either thumbnail or video_url but not both...I need both fields to work.

Any idea on how to fix this?

score 1 · Answer 1 · answered Apr 25 '20 at 11:42

  const s3 = new AWS.S3({
    accessKeyId: 'xxxxxxxxx',
    secretAccessKey: 'xxxxxxxxx'
});
  const uploadS3 = multer({

    storage: multerS3({
        s3: s3,
        acl: 'public-read',
        bucket: 'xxxxxxxx',
        metadata: (req, file, callBack) => {
            callBack(null, { fieldName: file.fieldname })
        },
        key: (req, file, callBack) => {
            var fullPath = 'products/' + file.originalname;//If you want to save into a folder concat de name of the folder to the path
            callBack(null, fullPath)
        }
    }),
    limits: { fileSize: 2000000 }, // In bytes: 2000000 bytes = 2 MB
    fileFilter: function (req, file, cb) {
        checkFileType(file, cb);
    }
}).array('photos', 10);


exports.uploadProductsImages = async (req, res) => {


    uploadS3(req, res, (error) => {
        console.log('files', req.files);
        if (error) {
            console.log('errors', error);
            res.status(500).json({
                status: 'fail',
                error: error
            });
        } else {
            // If File not found
            if (req.files === undefined) {
                console.log('uploadProductsImages Error: No File Selected!');
                res.status(500).json({
                    status: 'fail',
                    message: 'Error: No File Selected'
                });
            } else {
                // If Success
                let fileArray = req.files,
                    fileLocation;
                const images = [];
                for (let i = 0; i < fileArray.length; i++) {
                    fileLocation = fileArray[i].location;
                    console.log('filenm', fileLocation);
                    images.push(fileLocation)
                }
                // Save the file name into database
                return res.status(200).json({
                    status: 'ok',
                    filesArray: fileArray,
                    locationArray: images
                });

            }
        }
    })
};

score 1 · Answer 2 · answered Jul 27 '21 at 16:33

Make use of file.fieldname and .fields to achieve what you need

function uploadImageToS3(){
    const multer = require("multer");
    const multerS3 = require("multer-s3");
    const uuid = require("uuid").v4;
    const path = require("path");

    const cloudStorage = multerS3({
      s3: s3Client,
      bucket: process.env.AWS_PRODUCTS_BUCKET,
      acl: "public-read",
      metadata: (req, file, cb) => {
        if (file.fieldname == "thumbnail") {
          const extension = ".jpeg";
          cb(null, `${uuid()}${extension}`);
          return;
        }
        if (file.fieldname == "video_url") {
          const extension = ".jpeg";
          cb(null, `${uuid()}${extension}`);
          return;
        }
        cb(
          "fieldName other than avatar and productImages are not supported",
          null
        );
      },
      // key: name of the file
      key: (req, file, cb) => {
        const extension = path.extname(file.originalname);
        cb(null, `${uuid()}${extension}`);
      },
    });

    const limitFileSize = { fileSize: 1024 * 1024 * 5 }, // 1Byte -->1024Bytes or 1MB --> 5MB
      filterFileType = (req, file, cb) => {
        const isAllowedFileType =
          file.mimetype == "image/jpeg" ||
          file.mimetype == "image/jpg" ||
          file.mimetype == "image/png";

        if (isAllowedFileType) {
          cb(null, true);
          return;
        }
        // To reject this file pass `false`
        cb(null, false);
      };

    const upload = multer({
      storage: cloudStorage,
      limits: limitFileSize,
      fileFilter: filterFileType,
    });
    return upload;
  }

In route, use it like so

router.post(
  "/upload",
  uploadImageToS3().fields([
    { name: "thumbnail", maxCount: 1 },
    { name: "video_url", maxCount: 1 }
  ]),
  handleImagesUploadController
);

How to send multiple files to AWS S3 using Multer-S3 from different fields

2 Answers2