node.js upload with multer not working

Question

I am trying to implement file uploads with node.js and the multer middleware, but it doesn't seem to work. This is my code:

var express = require('express');
var multer = require('multer');
var done = false;
var app = express();

app.use(multer( {dest:'./uploads/',
            onFileUploadStart : function(file){
                console.log('File recieved:');
                console.log(file);
            },
             onFileUploadData:function (file,data){
                console.log('Data recieved');
            },
             onParseEnd: function(req,next){
                next();
             }
            }));

app.use(express.static(__dirname+"/public"));

app.post('/upload',require(__dirname+'/upload.js').upload);

app.listen(3000);

My form looks like this:

<html>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name ="file">
    <input type="submit" value="Upload selected file to server">
</form>    
</body>
</html>

And upload.js looks like this:

exports.upload = function (req,res)
{
   console.dir(req.files);
};

I think the problem is that my form is being submitted with "application/x-www-form-urlencoded" in the Content-Type header instead of "multipart/form-data", since this is what appears when I use Fiddler to monitor the request, but I have no idea why. Can anyone shed any light on this?

check this post stackoverflow.com/a/39036006/1153703

Bikesh M
– Bikesh M

2016-08-19 10:03:59 +00:00
Commented Aug 19, 2016 at 10:03 — Bikesh M
– Bikesh M, Commented Aug 19, 2016 at 10:03

nbro · Accepted Answer · 2016-01-09 18:56:18Z

1

I got it working by adding an accept attribute to my tag in my html. I don't know why in some examples this is not used.

Here's the code for my entire form:

<form action="/upload" method="post" enctype="multipart/form-data"> 

    <input type="file" name ="file" accept="application/x-zip-compressed,image/*"> 

    <input type="submit" value="Upload selected file to server"> 

</form>

Check the entire project eventually: https://github.com/tutiplain/quickupload

edited Jan 9, 2016 at 18:56

nbro

16.1k34 gold badges122 silver badges219 bronze badges

answered Jan 16, 2015 at 2:25

tutiplain

1,4795 gold badges20 silver badges42 bronze badges

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

4 Comments

tutiplain Over a year ago

Here's the code for my entire form: <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name ="file" accept="application/x-zip-compressed,image/*"> <input type="submit" value="Upload selected file to server"> </form>

Asim Mittal Over a year ago

I'm not able to make this work. I've taken your entire source, but the log statements within multer don't fire and the "req.files" is always undefined

tutiplain Over a year ago

Use the project on github: github.com/tutiplain/quickupload. I've tested this on an Ubuntu server running in Azure and has worked like a charm.

tutiplain Over a year ago

Note that because of the accept attribute, it might only upload images and zip files. Haven't tested uploading other stuff yet.

NarendraSoni · Accepted Answer · 2015-01-12 10:06:08Z

0

I can see you are doing everything right. I used multer sometime back, you can look into my working implementation here. In this EJS file i have an image upload functionality and then i wrote some logic to store the file to some other location.

Make sure you have appropriate router, for example you can use router.post(..)

exports.upload= function(req,res){
    // get the temporary location of the file
    var tmp_path = req.files.file.path;
    // set where the file should actually exists - in this case it is in the "images" directory
    var target_path = '/..provide path to store photos../' + req.files.file.name;
    // move the file from the temporary location to the intended location
    fs.rename(tmp_path, target_path, function(err) {
        if (err) throw err;
        // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
        fs.unlink(tmp_path, function() {
            if (err) {
                throw err;
            }else{
              //response logic ...
             };
            });
        });
  };

answered Jan 12, 2015 at 10:06

NarendraSoni

2,26819 silver badges27 bronze badges

2 Comments

tutiplain Over a year ago

In my upload.js, req.files is equal to an empty object {}. And none of the console.log() calls inside the multer event handlers get called. As far as I can see, the request is routed properly, because the console.logs inside upload.js are displaying, but multer seems to be doing nothing, like the code was commented out. I guess it could be because the <form> is not being sent as "multipart/form-data". But I have no idea why.

NarendraSoni Over a year ago

Could you push your whole project to either Github or any other repo. Let me have a look at it. I don't see any reason for it to not work.

cchapman · Accepted Answer · 2016-05-12 19:30:30Z

0

You can try this. It works for me. If any issues then let me know

var multer  = require('multer');
var upload = multer({ dest: './uploads' });

router.post('/register',upload.single('profileimage'),function(req,res,next){

    if (req.file) {
        console.log('Uploading File');
        var profileImageOriginlName=req.file.originalname;
        var profileImageName=req.file.name;
        var profileImageMime=req.file.mimetype;
        var profileImagePath=req.file.path;
        var profileImageExt=req.file.extension;
        var profileImageSize=req.file.size;
    }
    else
    {
        var profileImageName='noimage.png';
    }

});

edited May 12, 2016 at 19:30

cchapman

3,38510 gold badges56 silver badges72 bronze badges

answered May 12, 2016 at 17:13

Yadjosan

34 bronze badges

Collectives™ on Stack Overflow

node.js upload with multer not working

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related