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:
|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)
- 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.
3. Implementation of the Code
Run the server and lets check it out
Choose a file and then hit submit
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.
Voila! Your file has been uploaded successfully.
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 🙂