File Uploads in React (Complete Tutorial)

Поделиться
HTML-код
  • Опубликовано: 14 янв 2025

Комментарии • 44

  • @rubendacostaesilva8442
    @rubendacostaesilva8442 Месяц назад +14

    This is insane! I was about to start implementing file upload in a React project, something I've never tried, and this video pops up.

  • @luznoceda423
    @luznoceda423 Месяц назад +5

    Can't believe you dropped this video just in time when I have to implement this feature. Massive thank you

  • @edward-vonschondorf-dev
    @edward-vonschondorf-dev Месяц назад

    I wasn't looking for a file upload tutorial, but I'm glad i watched this as it does a great job of explaining how to use state in an efficient and clean way. Great explanations as always!

  • @Leandro-4687
    @Leandro-4687 Месяц назад +7

    When using Axios, you don't need to set multipart/form-data Content-Type in the headers. Axios will automatically handle the Content-Type for you when you submit a formdata.

    • @thedavistheory7674
      @thedavistheory7674 Месяц назад

      Huh really? Didn't know that, neat!

    • @Atul_Thakre30
      @Atul_Thakre30 Месяц назад

      And setting it by yourself give errors some time when we have other data too

    • @topgamebest4198
      @topgamebest4198 Месяц назад

      U don't need use multipart/form-data even when u use fetch because FormData handle it

  • @rjwhite4424
    @rjwhite4424 Месяц назад

    Had no idea axios could do that. Super awesome

  • @SieanLeon
    @SieanLeon Месяц назад

    I need to watch this tutorial for image uploads. Thank you!

  • @nuriddin1436
    @nuriddin1436 Месяц назад

    Let me thank you, your videos are very useful and simple to understand! Thank you!

  • @sebastianmihaiprisacariu8975
    @sebastianmihaiprisacariu8975 Месяц назад +1

    Great video. I hoped you would also show how you would do it with server state and mutations with Tanstack Query or SWR.

  • @lacacode
    @lacacode Месяц назад

    Amazing video, thanks

  • @alexandroarauco8097
    @alexandroarauco8097 Месяц назад

    I'm following your material, Thanks so much for sharing knowledge.
    Regards.

  • @faisalamin001
    @faisalamin001 26 дней назад

    Addicted to your tutorials, otherwise I'm already working with uploads since 2020 though, hah
    but yeah it makes the concept further clear, thanks

  • @tsdineshjai8565
    @tsdineshjai8565 Месяц назад

    its really cool. Never tried before and lets do this !!

  • @davidbulnes3021
    @davidbulnes3021 Месяц назад +1

    Thank you Darius!! Next video could be DownloadFile component?

  • @incarnateTheGreat
    @incarnateTheGreat Месяц назад

    16:50 haha that's as human of a mistake that you can make. That's what I appreciate about these tutorials: you may be teaching people, but you also make mistakes (and fix them). It's all good.
    Thanks for this!

  • @haiderjaafer8164
    @haiderjaafer8164 Месяц назад

    Really great work.... So can change label of input type file choose file

  • @sumitsharma-us2sl
    @sumitsharma-us2sl Месяц назад

    very good tutorial

  • @Next-Js
    @Next-Js Месяц назад

    Excellent as always, do you plan to upload the same Nextjs material? Best regards and thanks for the good content always.

  • @pabloagreda2261
    @pabloagreda2261 Месяц назад

    21:07 For me I had to define a config variable and define there, the headers and onuploadprogress function, cause react didn't allow me to define it within the axios post call. axios.post(url,data,config)

  • @cruzlee4092
    @cruzlee4092 Месяц назад

    Awesome ♥

  • @ptolemyhenson6838
    @ptolemyhenson6838 Месяц назад +2

    Can we display the file locally as a preview before uploading?

    • @cosdensolutions
      @cosdensolutions  Месяц назад +2

      Yeah, for an image you'd have to get the base64 data and convert it to a blob and show that

    • @coder_one
      @coder_one Месяц назад +1

      yes

    • @SiddhantSuvagiya
      @SiddhantSuvagiya Месяц назад +1

      for image just use like this

  • @ruaruababa
    @ruaruababa Месяц назад

    Please implement cancel when upload, and retry upload file.

  • @SieanLeon
    @SieanLeon Месяц назад

    I have to decide whether to use Ant Design or Bootstrap for my React app. Which one is more suitable for this JS framework?

  • @Jcmacielh
    @Jcmacielh Месяц назад

    Nice!

  • @abhi_tambade
    @abhi_tambade День назад

    But where is the file uploaded?? I actually want the file to be uploaded in a specific folder in my google drive. What do I do?

  • @pragmaticcoder6910
    @pragmaticcoder6910 Месяц назад

    I am trying to purchase your course and the payment gateway page is not working.

  • @kanchanwadhwani7381
    @kanchanwadhwani7381 Месяц назад

    How to do multi file upload parallely?

  • @Akash-xv5sk
    @Akash-xv5sk Месяц назад

    I noticed lag between the progress bar reaching 100% and the upload button appearing, imagine file is greater than 10MB, how do i handle this

  • @stevebuonincontri6853
    @stevebuonincontri6853 Месяц назад

    I noticed u are using tailwind. I can't get the progress working as u did. But upload working trying. I installed tailwind but I still do not see the colors in the styles. I am in webstorm. Please advise.
    but would like to know how to use tailwind in React. I will look for one of your videos

  • @madhurchaturvedi5551
    @madhurchaturvedi5551 13 дней назад

    Please also teach us redux tool kit

  • @icoderdev
    @icoderdev Месяц назад

    Hello my friend ❤

  • @abdulmufeed6077
    @abdulmufeed6077 Месяц назад

  • @breezycodes
    @breezycodes Месяц назад +2

    First!

  • @KaluKarKK
    @KaluKarKK Месяц назад

    Your videos are good but your thumbnail are bad tbh. Do something with it. 🙏