POST请求中的空FormData

Question

I'm making a simple application that will upload a file a server that has been dragged and dropped onto a canvas.

Here's a small sample of what the drag and drop code looks like:

var files = event.dataTransfer.files;
var formData = new FormData();
formData.append('files', files);

Using the debug tools, I know that files is correctly defined.

Then, I make the request:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);

But my server, running Node JS, gets an empty response body:

var express = require('express');
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
    extended: false
}));
app.post('/upload', function(req, res) {
    console.log(req.body.files);
    res.end();
});

I tried debugging on both the client and server side, but I can't figure it out. Although, it seems weird to me that the formData object looks like:

FormData {append: function}
    __proto__: FormData

Why isn't the appended files object showing up?

Any insight as to what the problem is would be greatly appreciated!

Answer 1

Try changing

var files = event.dataTransfer.files;

to

var files = event.dataTransfer.files[0];

See https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects ; see also node-form-data

Answer 2

After too long of a time working on this problem, I finally figured it out. The issue was server-side; my Express application was ignoring the body of the post since I have not explicitly set the bodyParser to accept JSON.

The Express setup for a POST method should be:

var express = require('express');
var bodyParser = require("body-parser");
app.use(bodyParser.json()); // Configures bodyParser to accept JSON
app.use(bodyParser.urlencoded({
    extended: false
}));

With a sample routing method like:

app.post('/upload', function(req, res) {
    console.log(req.body.files);
    res.end();
});

It also is helpful to know that this server side setup can be tested by running something like this:

curl -d '{"file":{"name":"sample"}}' -H "Content-Type: application/json" http://localhost:8080/upload