Uploading Files and Images in Flask

Tutorial 1 of 5

1. Introduction

In this tutorial, our goal is to guide you on how to build a simple Flask application that allows users to upload files and images. Flask is a web framework for Python, which is a great tool for web development.

You will learn:
- How to create a Flask application
- How to handle file uploading in Flask
- How to display uploaded images in Flask

Prerequisites: Basic knowledge of Python and HTML

2. Step-by-Step Guide

The first step is to install Flask using pip:

pip install flask

File Uploading in Flask

Flask makes it easy to upload files via the request.files object. The file will be stored in a temporary location on the server, and then you can save it to a directory of your choice.

Displaying Uploaded Images in Flask

After the image is uploaded, you can display it using the url_for() function, which generates a URL for a given route.

3. Code Examples

Let's create a Flask application that accepts file uploads.

from flask import Flask, render_template, request
from werkzeug.utils import secure_filename

app = Flask(__name__)

@app.route('/upload', methods = ['GET', 'POST'])
def upload_file():
   if request.method == 'POST':
      f = request.files['file']
      # secure the file name and save it
      f.save(secure_filename(f.filename)) 
      return 'file uploaded successfully'

if __name__ == '__main__':
   app.run(debug = True)

In this code:
- We import the necessary modules from flask and werkzeug.
- We create a route '/upload' that accepts POST requests.
- If the request method is POST, we get the file from the request.
- We secure the filename with secure_filename() and save it.
- If the file is uploaded successfully, we return a success message.

To upload a file, you can use a simple HTML form. Here's an example:

<html>
   <body>
      <form action = "http://localhost:5000/upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type = "file" name = "file" />
         <input type = "submit"/>
      </form>   
   </body>
</html>

4. Summary

In this tutorial, we covered how to create a simple Flask application that handles file uploads. We learned how to use the request.files object to access uploaded files, and how to use the secure_filename() function to secure file names.

For further learning, you could explore how to limit the file types and sizes that can be uploaded, or how to handle multiple file uploads.

5. Practice Exercises

Modify the Flask application to accept and display uploaded images.
Add validation to only accept files of a certain type (e.g., .jpg and .png files).
Allow the user to upload multiple files at once.

Here's a solution for exercise 1:

from flask import Flask, render_template, request, url_for
from werkzeug.utils import secure_filename

app = Flask(__name__)

@app.route('/upload', methods = ['GET', 'POST'])
def upload_file():
   if request.method == 'POST':
      f = request.files['file']
      filename = secure_filename(f.filename)
      f.save(filename)
      return '<img src='+ url_for('static', filename=filename) +'>'

if __name__ == '__main__':
   app.run(debug = True)

In this code, after saving the file, we return an HTML string that contains an <img> tag. The src attribute of the <img> tag is the URL of the uploaded image, which we generate with the url_for() function. We pass 'static' as the endpoint and the filename as a keyword argument. This assumes that you're saving the uploaded images in the 'static' directory of your Flask application.