Скачать или смотреть 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:
   • FastAPI  

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
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:   / bugbytesio  

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
React useState hook: https://react.dev/reference/react/use...
create-react-app: https://create-react-app.dev/docs/get...
FastAPI Request Files: https://fastapi.tiangolo.com/tutorial...
FastAPI and CORS: https://fastapi.tiangolo.com/tutorial...
FormData: https://fastapi.tiangolo.com/tutorial...
FormData (JavaScript.info): https://javascript.info/formdata

#fastapi #python #webdevelopment #react