Upload Images to Cloudinary in React & Next.js
Vložit
- čas přidán 9. 07. 2024
- Learn how to programmatically upload images to Cloudinary from a React app. We'll walk through spinning up a new Next.js app from a demo starter, collecting an image from a form filepicker input, and uploading that image to Cloudinary with a Upload Preset that optimizes and resizes before saving it to the cloud.
🧐 What's Inside
00:00 - Intro
00:13 - Tools we'll use including Cloudinary and Next.js
01:10 - Creating a new Next.js app from a Starter
02:30 - Reviewing demo image uploader app
04:05 - Finding an image from a form file picker input in React
07:53 - Adding an image to FormData to upload in a request
09:07 - Setting up a new POST fetch request with FormData to Cloudinary
11:28 - Creating an Upload Preset for unsigned Cloudinary uploads
12:52 - Appending Upload Preset to FormData to upload image to Cloudinary
14:15 - Creating an Incoming Transformation on an Upload Preset to resize and optimize images on upload
17:45 - Outro
🗒️ Read More
spacejelly.dev/posts/how-to-p...
💾 Code
github.com/colbyfayock/my-ima...
🔔 Subscribe for more tech and developer videos
czcams.com/users/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/uses
🧰 More Resources
Cloudinary
cloudinary.com/
Upload API reference
cloudinary.com/documentation/...
Upload Presets
cloudinary.com/documentation/...
Transformations on upload
cloudinary.com/documentation/...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/hartzmann/clear-sky
License code: QXVYTSAPT19IXM5Y
#colbyfayock #cloudinary #react #nextjs #upload #media #images - Věda a technologie
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Very well explained
Thank you!
ty bruv ur the best , iwas stuck so much in my ecommerce project, i resolve it , thnx again🥰
no problem!
Thank you very much!
You're welcome!
Thanks for this video. Huge help. Thanks 😍
aweosme no problem!
thank you sir
You're welcome!
Man the way you explain is great, quick and to the point explanation not some boring tutorial.
thank you so much!
love u man, you are the best
🙌❤
Thnk you
you're welcome!
My brother you saved my final project (and quite literally my life) with this tutorial. Thank you so much
glad it was able to help!
Thank you so much, this was really VERY helpful!
no problem!
This is an amazing tutorial. THANKS!
no problem :)
Was looking for hours on ways to implement user uploaded imgs to a project and you sir are a lifesaver ♥
so glad to hear it helped!
Fuck nice content. Just searched for cloudinary nextjs upload, found ya, cool voice and nicely done. 😊👊🤟
haha thank you!
Man I appreciate your tips and tricks on every video i have watched from your channel. 🔥
thank you! 💪
Thank you teacher 🙏🏻
You're welcome!
Thank you very much for this tutorial. It was very helpful!
no problem!
Amazing explanation 🔥🔥🔥
Thanks
awesome, no problem!
many thanks !!
No problem!
You earned yourself a follow my man killer tutorial. I’m excited to use this tomorrow.
thank you!! 😁
Thanks for the tutorial. I've watched quite a few Cloudinary tuts but like the way you expand on subjects like using the console to create variables. Nice!
thanks James! :D
Awesome video.
thanks! 🙌
20 minutes feels like 3 minutes, greate tutorial
Thank you!
Hi Colby, all is working great, my question is how to delete image? Thanks
are you using the unsigned method that i've shown here? there's an option that you can pass along to the API called `return_delete_token` which will then give you the ability to delete that asset, check this out: cloudinary.com/documentation/upload_images#deleting_client_side_uploaded_assets
@@colbyfayock thanks
Thank you Colby! Do you have for multiple uploading with preview? and maybe we can seleect which one is the cover photo? Thank you in advanced
hey unfortunately i dont have a good video for all of that. here's a good one for drag and drop with preview though: czcams.com/video/8VHVWPkWR8Q/video.html
it's still only one image. Cloudinary doesn't have a batch upload endpoint so you would need to loop through or create a Promise.all-like mechanism
@@colbyfayock Thank you Colby! Appreciate that
Can you please make a video on updating and deleting the Cloudinary images from the frontend in the MERN app or NextJS app?
hey thats a pretty particular topic, might not get to that exact thing, but ill note it down. thanks for the idea
Hi! I would love to ask how to upload images / videos on a specific folder? I cannot seem to find the base url with a folder parameter
hey! you should be able to just pass in `folder` as part of the options in the request: cloudinary.com/documentation/image_upload_api_reference#upload_optional_parameters
@Colby Fayock... to delete image from next js, help me please
you can use the delete endpoint! cloudinary.com/documentation/admin_api#delete_resources
Hey, awesome tutorial!!!!
Could you tell me what is that @description thing in middle of /* */ comments?
I looked it up as JavaScript, Nextjs, Reactjs and Storybook part but found nothing
hey thanks! It's JS Doc, but i'm not using it for anything beyond a comment in the code, so its just the syntax: jsdoc.app/tags-description.html
You again. Coming to my rescue
haha glad to hear it was helpful!
Hi colby, thank you, great tutorial! I want to ask something, i tried to upload pdf file, but in the url returns .ai file extension, how can i keep .pdf extension?
hey Nadya, are you able to share the URL of the uploaded asset? i'm unsure but i can ask around about that. if you dont want to share it publicly you can DM me on Twitter @colbyfayock or email me at hello@colbyfayock.com
@@colbyfayock I have sent you the code on twitter, thank you so much!😄
Thanks for always given use knowledge. You are the best teacher I have on youtube. Please I want you to do a video on how to add thank you page to emailjs react code . I have been battling with that for weeks.
thank you! I actually did another tutorial where i used nodemailer to send emails with Gmail czcams.com/video/kCVgNUqZ2J0/video.html
ill add emailjs to my list, not sure if i'll get to that though
@@colbyfayock thanks so much
good video btw. i have question how can we do delete an image? i'm stuck with it
you can use this endpoint! cloudinary.com/documentation/admin_api#delete_resources
you would need to do this in a serverless function or on a server where you can use your API Key and Secret securely
@@colbyfayock thanks bro it worked. you really are the best T-T.
add this if else in handleOnChange to prevent user cancel select error
if (changeEvent.target.files[0]) {
reader.readAsDataURL(changeEvent.target.files[0]);
}
else {
setImageSrc(undefined);
}
👏
Its been 2 years, is it still relevant and working?
did you watch?
Amazing tutorial ❤️, but 1 question, can you tell me how to delete images from cloudinary using axios or fetch.
thanks! you would want to use this endpoint: cloudinary.com/documentation/admin_api#delete_resources
cloudinary.v2.api.delete_resources(['image1', 'image2'],
function(error, result) {console.log(result, error); });
image1 and image2 are public IDs
Hi guys im struggling with how i can save this image not on Cluidanry but in my filesystem or my server. I didnt find any good solution to do that without install dozens of npm's. Thanks a lot for any answer
If I'm to add the secure_url to a database, would you simply call a new function which takes the secure_url and add it to my table? I'm using Prisma for reference.
so do you mean, once the upload is complete, in the callback function, you're looking to store that value? i think that's reasonable to do
the only thing i might recommend is storing the public ID or the entire resource object, reasoning being it would be easier to work with when for instance you're creating the URL with the SDK. it also includes teh width and height which are important for rendering on the page, but either way that object would still include the secure_url
Thank you for the tutorial. I have a question, how can I upload multiple images to cloudinary? I added multiple attribute to the , but no matter how many images I selected to upload, cloudinary will only receive one image.
unfortunately i think you need to do a separate upload request for each file, so that means collecting them and looping through
We want to do some else in typescript but files[0] in Object can not take to string.
hey im not following the question here, also im not familiar with typescript
Please, is there any way to lower the image quality before uploading? I would not simply like to prevent uploading, but rather optimize it to use as little space as possible
you could do that 1 of 2 ways - you can add that as a setting inside of an Upload Preset and use that preset when uploading or you can use eager transformations and apply that during the upload process. they basically do the same thing, but just 2 different ways of achieving it
cloudinary.com/documentation/upload_presets
cloudinary.com/documentation/transformations_on_upload
@@colbyfayock Thanks for your help! But, using the fantastic CldUploadWidget from next-cloudinary is it still not possible to do this?
@@PauloRdeOFerraz Upload Preset
@@colbyfayock Tks!!!!!
having a cors issues when i try this
hey, can you share the code?
have you looked at my example? github.com/colbyfayock/my-image-uploader/
Is there a way to deduplicate image uploads?
Afaik nothing automatic except this cloudinary.com/documentation/cloudinary_duplicate_image_detection_addon
You could probably manually do it by looking at the hash of each of the images
Hey Colby, unsigned uploads are great for demos, though that means anyone with your upload URL can POST images to your site, right?
Any way to easily secure these uploads?
some apps _want_ to allow anyone to upload something, its use case driven and people have different use cases, but you can use signed uploads cloudinary.com/documentation/upload_images#uploading_assets_to_the_cloud
if you want to have role-based uploads or authenticated users you would need some sort of authentication system set up around the uploading
Hey i have question if i have a post image stored in cloudinary when a post is created but how should i delete it automatically when the post with which it is associated gets deleted on the frontend?
good question! theoretically you don't _need_ to delete it since it can just live there without causing any issues (Aside from minor storage) but you would probably need to see if your CMS supports webhooks and trigger a function with that webhook that goes and removes the content associated with that post. you could use tags or metadata on the file upload to map the association to the post, that way you can know which ones are the right ones to remove
@@colbyfayock Thanks.
Thank you for the "straight to the point" tutorial!
How can I upload an image to a different folder with the default name?
I tried using the following code:
formData.append("upload_preset", "my-uploads");
formData.append("folder", "default-folder");
but it didn't work. Additionally, in my "global" upload tab, the option for auto-creating folders is enabled, and yeah I am the master admin. The "my-uploads" presets are the same as yours.
hey, since its an unsigned upload using the preset, the folder option wont work. you can configure that within the Upload Preset manager in the Cloudinary console by specifying the folder, or you can use Signed Uploads to be able to use that configuration option within your project. this is easier to do on the backend with an SDK
It works on localhost but after deployment to Vercel, there's problem. Anyone knows why?
do you have your environment variables set up on Vercel? maybe try to look in the logs (or add more logs) for the function
can you share the code?
here you go! github.com/colbyfayock/my-image-uploader/
How can this be further used along side mongodb database to store other details?
can you elaborate on the use case a bit?
Perhaps you can get the URL returned from the Cloudinary fetch call and subsequently store that in MongoDB to then reference?
11:00
The way of explanation is great. How can I store multiple images in the single call? I want to get array of secure_url of multiple images.
thanks! you can add the `multiple` attribute to the input to allow the selection of multiple images, you would then need to process that array of images accordingly to be uploaded
Many thanks for such a good tutorial. 10/10
I have a question:
- How can I create a separate folder for each time I call this API?
what's the use case? are you looking to autogenerate a folder name?
@@colbyfayock yes
@@colbyfayock I want a separate folder for each authenticated user
@@abdulmutaalazhar8235 you could use the user's ID, something that's not personally identifiable, as a way to consistently do that. folder: user.id
@@colbyfayock Thanks so much
Can it upload audio or video file on Cloudinary ?
yup absolutely! you can technically upload any filetype though some of course have features built around them and some dont, but images, video, and audio are all supported within Cloudinary with rich features and transformations.
here's more info about audio.
support.cloudinary.com/hc/en-us/articles/115003361672-Can-I-upload-audio-files-to-my-Cloudinary-account-
@@colbyfayock thank you
As always, great video friend, but I have one question: how can I obtain all of my images from cloudinary and display them on the frontend?
hey thanks and great question! i think you should be able to use the Resources API cloudinary.com/documentation/admin_api#resources
you should also be able to use the node SDK to do this cloudinary.com/documentation/node_asset_administration
Hello, thank you for this tutorial, it works fine ! But, after upload an image, we have some cookies warnings :
Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.
Do you know how can we solve this cookie issue (by using NextJS) ?
Have a nice day, bye !
hey this is interesting but frankly im not familiar with any of this. is this a Cloudinary-related issue?
This video's quality is VERY VERY high
Thanks 😁
@@colbyfayock 1 problem that I face is that the code is wrapped inside a form element, but I want to extract it into a component that acts like a form field, and not an entire form. This way I can use it in any existing form I have. Have any idea what can I do?
@@avivshvitzky2459 you can either abstract the form into a wrapper component and use hooks to communicate through Context, or you could only include the inputs and add the change handlers on the inputs themselves