React / Next.js Image Uploads (EASY!) - CDN, WebP / AVIF, Signed Uploads, Webhooks, Uploadcare
Vložit
- čas přidán 15. 06. 2024
- Check out Uploadcare here: bit.ly/3SqqUkW (paid sponsorship)
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
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/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 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
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 CZcamsr 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 ❤
I currently use cloudinary in my project can you tell me which one is good between this or cloudinary
Excellent is very easy when using Uploadcare.
it was really amazing 🎉
please can you make a video about search on sever actions
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
Does Uploadcare work for PDF files?
How to implement file storage without third-party services?
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
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
@@ByteGrad okay thank you
@@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.
Why use external solutions ?
Is there an issue with the project forlder or db ?
You don't wanna store images inside your db, it's slow
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)
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
Thanks
dear mr grad, tolong buatkan video tutorial drag and drop dnd dong dengan next js 😁😁🙏🙏
It would be helpful, if you provide the boilerplate code as well.
Yep, will add the code soon
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
I think I still prefer uploadthing