Use Flask with Dropzone.js to upload videos under 200 MiB (no client)

Hello Pythonistas! Today let's learn how to upload a video using Python's Flask and Dropzone.js. In this tutorial, we'll use Python (for a version where you use our new api.video client, please see: ) and Dropzone.js.

Flask is a WSGI web application framework. It makes getting started with building a web application quick and easy. It's based on the Werkzeug WSGI toolkit and the Jinja2 template engine. It's very popular for creating backends for webpages, and that's what I'll be using it for today.

Dropzone.js is an open source JavaScript library that lets you create drag n' drop file uploads with image previews (when available). It doesn't have dependencies on other libraries, and it does a lot of work for you so you can focus on styling and configuration. I'll use a very simple format in this tutorial, but you will be able to style it however you want.

Prerequisites

For this project you'll need:

• Python installed
• Virtual environment for your project (optional)
• Flask installed
• Project files - https://github.com/apivideo/python-examples/tree/main/videos/Flask%20with%20Dropzone
• Api.video account - if you do do have one, you can create one for free

Set up

To get started, you'll need to do these things:

1. Grab the code from Flask and Dropzone.js.

2. In my version of the project, Dropzone.js is attached using CDNs. You can also reference these using the static folder and placing dropzone.js and dropzone.css there. Just change the references in index.html if you want to do this instead.

What's in index.HTML

1. Let's start by walking through the HTML file index.html. It's in the templates folder.

2. First add the scripts and stylesheets you'll need for the project. I'm using Dropzone with bootstrap. So I've added the scripts and stylesheets for that.

3. Next let's skip ahead to the body of the HTML code and look at the way the form is set up. I place the form between the body tags, and I'm using a simple form, so it looks like this:

4. I add a form action to show where I want the information to be sent to. In this case I'm using "/" as the route. Next, I add the class dropzone. This tells Dropzone where to add the drag n' drop zone. In the form I add an ID, because I'll have to make some changes to how Dropzone is set up, and I specify that it's going to be a POST request to "/". Along with sending files, I want to send the API key, so I add a field for that, and I want everything to send when I press Submit so I add a button for that.

5. Now let's take a look at customizing the dropzone. By default, Dropzone wants to upload your file the second you drop it in the zone. I don't want that to happen, because I'll get an error. The file (or files) need to be sent with my API key in order to be posted on the api.video servers. So the first thing I'm going to do is set up to configure some Dropzone options. In order to reference my Dropzone, I use the ID written in camelcase. The zone ID I chose is my-dropzone so that becomes myDropzone. I chose to add the script directly to the HTML in the head tags, but you can reference it from a separate file if you prefer.

6. To prevent Dropzone from trying to upload files right away, I set autoProcessQueue to false. I want users to be able to upload multiple files, so I put true for uploadMultiple. parallelUploads I set to 10 max and I set the total number of files you can add at one time (maxFiles) to 10.

7. Next I set up the submit button. The code here tells Dropzone to process the files after the user hits Submit. And that's it for the script! Let's set up the backend next.

What's in app.py

Here's what's set up for the backend:

1. I start with imports for features of Flask, the os library, and the requests library.

2. Add limits to what kind of files a user can upload with the line: app.config['UPLOAD_EXTENSIONS'] = ['.mov', '.mp4', '.m4v', '.jpm', '.jp2', '.3gp', '.3g2', '.mkv', '.mpg', '.ogv', '.webm', '.wmv' ]

3. This demo only handles files up to 199 MiB so let's add an error handler route (@app.errorhandler(413)).

4. When you start up the app, I want you to see the index.html template. So that template is returned for @app.route('/').

5. To process the file and API key, they must be retrieved from request.files and request.form. request.files can contain more than one file, so I'm assigning the files to my_files.

6. Assign the API key from the form to api_key.

7. You'll recognize the set up after this from previous tutorials - it's setting up to retrieve an access token with the API key, then creating the headers with the token so everything is ready to start posting files.

8. Because my_files could have one or many files and I want to be sure to process them all, I'm using a for loop. The code here creates a video container to upload to and adds the title. It retrieves the video_id so a video can be uploaded to the container. Then it sets up the request and posts the video into the container. It will loop through every video and send it, so long as the video is under 200 MiB.

That's it! You now have a way to upload videos using Dropzone and Flask without using the Python client. In the next tutorial, we'll upload using the Python client. The client will allow us to automatically handle chunked uploads and handle videos of any size. Don't hesitate to reach us on our Community!

Resources

To build this tutorial, I used this documentation, and it might help you too:

1. Handling File Uploads with Flask - A great tutorial that shows how to set up with a basic Dropzone.
2. Dropzonejs.com - Details about how to customize Dropzone.