Flask File Uploading - Create a Form in Python Flask to Upload Files

Welcome to this tutorial! Here we will learn how to upload files in Flask using HTML forms. Alrighty, my fellow coders, let’s get started!

How to Upload Files using Python Flask?

File uploading in Flask is an effortless task. The flow-schema is as follows:

HTML Form to show the File upload interface
Saving the uploaded file using a Flask View

And that’s it. This is all we need here.

1. HTML forms for File Uploads

To handle file uploads, we need to add enctype = “multipart/form-data” in the form attribute of the HTML template.

A sample HTML form looks like:

<html>
   <body>
      <form action = "http://localhost:5000/endpoint" method = "POST" enctype = "multipart/form-data">
         <input type = "file" name = "file" />
         <input type = "submit" value = "Submit" />
      </form>
   </body>
</html>

2. Saving the file

In Flask, the uploaded file is first saved in a temporary location on the server before permanently saving at the destination location.

We can specify the destination location and max_size of the file, in the configuration settings of Flask:

Syntax	Description
app.config[‘UPLOAD_FOLDER‘]	Specify the destination folder
app.config[‘MAX_CONTENT-PATH‘]	Specifies the maximum sixe of the file in bytes

We can save the destination file’s name either by hard-coding it directly or using the filename function.

f = request.files['file']
f.save(f.filename)

It is always recommended to use the secure version of the uploaded file using the secure_filename function.

f = request.files['file']
f.save(secure_filename(f.filename))

Coding the Flask File Upload form

With the theory covered, let’s get right into the topic and understand the exact steps that code that we’ll need to perform the task for uploading files using Flask.

1. Form Template

Create a simple HTML form “form.html” file with the following code:

<html>
   <body>
      <form action = "http://localhost:5000/upload" method = "POST" enctype = "multipart/form-data">
         <input type = "file" name = "File" />
         <input type = "submit" value = "Submit" />
      </form>
   </body>
</html>

This simple form just takes up Files submitted by the users. Do check out our Flask Forms article for more information about Flask Forms

2. Coding the Flask View function

Now add the following code in your Flask application

from flask import Flask,render_template,request
from werkzeug import secure_filename

@app.route('/form')
def form():
    return render_template('form.html')

@app.route('/upload', methods = ['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        f.save(secure_filename(f.filename))
        return "File saved successfully"

app.run(host='localhost', port=5000)

Here,

Form View displays the Form.
After the form is submitted, the form data (Uploaded File) is sent to the Upload View (as a part of the request object) via the POST method.
The Upload View then stores the file temporarily in the variable f before permanently saving it with the f.save() attribute.

Do check out our Flask Forms article to know more about forms in Flask.