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
Hi everyone, Uploadcare is a great all-in-one solution for image / file uploads. Check them out here: bit.ly/3SqqUkW
Would be great to see this without using a third party service. Thanks for your videos!!
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.
Thank you for introducing this amazing fileupload service to us ❤
Excellent is very easy when using Uploadcare.
it was really amazing 🎉
I currently use cloudinary in my project can you tell me which one is good between this or cloudinary
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.
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
please can you make a video about search on sever actions
How to implement file storage without third-party services?
Thanks
Does Uploadcare work for PDF files?
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)
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
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
3 ай бұрын
@@ByteGrad okay thank you
@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
can you make more beginner guides for next.js please.
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
Why use external solutions ? Is there an issue with the project forlder or db ?
@jotaroisdarius1918
3 ай бұрын
You don't wanna store images inside your db, it's slow
dear mr grad, tolong buatkan video tutorial drag and drop dnd dong dengan next js 😁😁🙏🙏
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
It would be helpful, if you provide the boilerplate code as well.
@ByteGrad
3 ай бұрын
Yep, will add the code soon
I think I still prefer uploadthing