React.js + FastAPI - File Uploads from React Application to FastAPI endpoint

In this video, we'll learn how to upload files from a React component, to a FastAPI backend endpoint.

We will cover how to store files in React state with the useState hook, and how to create event handler functions within the component when events occur in the DOM.

We'll learn how to build FormData objects and send fetch requests from React to FastAPI in order to upload the file.

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
02:37 Creating React component
06:43 Storing state in React component with useState hook
07:48 Adding onChange event handler to file input element
11:06 Adding onSubmit event handler to the form element
14:12 Submitting form to the FastAPI server with fetch request
17:55 Submitting multiple files from React to FastAPI

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#fastapi #python #webdevelopment #react

[wanomir]

Again, awesome! No water, no fancy techniques, just what I needed to know to get started!

[EZrebel]

Great instructional style. Fast, Clear and Easy to Follow. “Just the right level of information” for even a beginner! Not to mention your fantastic dialect!

[josephgeorge]

Absolutely amazing tutorial! It was super informative and you've a great job of explaining each step. Thank you so much for your help 😀

[timelschner]

thanks alot for the tutorial. For good measures it would be nice to display a message on the frontend on fail or success.

[zackmcnelly]

A future video I would love to see would be: How to track page views per session, possibly with HTMX. Thank you! Truly excelent instructions as usual.

[abbaskareem]

Hi there! I hope you're doing well. I really like your recent videos on fast api and found it really informative . this video in with react is very helpfull. I am using django-rest-framework for building api but I really like fast-api . the only reason that prevent me from using it is the complex relationship between models and the ORM compare to django . However, I was wondering if you could create a follow-up video specifically delving into the complexities of FastAPI ORM relationships between models.

As a viewer, I think it would be incredibly valuable to see an in-depth explanation of how FastAPI ORM handles more complex relationships and how it compares to Django ORM in those scenarios. I believe this would be particularly helpful for developers who are considering using FastAPI ORM but may be unsure about its capabilities in this regard.

Thank you for your time and consideration, and I look forward to seeing more great content from your channel!

[Alzter]

Hi BugBytes! I have a question. Would it be possible to use a function rather than a constant to upload the file to the FastAPI server? I'm trying to do it, but it's giving me an error 422 (Unprocessable Entity). Any help?

[chenjus]

I'm trying to upload multiple files and I'm getting 422 unprocessable entity. The type in my endpoint is a list[UploadFile] and I'm iterating over the list of files like in your example, and the key in FormData is the same as the FastAPI endpoint parameter. Any pointers on what else I should check?

This is the first time I see that a function's typing changes it's behavior

[Septumsempra]

Are we gonna get a react django/fastAPI series?

[franke]

It is honestly beyond me why frameworks like React and the use of SPA are still such a big thing / in demand on the job market. For 98% of use cases an SPA is an overkill, imho. It requires more and complicated code. There is duplication of code and logic on backend and frontend (in different programming languages). Also, managing of state is a pain. Django + htmx and / or alpine.js every day over this. And I hope that is where the web is moving.

[alihusham]

Youtube should ban all the youtuber who does not put the source code