Flask Tutorials: File Upload with Flask-WTF

Welcome to our Flask tutorial on File Upload using Flask-WTF! In this lesson, we'll learn how to create a simple web application that allows users to upload files. Let's dive in!

What is Flask-WTF?

Before we start, let's understand what Flask-WTF is. It's an extension for Flask that simplifies web forms and helps in handling file uploads.

📝 Note: Flask-WTF is built on top of WTForms, a powerful form validation library for Python.

Setting Up the Project

First, make sure you have Python and Flask installed on your system. If not, follow the Flask Tutorial: Getting Started to set up your environment.

Next, create a new Flask project and install Flask-WTF using pip:

bash

$ mkdir flask-file-upload
$ cd flask-file-upload
$ pip install flask flask-wtf

Creating the Web Application

Now, let's create our web application. In the flask-file-upload folder, create a new file named app.py.

Creating a Basic Form

Open app.py and let's start by defining a basic form for our file upload:

python

from flask import Flask, render_template, request
from wtforms import Form, FileField
from wtforms.validators import InputRequired

class UploadForm(Form):
    file = FileField('Upload a file', validators=[InputRequired()])

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

💡 Pro Tip: Replace 'your-secret-key' with a secure secret key for your application.

Now, create a folder named templates and create a new HTML file upload.html inside it:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
    <h1>File Upload</h1>
    <form method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        {{ form.file.label }}<br>
        {{ form.file(size=30) }}<br>
        <button type="submit">Upload</button>
    </form>
</body>
</html>

📝 Note: The enctype="multipart/form-data" attribute is necessary for file uploads.

Handling the Form Submission

Next, we'll handle the form submission in our Flask application:

python

from flask import send_file

@app.route('/upload', methods=['POST'])
def upload():
    form = UploadForm(request.files)
    if form.validate_on_submit():
        file = form.file.data
        with open('uploads/' + file.filename, 'wb') as f:
            f.write(file.read())
        return send_file('uploads/' + file.filename, as_attachment=True)
    return render_template('upload.html', form=form)

@app.route('/')
def index():
    return render_template('upload.html', form=UploadForm())

💡 Pro Tip: Save uploaded files in a designated folder named uploads.

Running the Application

Finally, let's run the application:

bash

$ python app.py

Now, navigate to http://127.0.0.1:5000/ in your web browser to see the file upload form in action.

Quiz

Summary

In this tutorial, we learned how to create a simple web application for file uploads using Flask and Flask-WTF. We discussed the basic structure of a file upload application, including creating a form, handling form submissions, and saving uploaded files.

🎯 Next Steps:

Add validation for the file type and size
Implement multiple file uploads
Add error handling for invalid form submissions
Style the form and add user interface improvements

Happy coding! 👩‍💻👨‍💻