How To Send Form Data With Files Using Python’s Flask and Dropzone.js

Pass multiple files with a web application

Photo by Scott Graham on Unsplash.

Dropzone.js is an incredibly cool JavaScript library that lets you upload files immediately by dragging a file to a zone and dropping it. Then Dropzone does the rest, sending your file off to be saved wherever you specify. You can drop multiple files or a single file. Flask is a WSGI web application framework that makes building web applications easy. There is a fantastic tutorial if you want to use basic Dropzone called “Handling File Uploads With Flask.”

However, what if you want to add your Dropzone to an existing form and receive both files and form data with your Flask backend? This is a question I saw asked more than a few times online, so here’s a simple way to use Flask with Dropzone to send multiple files and form data with the click of a “Submit” button.

Why Would You Want To Send Files and Form Data Together?

There are a few reasons you might want to send files and form data together:

• If you want to send the files you’re collecting to an API, you might need to collect an API key, token, or something similar in order to complete an upload.
• If you want to associate the files with a person or data about the file, you might want to collect form data to do that.
• If you want to allow people to alter information about their file while sending. For example, maybe you want to offer them the chance to change the name of a file as they send it.

Prerequisites

You’ll need to have a few things to get started:

• Python installed.
• Virtual environment for your project (optional but recommended).
• Flask installed.
• Requests installed.
• See the project on GitHub.

Note: This project is based on Miguel Grinberg’s Flask and Dropzone tutorial.

What’s in the HTML File?

For the sake of simplicity, I’ve created a simple form. Let’s go through the different parts of the HTML.