Upload Images to Cloudinary in React & Next.js

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@mustaneerhaider515]

Man the way you explain is great, quick and to the point explanation not some boring tutorial.

[@colbyfayock]

thank you so much!

[@arisudana3672]

My brother you saved my final project (and quite literally my life) with this tutorial. Thank you so much

[@colbyfayock]

glad it was able to help!

[@okadz7037]

ty bruv ur the best , iwas stuck so much in my ecommerce project, i resolve it , thnx again🥰

[@colbyfayock]

no problem!

[@mandre2390]

Was looking for hours on ways to implement user uploaded imgs to a project and you sir are a lifesaver ♥

[@colbyfayock]

so glad to hear it helped!

[@jamesgrubb]

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!

[@colbyfayock]

thanks James! :D

[@zaritzki]

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

[@colbyfayock]

hey unfortunately i dont have a good video for all of that. here's a good one for drag and drop with preview though: kzbin.info/www/bejne/boerh4qGoLyFbrM 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

[@zaritzki]

@@colbyfayock Thank you Colby! Appreciate that

[@LifeWithRilla]

You earned yourself a follow my man killer tutorial. I’m excited to use this tomorrow.

[@colbyfayock]

thank you!! 😁

[@sdfsdfsdffdsfsdfsd123]

Hi Colby, all is working great, my question is how to delete image? Thanks

[@colbyfayock]

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

[@sdfsdfsdffdsfsdfsd123]

@@colbyfayock thanks

[@josecastillo1938]

@Colby Fayock... to delete image from next js, help me please

[@colbyfayock]

you can use the delete endpoint! cloudinary.com/documentation/admin_api#delete_resources

[@bestchoice7431]

Can you please make a video on updating and deleting the Cloudinary images from the frontend in the MERN app or NextJS app?

[@colbyfayock]

hey thats a pretty particular topic, might not get to that exact thing, but ill note it down. thanks for the idea

[@iShubhamPanchal]

Amazing tutorial ❤️, but 1 question, can you tell me how to delete images from cloudinary using axios or fetch.

[@colbyfayock]

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

[@kunalkhairnar5276]

Thanks for this video. Huge help. Thanks 😍

[@colbyfayock]

aweosme no problem!

[@dugsiiye]

Man I appreciate your tips and tricks on every video i have watched from your channel. 🔥

[@colbyfayock]

thank you! 💪

[@donmikkodanm.olmillo8154]

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

[@colbyfayock]

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

[@fran_sar]

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

[@colbyfayock]

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

[@nadyamumtazah9431]

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?

[@colbyfayock]

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 [e-mail]

[@nadyamumtazah9431]

@@colbyfayock I have sent you the code on twitter, thank you so much!😄

[@mathiasriissorensen6994]

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.

[@colbyfayock]

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

[@trenom]

Is there a way to deduplicate image uploads?

[@colbyfayock]

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

[@mohamedzarhou1905]

Amazing explanation 🔥🔥🔥 Thanks

[@colbyfayock]

awesome, no problem!

[@shariqueimam4904]

Very well explained

[@colbyfayock]

Thank you!

[@chilling9535]

good video btw. i have question how can we do delete an image? i'm stuck with it

[@colbyfayock]

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

[@chilling9535]

@@colbyfayock thanks bro it worked. you really are the best T-T.

[@one-step-closer-p9n]

We want to do some else in typescript but files[0] in Object can not take to string.

[@colbyfayock]

hey im not following the question here, also im not familiar with typescript

[@GMERT]

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.

[@colbyfayock]

thank you! I actually did another tutorial where i used nodemailer to send emails with Gmail kzbin.info/www/bejne/oXS5mIGLpr9lgJI ill add emailjs to my list, not sure if i'll get to that though

[@GMERT]

@@colbyfayock thanks so much

[@najneindustrijaliziraniji]

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.

[@colbyfayock]

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

[@adamcardenas9267]

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?

[@colbyfayock]

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

[@PauloRdeOFerraz]

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

[@colbyfayock]

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

[@PauloRdeOFerraz]

@@colbyfayock Thanks for your help! But, using the fantastic CldUploadWidget from next-cloudinary is it still not possible to do this?

[@colbyfayock]

@@PauloRdeOFerraz Upload Preset

[@PauloRdeOFerraz]

@@colbyfayock Tks!!!!!

[@marlonM_1985]

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

[@daviddavenport4739]

Thank you very much for this tutorial. It was very helpful!

[@colbyfayock]

no problem!

[@superiorreactions6726]

How can this be further used along side mongodb database to store other details?

[@colbyfayock]

can you elaborate on the use case a bit?

[@daviddavenport4739]

Perhaps you can get the URL returned from the Cloudinary fetch call and subsequently store that in MongoDB to then reference?

[@devstefancho]

20 minutes feels like 3 minutes, greate tutorial

[@colbyfayock]

Thank you!

[@mustaneerhaider515]

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?

[@colbyfayock]

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

[@mustaneerhaider515]

@@colbyfayock Thanks.

[@edwardyeow7688]

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.

[@colbyfayock]

unfortunately i think you need to do a separate upload request for each file, so that means collecting them and looping through

[@kirtipriya4162]

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.

[@colbyfayock]

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

[@boonchon64]

It works on localhost but after deployment to Vercel, there's problem. Anyone knows why?

[@colbyfayock]

do you have your environment variables set up on Vercel? maybe try to look in the logs (or add more logs) for the function

[@oryankibandi3556]

This is an amazing tutorial. THANKS!

[@colbyfayock]

no problem :)

[@abdulmutaalazhar8235]

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?

[@colbyfayock]

what's the use case? are you looking to autogenerate a folder name?

[@abdulmutaalazhar8235]

@@colbyfayock yes

[@abdulmutaalazhar8235]

@@colbyfayock I want a separate folder for each authenticated user

[@colbyfayock]

@@abdulmutaalazhar8235 you could use the user's ID, something that's not personally identifiable, as a way to consistently do that. folder: user.id

[@abdulmutaalazhar8235]

​@@colbyfayock Thanks so much

[@moretimeproductions]

Thank you so much, this was really VERY helpful!

[@colbyfayock]

no problem!

[@KhoaNguyen-uy9zl]

Can it upload audio or video file on Cloudinary ?

[@colbyfayock]

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-

[@KhoaNguyen-uy9zl]

​@@colbyfayock thank you

[@rohansalunkhe7268]

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?

[@colbyfayock]

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

[@harshbaid.13]

Its been 2 years, is it still relevant and working?

[@colbyfayock]

did you watch?

[@catreunion]

Thank you teacher 🙏🏻

[@colbyfayock]

You're welcome!

[@gonzaloguaimas1272]

love u man, you are the best

[@colbyfayock]

🙌❤

[@minhducaaa]

Thank you very much!

[@colbyfayock]

You're welcome!

[@adriendridri8231]

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]

hey this is interesting but frankly im not familiar with any of this. is this a Cloudinary-related issue?

[@BrasserieDuMontBlanc]

many thanks !!

[@colbyfayock]

No problem!

[@florianweise2749]

Fuck nice content. Just searched for cloudinary nextjs upload, found ya, cool voice and nicely done. 😊👊🤟

[@colbyfayock]

haha thank you!

[@_parassolanki]

Awesome video.

[@colbyfayock]

thanks! 🙌

[@chigozieerigo9400]

having a cors issues when i try this

[@colbyfayock]

hey, can you share the code?

[@colbyfayock]

have you looked at my example? github.com/colbyfayock/my-image-uploader/

[@ismaelsocador]

can you share the code?

[@colbyfayock]

here you go! github.com/colbyfayock/my-image-uploader/

[@imkeyi]

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); }

[@colbyfayock]

👏

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@TechX5others]

You again. Coming to my rescue

[@colbyfayock]

haha glad to hear it was helpful!

[@wassup102]

thank you sir

[@colbyfayock]

You're welcome!

[@sahilmustak1580]

Thnk you

[@colbyfayock]

you're welcome!

[@itbeat7899]

11:00

[@avivshvitzky2459]

This video's quality is VERY VERY high

[@colbyfayock]

Thanks 😁

[@avivshvitzky2459]

@@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?

[@colbyfayock]

@@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