Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
wb_sunny

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

Flask File Uploading

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:

  1. HTML Form to show the File upload interface
  2. 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:

SyntaxDescription
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,

  1. Form View displays the Form.
  2. 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.
  3. 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.

3. Implementation of the Code

Run the server and lets check it out

Upload Form
Upload Form

Choose a file and then hit submit

Upload
Upload

That’s it the file is saved successfully. Now in your folder, you will be able to see the uploaded file beside your Flask application file.

Destination
Destination

Voila! Your file has been uploaded successfully.

Conclusion

That’s it for this tutorial, guys! Do try the examples given above yourself for better understanding. 

See you in the next article! Till then, Happy coding 🙂