CODEWITHSUNDEEP
node.jsexpressmulter
Joan
Joan

Reputation: 1385

Image upload: Node Multer 'LIMIT_UNEXPECTED_FILE' error

I'm trying to use multer to process a profile photp upload on the frontend to the backend but keep getting this error:

{ [Error: Unexpected field]
code: 'LIMIT_UNEXPECTED_FILE',
field: 'file',
storageErrors: [] }

Below is my code:

register.ejs:

<div class="form-group">
    <input class="form-control" type="file" name="image" id="image">
</div>

ajax.js:

$('form').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        // var img = cropper.getCroppedCanvas().toDataURL();
        // formData.append('img',img);
            $.ajax({
                url: '/register',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    console.log('Upload success');
                    },
                error: function () {
                    console.log('Upload error');
            }
        });
    });

app.js:

var multer      = require('multer');
var cloudinary  = require('cloudinary');
...
// MULTER
var storage =   multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, "./public/uploads");
  },
  filename: function(req, file, callback) {
    callback(null, Date.now() + file.originalname);
  }
});

var upload = multer({ storage : storage}).single("image");

app.post("/register", function(req, res) {
  upload(req, res, function(err){
      if(err) {
           console.log(err);
           return res.send("Error uploading file.");
      }

     res.send("Upload success");
 });
});

I also get an undefined object when I try to get req.body.img or req.file. Maybe the formdata is not populated properly? Can anyone shed some light for me?

Upvotes: 5

Views: 16336

Answers (3)

Kamiswara Angga W.
Kamiswara Angga W.

Reputation: 31

When you call the multer function, maybe you forget to change the single field name. For example:

multer({ ... }).single("some_field_name");

Maybe some_field_name should be other_field_name. some_field_name and other_field_name are field names.

Upvotes: 0

grkmk
grkmk

Reputation: 299

It says on multer docs that you should pass enctype="multipart/form-data" attribute to your <form> element. I'm not really familiar with ajax, but I think you may have to set contentType: in ajax.js to "multipart/form-data".

I also had a similar error, but it was caused by non-matching text-field keys.

Upvotes: 1

damith anuradha
damith anuradha

Reputation: 93

I have also face the same issue, instead of using

var upload = multer({ storage : storage}).single('image');

use the fields() method which allow to handle multiple files at once

app.use(multer({ storage : storage}).fields([{name:'image',maxCount:1}]));

file data store in req.files , then you can simply handle the files

that error occur when you try to handle multiple form data object in single multer middleware,

you can use the storage option to store different files in different locations.

further more can go thought official doc

Upvotes: 0

Related Questions