jquery AJAX post formdata to node, results in empty req.body

Question

I am trying to post data to my node server. The data are gathered in the following HTML

<label for="files" class="col-md-4 control-label">Files</label>
<div class="col-md-7">
    <input type="file" id="files" name="files[]" multiple="multiple">
</div>
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-7">
    <input id="name" name="name" class="form-control" type="text">
</div>
<label for="url" class="col-md-4 control-label">Landing Page</label>
<div class="col-md-7">
    <input id="url" name="name" class="form-control" type="text">
</div>
<button type="button" id="add_files" class="btn btn-primary" style="background-color:#27AE60;">Add Files</button>

the click event is caught by jquery, and issues the ajax post

$('#add_files').on('click', function () {
    var files = $("#files")[0].files;
    var name = $("#name").val();
    var url = $("#url").val();
    var formData = new FormData();
    formData.append("name", name);
    formData.append("url", url);
    $.each($('#files')[0].files, function (i, file) {
        formData.append('file-' + i, file);
    });
    $.ajax({
        url: '/newData',
        type: 'POST',
        data: formData, // The form with the file inputs.
        processData: false, // Using FormData, no need to process data.
        contentType: false
    }).done(function () {
        console.log("Success: Files sent!");
    }).fail(function () {
        console.log("An error occurred, the files couldn't be sent!");
    });
});

Then the post is caught by my node server but the req.boy is empty

app.post('/newData',function(req,res){
    console.log("req body ",req.body)
    console.log("req body ",req.body.data)
})

resulting the following:

req body  {}
req body  undefined

any ideas what went wrong?

My implementation is based on the following: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects How can I upload files asynchronously?

@ davidkonrad , that doesn't seem to be the problem. I think the data go to the req.body without specifying it. — cs04iz1, Aug 13 '15 at 14:09
If you are using [`body-parser`](https://www.npmjs.com/package/body-parser): that module doesn't handle `multipart/form-data`, which you are using. You need something like [`multer`](https://www.npmjs.com/package/multer). — robertklep, Aug 13 '15 at 14:41

score 1 · Answer 1 · answered Aug 13 '15 at 15:02

1

There are easier ways to get this done, you are trying manually, instead I would suggest to use a module to process the form and the file upload without too much effort, I can recommend Formidable

answered Aug 13 '15 at 15:02

edsadr

1,087
6
17

score 0 · Accepted Answer · answered Aug 14 '15 at 11:27

As robertklep mentioned, the problem was that the body-parser can not parse multipart data. So a different parsed should be used. I used busboy-connect doing the following:

        var fstream;
        var result = [];
        var number_of_files = 1;
        req.pipe(req.busboy);
        req.busboy.on('field', function(fieldname, val) {
            field_obj = {}
            field_obj[fieldname] = val;
            result.push(field_obj);
            console.log(field_obj)
        });
        req.busboy.on('file', function(fieldname, file, filename) {
            console.log("Uploading: " + filename);
            //Path where image will be uploaded
            if (result.length > 0) {
                var file_type = filename.substr(filename.length - 4);
                filename = result[0].name + '_' + number_of_files + file_type;
                number_of_files++;
            }
            fstream = fs.createWriteStream(__dirname + "/" + filename);
            file.pipe(fstream);
            fstream.on('close', function() {
                console.log("Upload Finished of " + filename);
                result.push(filename);
            });
        });

Another parser could be used as well.

score -1 · Answer 3 · answered Oct 21 '16 at 07:27

-1

use bodyparser e.g

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended : true

}));

and instead of

req.body

use

req.body.name or
req.body.url

answered Oct 21 '16 at 07:27

Sunita

9
2
8

Body parser does not work here. I recommend using multer, which is managed by the same people who manage body-parser, and it can handle multipart/formdata. – AksLolCoding Sep 18 '21 at 15:57

jquery AJAX post formdata to node, results in empty req.body

3 Answers3