Question

I am trying to use HTML5 <input type="file"/> to upload a file to a server running Flask.

There is a decent article explaining how to do this. However, it suggests getting the data that’s been sent to the server using:

PHP: $_SERVER['HTTP_X_FILE_NAME']
Rails: request.env['HTTP_X_FILE_NAME']
Django: request.META['HTTP_X_FILE_NAME']

Unfortunately I do not know an equivalent for the above in Flask. Based on my reading I tried:

1. request.data
2. request.stream.read()
3. request.input_stream.read()
4. request.input_stream.read(
   request.headers.get(‘content-type’, type=int) or 0)

Unfortunately none seemed to work as expected.

I am using Chrome to upload the file with:

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

And in Chrome, after I initiate a transfer, under Headers of the Network transfer of this given POST in the Developer Tools the Content-Length is set to exactly the size of the file being uploaded – which suggests that the file is actually being sent.

I would like to know how to access the file being sent in Flask, or alternatively how one might prefer to send HTML5 files to a server.

Answer 1

Have you seen the update to the article you reference? You can use FormData now and avoid having to deal with AJAX uploads differently than browser ones:

Quoting from the article:

var form = document.getElementById('form-id');
var formData = new FormData(form);

This new FormData instance is all you need to pass on the send() call:

var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', '/upload/path', true);
xhr.send(formData);

This will send an Ajax request with all the fields of the form on it, not only file inputs. If there were also text areas, text fields, checkboxes or what have you, they’ll be sent too. Any events that you may be listening to will be called, such as onprogress or onreadystatechange.