How to Upload Images in React / Next.js (File Uploads, Filestack)

Поделиться
HTML-код
  • Опубликовано: 31 май 2024
  • Check out the sponsor Filestack and get 1GB in free bandwidth: tinyurl.com/ByteGradFilestack
    Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication: bit.ly/3QOe1Bh
    👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
    👉 Professional JavaScript Course: bytegrad.com/courses/professi...
    👉 Professional CSS Course: bytegrad.com/courses/professi...
    👉 Discord: all my courses have a private Discord where I actively participate
    🔔 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
    ⏱️ Timestamps:
    0:00 Image / File uploads
    0:57 Top 8 obstacles
    2:01 Pro solution: Filestack
    2:39 Demo intro
    3:10 Filestack upload & download
    11:07 Filestack transformations
    14:12 Webhooks
    14:47 Serverless functions
    20:53 Signed URLs
    33:58 Scalable, serverless uploads with Filestack
    #webdevelopment #programming #coding

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

  • @ByteGrad
    @ByteGrad  7 месяцев назад +1

    You can check out the sponsor Filestack and get 1GB in free bandwidth here: tinyurl.com/ByteGradFilestack

  • @klaudiuszbiegacz3519
    @klaudiuszbiegacz3519 7 месяцев назад +2

    Great content as always Wesley! Can't wait for October 30

  • @venicebeachsurfer
    @venicebeachsurfer 7 месяцев назад +1

    In regards to "external" images and having to hard code height/width. What about responsive? How would you handle dynamic values here?

  • @ozgursar5386
    @ozgursar5386 7 месяцев назад +3

    Thank you for the tutorial. It would be nice if you demonstrate how to do a similar functionality without using Filestack, but instead storing files at Supabase with a simpler UI.

  • @fnandesrafael
    @fnandesrafael 7 месяцев назад +1

    There's any way to customize the Picker UI?

  • @YalreadyKnowit
    @YalreadyKnowit 7 месяцев назад

    React documentation for filestack is LIGHT so thanks for doing this video

  • @pixyoutube538
    @pixyoutube538 8 месяцев назад +1

    Thank you 😊

  • @dhirajavasthi6539
    @dhirajavasthi6539 6 месяцев назад +1

    hey ByteGrad your content is very helpful can you please help me with the below problem using zod and next js 13 or 14
    problem : How to read content of uploaded json file on react / next.js 13 or 14 using zod

  • @zunnoorainrafi5985
    @zunnoorainrafi5985 7 месяцев назад

    filestack-react is not installing and giving errors in terminal , npm of filestack-react is last published in 2021.

  • @WilliamShrek
    @WilliamShrek 7 месяцев назад +1

    This is cool!

  • @williamcao5139
    @williamcao5139 8 месяцев назад +1

    When do you release react course ?

    • @ByteGrad
      @ByteGrad  8 месяцев назад +2

      Will be launched on October 30! :)

  • @brajagopalmukherjee1588
    @brajagopalmukherjee1588 8 месяцев назад +1

    Can we get neew react course on udemy?

    • @ByteGrad
      @ByteGrad  8 месяцев назад +1

      Sorry, it will only be available on ByteGrad.com

    • @bukkeiedwin2125
      @bukkeiedwin2125 8 месяцев назад

      @@ByteGrad Hello, I am looking to buy the CSS and Javascript course, I took a look on udemy and your website, do we also get a certificate on ByteGrad?

  • @Ash-fc3lp
    @Ash-fc3lp 5 месяцев назад

    This is a great example, but the images are not persistent and are removed on refresh - I thought the idea of FileStack is that they store the image and it is persistent in the website !!!

  • @FaizSultan430
    @FaizSultan430 8 месяцев назад +1

    when your nextjs course coming

    • @ByteGrad
      @ByteGrad  8 месяцев назад +2

      October 30. Make sure you’re on the email list ;)

  • @buddy.abc123
    @buddy.abc123 7 месяцев назад +3

    Man...Americans have so many options

  • @zlackbiro
    @zlackbiro 7 месяцев назад +2

    Why nobody talks about how to build your own backend where you are the owner of your photos, not some third party service from where you dont have a control how to backup, reuse, or something else. Why cloud everything? Why teaching programmers to be a users, not a real programmers. The world will collapse one day and none of you wont be able to create your own custom shit! Learn real programming and how stuff works. Make your own god damn CDN! Where is the spirit?