FastAPI - File Uploads from HTML Forms / Dropzone.js integration

In this video, we'll learn how to upload files to FastAPI. We'll cover:
1. The FastAPI UploadFile type
2. How to handle submission of a single file from an HTML form
3. How to handle submission of multiple files from HTML form
4. How to handle AJAX requests containing files, via the Dropzone.js JavaScript library.
We'll also learn how to add CORSMiddleware to FastAPI, and allow cross-origin requests when uploading files.
▶️ Full Playlist:
• FastAPI
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:44 Handling Requests with Files in FastAPI - UploadFile object
04:20 Creating HTML file with file input
08:46 Reading and Saving File Content to the Server Filesystem
10:58 Optional file uploads with Union Type
11:25 Accepting multiple files on FastAPI endpoint
14:23 Integrating FastAPI with Dropzone.js for AJAX uploads
19:03 Adding CORSMiddleware to allow cross-origin requests to FastAPI
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/po...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
FastAPI Request Files: fastapi.tiango...
FastAPI and CORS: fastapi.tiango...
Dropzone.js: docs.dropzone....
Dropzone setup: docs.dropzone....
#fastapi #python #webdevelopment

[@wanomir3133]

Huge thanks! This is exactly what I needed to learn to get started with my project

[@bugbytes3923]

Awesome to hear! Thanks for commenting!

[@chericha]

This channel is inspiring, indeed, because of it now I'm trying to return a template from a post request with dropzone but without any luck. There's no much information about this fastapi integrations. Thank You!

[@bugbytes3923]

That's great to hear, thank you for the comment and for watching!

[@jjustcro]

This is great! The only thing I don’t understand about fastapi is how to sustain the files you upload to the backend so the user on the front end can use the website at any time. Can you explain or send me a link that will? Thanks!

[@repotranstech9614]

Cool video as always.

[@bugbytes3923]

Thanks a lot for watching!

[@amarnathreddysurapureddy9111]

Hi, I am Running python fastapi in AWS. If I upload images using html with fastapi endpoint is it works?

[@mativarrone]

Amazing🎉 can we have a similar video for downloading files from the backend?

[@bugbytes3923]

Thanks! Sure, will add one of these soon.

[@mativarrone]

@@bugbytes3923 Thanks!

[@dmitrymikhailovnicepianomu8688]

Thank you

[@bugbytes3923]

You’re welcome!