React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare

How to do image & file uploads the easy way. All-in-one solution: UI-widget, CDN-delivery, image optimizations (webp / AVIF, resizing and cropping, retina), validation, webhooks, signed uploads, and more. Check out Uploadcare here: bit.ly/3SqqUkW
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication here: bit.ly/3QOe1Bh
👉 NEW React & Next.js course: bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: bytegrad.com/courses/professional-css
👉 Discord: all my courses have a private Discord
🔔 Email newsletter (I highly recommend you sign up to stay updated): email.bytegrad.com
⏱️ Timestamps:
0:00 Problems with image uploads
0:53 Image gallery overview
1:17 Add uploader widget
3:37 CDN + WebP / AVIF format
4:57 Customize uploader widget
6:10 TypeScript support
7:21 Display image after upload (upload-finish)
12:08 Display image after done (done-flow)
13:48 Reset uploader widget UI
14:59 Transformations (format)
15:42 Transformations (quality)
16:25 Transformations (preview)
17:11 Transformations (resize)
17:18 Transformations (scale_crop)
17:50 Responsive images
18:36 srcSet
19:22 Next.js Image (+ custom loader from Uploadcare)
20:30 Webhooks (database)
22:08 Signed uploads
#webdevelopment #programming #coding

Пікірлер: 27

  • @ByteGrad
    @ByteGrad3 ай бұрын

    Hi everyone, Uploadcare is a great all-in-one solution for image / file uploads. Check them out here: bit.ly/3SqqUkW

  • @clipartinc
    @clipartinc3 ай бұрын

    Would be great to see this without using a third party service. Thanks for your videos!!

  • @alaeddinemenai5380
    @alaeddinemenai53803 ай бұрын

    Thank you Byte Guard for your videos. You are the top KZreadr who covers the Next’s ecosystem. I checked your videos but I didn’t find if you talked about PDF generation/download in NextJS. This is rare topic I guess.

  • @maskman4821
    @maskman48213 ай бұрын

    Thank you for introducing this amazing fileupload service to us ❤

  • @vadlamudivamsi2923
    @vadlamudivamsi29233 ай бұрын

    Excellent is very easy when using Uploadcare.

  • @adilhasan9943
    @adilhasan99433 ай бұрын

    it was really amazing 🎉

  • @sanjoyrakshit842
    @sanjoyrakshit8423 ай бұрын

    I currently use cloudinary in my project can you tell me which one is good between this or cloudinary

  • @jakubsiekiera8098
    @jakubsiekiera809819 күн бұрын

    Is it possible to somehow fix the flickering of this component? I know it's client side and we could maybe provide a parallel route with loading.jsx with a fake upload button which would serve as a static component on the page load, but this sounds like not an elegant fix.

  • @janphillipdacallos4214
    @janphillipdacallos421416 күн бұрын

    hello I am having a hard time at 8:31. I mine is not showing the data in console right after the upload of photo

  • @alexdin1565
    @alexdin15653 ай бұрын

    please can you make a video about search on sever actions

  • @sergeishmelev8000
    @sergeishmelev80002 ай бұрын

    How to implement file storage without third-party services?

  • @404-not-found-service
    @404-not-found-serviceАй бұрын

    Thanks

  • @Josedld7
    @Josedld725 күн бұрын

    Does Uploadcare work for PDF files?

  • @aafawfawfawf6272
    @aafawfawfawf62723 ай бұрын

    Looks like a great service but I can't help but think that a custom solution with Cloudinary as CDN would be a more feasible given their pricing ($80 per month)

  • @radharaji4153
    @radharaji41533 ай бұрын

    Hi @bytegrad is there a way to send the state data from client react component to server side page/component in next js application. Kindly let me know what are the ways we have to get updated state

  • @ByteGrad

    @ByteGrad

    3 ай бұрын

    There are many options: server actions, route handers, put it in the URL as query params and then use the searchParams prop in the page component

  • @radharaji4153

    @radharaji4153

    3 ай бұрын

    @@ByteGrad okay thank you

  • @radharaji4153

    @radharaji4153

    3 ай бұрын

    @@ByteGrad hi actually I have multiple pages with AppRouter next js application. How to preserve all the state data when we navigate from one page to another via router

  • @0x-003
    @0x-0033 ай бұрын

    can you make more beginner guides for next.js please.

  • @exerge9202
    @exerge92023 ай бұрын

    Hello, can you please do a video on next auth v5. Not just google login, maybe google + passwordless and then how to store data related to user such as credits for example or profile picture etc. Thanks so much for your videos

  • @user-wr7ou8ih5s
    @user-wr7ou8ih5s3 ай бұрын

    Why use external solutions ? Is there an issue with the project forlder or db ?

  • @jotaroisdarius1918

    @jotaroisdarius1918

    3 ай бұрын

    You don't wanna store images inside your db, it's slow

  • @fync7514
    @fync75143 ай бұрын

    dear mr grad, tolong buatkan video tutorial drag and drop dnd dong dengan next js 😁😁🙏🙏

  • @leojan7390
    @leojan73903 ай бұрын

    Really impressive library! However I think I won't use it with the free plan, as it's quite limiting from what I read, but if I had some money to invest I would get a paid plan without hesitating, it's a great service! And for small personal projects, the free plan is definitely more than enough

  • @yashgupta-rs9ro
    @yashgupta-rs9ro3 ай бұрын

    It would be helpful, if you provide the boilerplate code as well.

  • @ByteGrad

    @ByteGrad

    3 ай бұрын

    Yep, will add the code soon

  • @alvaroaquije2572
    @alvaroaquije25723 ай бұрын

    I think I still prefer uploadthing