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. Alright, my fellow coders, lets get started!

Way to Upload Files using Python Flask?

Uploading files using python flask is done without stress. The designed database is as follows:

  • HTML Form which will reveal the uploading interface.
  • Saving the uploaded file using the flask file.

That's all we need to understand here.

Related course: Create Web Apps with Python Flask

Template

Let's further explain:

HTML Forms for File Upload: To rectify file uploads, there is a need to input the enctype = "multipart/form-data" command on the HTML template form. Below is what the HTML form look 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>

Flask upload form

How to save files:

The saving of uploaded files take stages which rank from a momentary location on the server before it then moves to the stable saving location. You can control the ultimate stable location and the maximum size of the file. The setup settings of Flask is as follows:

Syntax Inscription:

app.config['UPLOAD_FOLDER']

There is a need to designate the destination folder

app.config['MAX_CONTENT-PATH']

There is a specification on the maximum size of the file in bytes.

We can save file name either by direct or indirect hard-coding using the filename command. 

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

It's important you use secured version of the uploaded file utilizing the secure filename command. 

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

Coding The Flask File Upload Form

Let's dive into the practical session since we have an understanding of the topic already. There is a step to step procedure to follow for a perfect file upload using Flask.

Form Template Establish a easy HTML form "form.html" file plus the subsequent codes:

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

The form is designed to save file uploaded by users. You can navigate through this site to check articles on Flask Forms and other related information.

  1. Coding the Flask View function. You can further add the subsequent codes 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 submission of the form, the form data (submitted File) is sent to the Upload View (as a part of the request object) through the POST method.

The Upload View are briefly saved files in the variable f before permanently saving it with the f.save() attribute.

You can also check out the Flask Forms article to understand the forms in Flask better.

  1. Implementation of the Code This stage is where you practice what you've learned. Launch the server and let's see what happens. Assign the file and then press submit.

Confirmed, the file is saved successfully. You can now check for your saved files besides the Flask application file. Now, your file has been uploaded successfully.

Conclusion

We've come to the end of this tutorial class. Ensure that you practice well according to the above illustration. That will help you understand this course better. Enjoy coding!

Related course: Create Web Apps with Python Flask