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

Рет қаралды 10,739

BugBytes

Күн бұрын

Пікірлер: 36

@wanomir3133 7 ай бұрын

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

@bugbytes3923 7 ай бұрын

Thanks a lot!

@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!

@bugbytes3923 Жыл бұрын

Haha I'm always hoping the dialect (Glaswegian) is easily understood for most viewers 😄Thank you for the nice words!

@josephgeorge586 9 ай бұрын

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

@bugbytes3923 9 ай бұрын

Thanks a lot for the kind words, really glad it helped!

@timelschner8451 Жыл бұрын

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

@bugbytes3923 Жыл бұрын

Thank you Tim! You're correct of course - it'd be much better to display that feedback rather than just outputting to the console. Should've added that!

@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.

@bugbytes3923 Жыл бұрын

Thanks a lot Zack! Interesting suggestion, I'll look into it!

@abbaskareem5281 Жыл бұрын

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!

@bugbytes3923 Жыл бұрын

Thanks for this - appreciate it! FastAPI doesn't really have a built-in ORM like Django. However there's some tools that can be used - SQLAlchemy, SQLModel, TortoiseORM, etc. I will try and do some videos on these soon. I actually have a Django ORM series that I'll start releasing in the next few weeks, so after this, I'll try and incorporate some comparisons to these FastAPI database options.

@saimon1763 3 ай бұрын

thanks, great stuff

@bugbytes3923 3 ай бұрын

Thanks a lot for watching!

@dota2gammingfun93 7 ай бұрын

Can you please share full source ?

@Alzter0 10 ай бұрын

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?

@Krishna_Bansal 4 ай бұрын

did you get any solution for this priblem

@yashgajewar9019 4 ай бұрын

yes I am also getting same error

@Krishna_Bansal 4 ай бұрын

@@yashgajewar9019 make sure you used File instead of Files

@rohanphulari356 7 ай бұрын

where is the source code broo

@skyhappy Жыл бұрын

Do you like Flask more or fastapi?

@bugbytes3923 Жыл бұрын

Good question. I've used Flask a lot in the past and it's an excellent tool. These days, though, I prefer FastAPI. I just love the Pydantic models that underpin FastAPI. It's also async-ready, unlike Flask. Both great frameworks though - nothing wrong with Flask at all!

Жыл бұрын

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

@OneBigPig 4 ай бұрын

Thank u for all the fastapi videos!!!

@bugbytes3923 4 ай бұрын

Thanks a lot!

@Septumsempra8818 Жыл бұрын

Are we gonna get a react django/fastAPI series?

@bugbytes3923 Жыл бұрын

I would like to do it if there's enough interest -- would it be something you'd like to see?

@Septumsempra8818 Жыл бұрын

@BugBytes I'd definitely be interested. I built a business using your Htmx-django series, but it's gotten to the point where the UI needs something more like react. With your style of teaching, it wouldn't feel as daunting a mission.

@bugbytes3923 Жыл бұрын

@@Septumsempra8818 I'll consider this, thanks for that. I have something on Django + Svelte in the works, but no doubt React is the big player among those SPA tools.

@thekgul Жыл бұрын

@@bugbytes3923 yes, pls

@chenjus 6 ай бұрын

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?

@_yurisales 4 ай бұрын

paste here your FileForm.js

@TheSohail02 3 ай бұрын

initially i also face same error, but resolve by making same variable name for files in react and fast api, the variable name "file" should be same.. -------------in FASTAPI---------- @app.post("/uploadfile/",status_code=201) async def upload(file: list[UploadFile]): print("files", file) for fi in file: data = await fi.read() save_to = UPLOAD_DIR/fi.filename with open(save_to,'wb') as f: f.write(data) return {"filenames": f"Successfully uploaded {[fi.filename for fi in file]}"} -------------in react-------------- const formData = new FormData() files.forEach(file=>{ formData.append('file', file) })

@franke3562 Жыл бұрын

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.

@bugbytes3923 Жыл бұрын

I do agree with most of the points you've made. React has a place for apps involving a lot of stateful interactions, but I would say it's overkill for most projects. As you know, the HTMX/Alpine approach is my personal preference, but the reality is that React is still dominant in the market. Maybe that'll change soon...?