Empty FormData in POST Request

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!

you should also pass the filename for better backend compat... — dandavis, Apr 19 '15 at 05:58

score 0 · Answer 1 · answered Apr 19 '15 at 05:53

0

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

answered Apr 19 '15 at 05:53

guest271314

1
15
104
177

Unfortunately, that didn't work. The response body is still blank and `formData` still looks like an empty object. I might look into the Node library you linked. Right now I was going for a pure Javascript solution, but since I'm using Express with EJS, it's a possibility. – James Taylor Apr 19 '15 at 05:58
Tried utilizing `json` , `data-uri` instead of `formData` object ? – guest271314 Apr 19 '15 at 06:00
I tried just passing in the JSON, and that didn't work either: `xhr.send(JSON.stringify(files));` – James Taylor Apr 19 '15 at 06:09
@JamesTaylor See http://stackoverflow.com/questions/28207106/pdf-file-upload-ajax-html/ for single file , http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ for multiples files, including `event.dataTransfer.files[0]` . Single file example perhaps simpler to read portions where file is converted to `data URI` , `base64` string ; `json` including file name, file size, file type. Could include js approach at post above if jquery usage at links not able to be included at implementation. – guest271314 Apr 19 '15 at 06:16
Thanks for the links. I'm using JS as opposed to PHP. I'm not sure if the approach would be the same or not, but I'll explore it. – James Taylor Apr 19 '15 at 16:05
@JamesTaylor `POST` to server should be `json` data format; could utilize `JSON.parse` , `JSON.stringify` to process `POST` , serve response ? – guest271314 Apr 19 '15 at 16:28

score 0 · Accepted Answer · answered Apr 19 '15 at 17:01

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

Setting the body to be explicitly JSON will not handle real files correctly. It is possible that you can use body-parser and another middleware to handle multipart/form-data encoding, such as Multer. — Futureproof, Nov 13 '19 at 19:40

Empty FormData in POST Request

2 Answers2