Question

I have a form (which happens to be in an iframe) that looks like the following:

<form id='picture-file-input-button' action='/post-picture' method='post' enctype='multipart/form-data' encoding='multipart/form-data'>
    <button type='button' class='choose-picture-button'>Choose picture</button>
    <input class='picture-file-input' type='file' />
</form>

I submit the form using $(‘#picture-file-input-button’).submit() and this works fine. The request is sent to the correct URL and my Flask function picks it up and the response is correctly sent back to the client (the iframe gets reloaded).

I’m not doing anything fancy in Flask. It looks like this:

@app.route('/post-picture', methods=['POST'])
def post_provider_page_route():
    app.logger.debug(request)
    app.logger.debug(request.data)
    app.logger.debug(request.stream)
    app.logger.debug(request.files)
    app.logger.debug(request.form)
    return render_template('iframe_template.html')

The debugs all output empty ImmutableMultiDict’s with the exception of request.stream which ouputs:

<werkzeug.wsgi.LimitedStream object at 0x9a7d30c>

I expect to see the file show up in request.files. Why isn’t it showing up in request.files?

Answer 1

request.files doesn’t get populated unless the file input element has a name attribute set. The name attribute can be set to anything. So the fix for the above code is to change:

<input class='picture-file-input' type='file' />

to

<input class='picture-file-input' type='file' name='picture' />