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-
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
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); }
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 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! 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
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 unfortunately i dont have a good video for all of that. here's a good one for drag and drop with preview though: ua-cam.com/video/8VHVWPkWR8Q/v-deo.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
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
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
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
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!
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
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
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
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
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 !
@@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
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
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.
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
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 ua-cam.com/video/kCVgNUqZ2J0/v-deo.html ill add emailjs to my list, not sure if i'll get to that though
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
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
20 minutes feels like 3 minutes, greate tutorial
Thank you!
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
Man the way you explain is great, quick and to the point explanation not some boring tutorial.
thank you so much!
ty bruv ur the best , iwas stuck so much in my ecommerce project, i resolve it , thnx again🥰
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!
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!
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
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);
}
👏
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
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
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
Fuck nice content. Just searched for cloudinary nextjs upload, found ya, cool voice and nicely done. 😊👊🤟
haha thank you!
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
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
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: ua-cam.com/video/8VHVWPkWR8Q/v-deo.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
@Colby Fayock... to delete image from next js, help me please
you can use the delete endpoint! cloudinary.com/documentation/admin_api#delete_resources
Thanks for this video. Huge help. Thanks 😍
aweosme no problem!
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!😄
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
Its been 2 years, is it still relevant and working?
did you watch?
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
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
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
Man I appreciate your tips and tricks on every video i have watched from your channel. 🔥
thank you! 💪
You earned yourself a follow my man killer tutorial. I’m excited to use this tomorrow.
thank you!! 😁
You again. Coming to my rescue
haha glad to hear it was helpful!
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!!!!!
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.
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
love u man, you are the best
🙌❤
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
many thanks !!
No problem!
Thank you very much!
You're welcome!
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
can you share the code?
here you go! github.com/colbyfayock/my-image-uploader/
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
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/
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
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
11:00
Very well explained
Thank you!
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
Thank you so much, this was really VERY helpful!
no problem!
thank you sir
You're welcome!
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
Thank you very much for this tutorial. It was very helpful!
no problem!
Thank you teacher 🙏🏻
You're welcome!
Amazing explanation 🔥🔥🔥
Thanks
awesome, no problem!
Thnk you
you're welcome!
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 ua-cam.com/video/kCVgNUqZ2J0/v-deo.html
ill add emailjs to my list, not sure if i'll get to that though
@@colbyfayock thanks so much
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.
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?
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
This is an amazing tutorial. THANKS!
no problem :)
Awesome video.
thanks! 🙌