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

Поділитися
Вставка
  • Опубліковано 6 жов 2024

КОМЕНТАРІ • 36

  • @wanomir3133
    @wanomir3133 8 місяців тому

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

  • @EZrebel
    @EZrebel Рік тому +1

    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
      @bugbytes3923  Рік тому

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

  • @timelschner8451
    @timelschner8451 Рік тому +2

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

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

  • @abbaskareem5281
    @abbaskareem5281 Рік тому +1

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

  • @zackmcnelly
    @zackmcnelly Рік тому +1

    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
      @bugbytes3923  Рік тому

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

  • @josephgeorge586
    @josephgeorge586 10 місяців тому +1

    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
      @bugbytes3923  10 місяців тому

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

  • @dota2gammingfun93
    @dota2gammingfun93 9 місяців тому +1

    Can you please share full source ?

  • @saimon1763
    @saimon1763 5 місяців тому

    thanks, great stuff

  • @Septumsempra8818
    @Septumsempra8818 Рік тому +1

    Are we gonna get a react django/fastAPI series?

    • @bugbytes3923
      @bugbytes3923  Рік тому +2

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

    • @Septumsempra8818
      @Septumsempra8818 Рік тому +1

      @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
      @bugbytes3923  Рік тому +1

      ​@@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
      @thekgul Рік тому +1

      @@bugbytes3923 yes, pls

  • @skyhappy
    @skyhappy Рік тому +1

    Do you like Flask more or fastapi?

    • @bugbytes3923
      @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

  • @Alzter0
    @Alzter0 Рік тому +1

    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
      @Krishna_Bansal 6 місяців тому

      did you get any solution for this priblem

    • @yashgajewar9019
      @yashgajewar9019 6 місяців тому

      yes I am also getting same error

    • @Krishna_Bansal
      @Krishna_Bansal 6 місяців тому

      @@yashgajewar9019 make sure you used File instead of Files

  • @rohanphulari356
    @rohanphulari356 9 місяців тому +1

    where is the source code broo

  • @chenjus
    @chenjus 8 місяців тому

    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
      @_yurisales 6 місяців тому

      paste here your FileForm.js

    • @TheSohail02
      @TheSohail02 5 місяців тому

      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)
      })

  • @OneBigPig
    @OneBigPig 5 місяців тому

    Thank u for all the fastapi videos!!!

  • @franke3562
    @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
      @bugbytes3923  Рік тому +1

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

  • @alihusham1560
    @alihusham1560 Рік тому +3

    UA-cam should ban all the youtuber who does not put the source code