req.file always undefined using multer in my Node express application

Question

I tried to upload image file from client side to my AWS S3 storage server using multer with the support of multer-s3. However, I keep getting undefined result for my req.file call. I have been googling and check all possible causes to my problem and no luck so far. Hope someone can help me here. Thanks in advance.

Client side HTML code:

<form method="post" enctype="multipart/form-data" action="/create">
    <input type="text" name="name" />
    <input type="text" name="topic" />
    <input type="file" name="image" />
    <input type="submit" value="Upload" />
</form>

Server side code:

var express = require('express');
var http = require('http');
var app = express();
var methodOverride = require('method-override');
var bodyParser = require('body-parser');
var multer  = require('multer');
var multerS3 = require('multer-s3');
var AWS = require('aws-sdk');

app.use(methodOverride());
app.use(bodyParser.urlencoded({ extended: true }));

//Create S3 client
var s3 = new AWS.S3();

//this code is copy directly from multer-s3 since I don't care about my file name shown on S3 for now
var upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: mybuckname,
    metadata: function (req, file, cb) {
      cb(null, {fieldName: file.fieldname});
    },
    key: function (req, file, cb) {
      cb(null, Date.now().toString())
    }
  })
});

app.post('/create', upload.single('image'), function(req, res) {
    var nameField = req.body.name,
        topicField = req.body.topic;
    console.log("File: ", req.file);

    console.log("Name: ", nameField);
    console.log("Topic: ", topicField);
    res.sendStatus(200);

    res.end();
});

I have tried the following:

Removed 'body-parser' and use 'multer' only, then even worse result (both req.body and req.file are undefined). With body-parser, at least I can guarantee req.body is working
To simplify the cause, I removed all my text field inputs from client side and leave only file upload option to make sure I am only transmitting file data, still return undefined for req.file (multer is not working at all)
I also read about the possibility that "Note that req.body might not have been fully populated yet. It depends on the order that the client transmits fields and files to the server." In my case, I am not getting the file so it doesn't matter for me now.
Use multer only without multer-s3, and tried upload.array instead of upload.single, still no luck (multer-s3 is built on top of multer, so I don't think it has anything to do with my current problem, but just to give it a try)
Skip AWS S3 and store it in local path, still undefined result

It seems like there is no suggestion here. I guess I need to switch my code to 'busboy' and hope to get it work. My only fear is that same problem will occur considering 'multer' is built on top of 'busboy'. I can see many people met this problem, and I double check every solution to make sure I am doing this right. But I guess no one has encounter my situation. — RogerMW

RogerMW RogerMW · Accepted Answer · 2017-03-26T02:17:07

after long struggle switching between multer and busboy and nothing works. All the sudden I noticed my form is actually using a Polymer element 'is="iron-form"' which my mistake didn't type it in my original post as shown below. After removed it, my file upload is working on multer - I'm sure it will also work on busboy.

<form is="iron-form" method="post" enctype="multipart/form-data" action="/create">

Polymer elements always create problems to me in the past. But don't take me wrong, it's a great project with many great things available to design your page. But you need to really understand how to use those elements to take the advantage of them. In my case, I learn from my lesson and hope to share it with you.

req.file always undefined using multer in my Node express application

1 Answers