Flask File Upload- Using request object

File uploading is an important task in a web application. An online admission portal requires students to upload their photograph and academic documents. A person applying for a job may need to upload his references documents. A clinical test laboratory may want its patients to check their test reports through online portal after logging in. In all these and many other similar situations file uploading is the core task. Flask File upload helps you in adding this functionality to your web application.

Among the HTML form data inputted by a user, an uploaded file is a single entity that can be a document, image, video file or any other format existing as a unit to be opened with application software. After uploading it occupies space in a specific folder of the web application.

To perform a Flask file upload, you need to define/set the following things in your web application

Enctype

This has to be added in the HTML form presented to the user. This attribute is to be set as “multipart/ form-data” in the HTML form where the upload facility is provided to the user. This attribute is defined in the FORM tag of the HTML file where you define the method and action for the form for HTTP request.

Example

 <form action="{{ url_for('biodata') }}" method="post" enctype = "multipart/form-data"> 

files attribute of request object

This has to be added in the appropriate route of the requested script set in the ACTION attribute of FORM tag. Request object accepts the requests raised by the user in an HTML form. The files attribute is passed the name of the HTML file upload element create in the HTML from. With request.files(name of the file upload element) you  get a file object handler. If nothing is uploaded it the handler stores NULL.

Example  

 fh= request.files(‘biodata’)

save method on the files object handler

This also has to be added in the appropriate route in the requested script. This method uploads the file. For securely uploading the file uploaded by user and avoiding any type of forgery by attackers use the secure_filename() function. This function is provided by Werkzeug  to check the authentication  of the file being uploaded.

File_handler.save(secure_filename(file_handler.filename)

Example  

fh.save(secure_filename(fh.filename))

fh.filename- fetches the file name of the uploaded file from file handler object

In case you wish to save file in a target folder you have to specify it. For this set a configuration parameter in the application file (here it is application.py). It can be defined as

 app.config ["TARGET_FOLDER"] = “foldername” 

Foldername is the name of the target folder already created in your web application folder.

Now use the os.path.join function to join the name of the file with the target location and pass it to the save method of the file handler

#Configure session to use filesystem
app.config["TARGET_FOLDER"] = "images"
fh.save(os.path.join(app.config["TARGET_FOLDER "], secure_filename(f.filename)))

Flask File Upload example

index.html

<form action="{{ url_for('biodata') }}" method="post" enctype = "multipart/form-data">
Upload your picture:<input type = "file" name = "file" style="margin:10px"/><br>

<button class="btn btn-primary">Save Biodata</button>
</form>

application.py

import os
from flask import Flask, session, render_template, request,make_response,redirect,flash
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.secret_key = '12345678'


# Configure session to use filesystem
app.config["TARGET_FOLDER"] = "images"


@app.route("/")
def index():
    return render_template("index.html")
    
@app.route("/biodata", methods=["POST"])
def biodata():
    f = request.files['file']
    f.save(os.path.join(app.config["TARGET_FOLDER"], secure_filename(f.filename)))
    return "Image uploaded successfully!!"  

admin