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:
https://ko-fi.com/bugbytes

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://bugbytes.io/posts/
👾 Github: https://github.com/bugbytes-io/
🐦 Twitter:   / bugbytesio  

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
FastAPI Request Files: https://fastapi.tiangolo.com/tutorial...
FastAPI and CORS: https://fastapi.tiangolo.com/tutorial...
Dropzone.js: https://docs.dropzone.dev/
Dropzone setup: https://docs.dropzone.dev/getting-sta...

#fastapi #python #webdevelopment