Uploading files using Flask

Let’s create a simple flask application that allows you to upload a text file to a specific folder and display its contents.

Flask is a micro web framework written in Python. It is easy to learn and very flexible. Flask is ideal for small scale applications.

Step 1: First, let us create app.py and type the boiler code for flask

In order to run the file, open your terminal in the current working directory and type python <filename> . In our case, the filename is app.py

$ python app.py

Then open your browser and go to localhost:5000 and you will be able to see Hello displayed there.

Step 2: Now let us create a simple HTML page for our upload file.

Create two new folders called templates and static in your working directory and inside templates create a new HTML file called index.html

In the above form, we add a new attribute called enctype = “multipart/form-data” and set the input type as file to allow us to submit a file through our form.

Step 3 : Creating routes in our app.py file.

In our root route ‘/’ , instead of returning Hello, let us render our HTML page. We will also create a new route called /display to display our file that we just uploaded.

Let us now understand the code line by line.

from flask import Flask, render_template, request

In the above lines, we are importing

• Flask which is used for running our application
• render_template which is used to render HTML pages
• request to access the data submitted in the frontend.

from werkzeug.utils import secure_filename

We are now importing a function called as secure_filename which secures our filename before storing it in our system.

app = Flask(__name__)

Here, we are creating an app variable and setting it to an instance of the Flask class

app.config["UPLOAD_FOLDER"] = "static/"

Using the above line, we are configuring the variable UPLOAD_FOLDER to the path where we wanna store our files. In our case, we are going to store our variable inside static folder which we created earlier on.

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

These lines uses the render_template module that we imported to render our index.html page every time we go to localhost:5000

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

Here, we are accessing the data (file) which was submitted in the frontend using the request module. Then we are getting the name of the file and storing it in filename. As already discussed, the secure_filename secures our filename before storing it.

f.save(app.config['UPLOAD_FOLDER'] + filename)
# same as
# f.save(static/our_file_name.txt)

Then we use the save() function to save the file in the directory that we specified.

file = open(app.config['UPLOAD_FOLDER'] + filename,"r")        content = file.read()               
return render_template('content.html', content=content)

In order to display the contents of the file, we first open the uploaded file using the open() function. We are opening the file in read-only mode by specifying “r”.

We are then reading and storing the contents of the file using the read() function

Finally, we are rendering another HTML page and passing in the contents of the file so that it can be displayed on our browser.

Now that we have fully understood the code, let us now run our application and test it out.

Open up your terminal in pwd and type python app.py . Then go to our browser and open localhost:5000

You should see this on your screen. Now choose any text file and click on Submit and the file will get saved inside the static folder. You will also be able to see the contents of the file which you just uploaded displayed on your screen.

GitHub Link — https://github.com/Hilda24/Flask-file-upload

Congratulations, you have successfully learned to upload a file using Flask. Hope you found this useful.

Keep Exploring!!!