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:
https://www.youtube.com/playlist?list=PL-2EBeDYMIbSppj2GYHnvpZ9W69qmkInS

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

?????? ?????:
? Blog: https://bugbytes.io/posts/
? Github: https://github.com/bugbytes-io/
? Twitter: https://twitter.com/bugbytesio

? ??????? ??????? ??? ???????????:
React useState hook: https://react.dev/reference/react/useState
create-react-app: https://create-react-app.dev/docs/getting-started/
FastAPI Request Files: https://fastapi.tiangolo.com/tutorial/request-files/
FastAPI and CORS: https://fastapi.tiangolo.com/tutorial/cors/
FormData: https://fastapi.tiangolo.com/tutorial/request-files/#what-is-form-data
FormData (JavaScript.info): https://javascript.info/formdata

#fastapi #python #webdevelopment #react