Multer req.body empty in node js

Question

I am using multer to upload form data( some image files).

But req.body and req.files both are coming empty. when I am uploading images I got the successful message " your image has been uploaded" but my folder is empty.

I tried all solution available on StackOverflow as well as GitHub. but no luck.

below my code

form in the HTML file

<form id="uploadForm" enctype="multipart/form-data" action="multerFile" method="post">
  <input type="file" name="userPhoto" multiple />
  <input type="submit" value="Upload Image" name="submit">
  <input type='text' id='random' name='random'>
  <br>
  <span id="status"></span>
</form>

<script>
  $(document).ready(function () {
    $('#uploadForm').submit(function () {
      $("#status").empty().text("File is uploading...");
      $(this).ajaxSubmit({
        error: function (xhr) {
          status('Error: ' + xhr.status);
        },
        success: function (response) {
          console.log(response)
          $("#status").empty().text(response);
        }
      });
      return false;
    });
  });
</script>

index.js

app.post('/multerFile', function (req, res) {
    console.log("hi i am multer function")
    var storage = multer.diskStorage({
        destination: 'C:/Users/chandra/Documents/project/node_project/public'
    });
    var upload = multer({ storage: storage }).array('userPhoto', 2);

    upload(req, res, function (err) {
        if (err) {
            console.log(err);
            return res.end("Error uploading file.");
        } else {
            console.log(req.body)
            console.log(req.files);
            req.files.forEach(function (f) {
                console.log(f);
                // and move file to final destination...
            });
            res.end("File has been uploaded");
        }
    });
});

I tried:

Express, Multer, BodyParser req.body empty array

multer req.body showing empty always

https://github.com/expressjs/multer/issues/351

https://github.com/expressjs/multer/issues/391

and I followed this tutorial for multer

https://codeforgeek.com/2016/01/multiple-file-upload-node-js/

I am unable to understand that what am I doing wrong?

please help.

Thanks in advance

Did you try using one file, without uploding multiple files, if not try removing multiple flag from your file input and try again and see if error reoccurs — Janith
@JanithKasun I try with single file. now I am able to see details of file in req.files and it is showing successful message(file has been uploaded..) but I am not able to find file in destination folder. — C P Verma

Francis Ngueukam Francis Ngueukam · Accepted Answer · 2018-08-31T09:52:12

First, .ajaxSubmit() is not core jQuery functions. You need the jQuery Form Plugin and I don't know if you import it like below:

<script src="http://malsup.github.com/jquery.form.js"></script>

The easiest way to do it will be to do it without a plugin like this:

$('#uploadForm').submit(function() {

  $("#status").empty().text("File is uploading...");

  var formData = new FormData($('#uploadForm')[0]);

  $.ajax({
      type: 'POST',
      url: '/multerFile',
      data: formData,
      success: function(response) {
          console.log(response)
          $("#status").empty().text(response);         
      },
      contentType: false, // Prevent jQuery to set the content type
      processData: false  // Prevent jQuery to process the data    
  });

  return false;

});

Now in your backend, your destination should better be (with a folder uploads in your public folder):

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
       cb(null, './public/uploads/')
    },
});

Multer req.body empty in node js

2 Answers