let’s start our tutorial, Uploading files is a common feature in many web applications, whether it’s for profile pictures, documents, or reports. Flask makes it easy to accept files from users and save them to your server. This guide will walk you through the steps to set up file upload functionality in a Flask application. First, we’ll create a simple form that allows users to select and upload files. Then, on the server side, we’ll handle the file using Flask’s built-in “request.files” object. This will allow us to access the uploaded file and save it to a designated folder.
File uploads in Flask
Handling file uploads in Flask involves setting up a form for the user to select their file, ensuring that the file is valid and safe to process, and saving it to a secure location on the server. It’s a common feature in web applications, and knowing how to implement it properly will give you an important skill for building dynamic, interactive web apps.
Once a user selects a file and submits it, Flask receives it in the backend. We can then save the file to a folder. But before saving, it’s a good idea to:
-
Check if the user even selected a file.
-
Make sure the file has an allowed extension (like .jpg, .png, or.pdf).
-
Use a clean filename so nothing breaks.
We’ll also make a folder to store these uploaded files and show messages if something goes wrong.
now let’s see code of Flask file upload :
Flask File upload :
from flask import Flask, render_template, request, redirect, flash
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.secret_key = 'secret'
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'pdf'}
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/')
def index():
return render_template('upload.html')
@app.route('/upload', methods=['POST'])
def upload():
if 'file' not in request.files:
flash('No file part in the form')
return redirect('/')
file = request.files['file']
if file.filename == '':
flash('No file selected')
return redirect('/')
if allowed_file(file.filename):
filename = secure_filename(file.filename)
path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(path)
flash('File uploaded successfully!')
else:
flash('File type not allowed')
return redirect('/')
if __name__ == '__main__':
if not os.path.exists(UPLOAD_FOLDER):
os.mkdir(UPLOAD_FOLDER)
app.run(debug=True)
HTML upload :
<!DOCTYPE html>
<html>
<head>
<title>Upload a File</title>
</head>
<body>
<h2>Select a file to upload</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for msg in messages %}
<li>{{ msg }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<form method="POST" action="/upload" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Upload</button>
</form>
</body>
</html>
Example output cases :
Example 1 – Uploading a valid file:
- Upload “resume.pdf”
-
Message shown: "File uploaded successfully!"
Example 2 – Uploading an invalid file type:
- Upload “virus.exe”
-
Message shown: "File type not allowed"
Example 3 – Submitting without selecting a file:
- Press upload with no file
-
Message shown: "No file selected"