Uploading Images & Videos in React with the Cloudinary Upload Widget - Dev Hints

Set up easy image and video uploading for you or your visitors in a React app using the Cloudinary Upload Widget. Learn how to install and configure the upload widget including how to make the widget work with the intricacies of a React application.
Using Next.js? Try the CldUploadWidget: next.cloudinar...
📝 Cloudinary Upload Widget
cld.media/devh...
💾 Using the Cloudinary Upload Widget with Upload Presets in React
github.com/col...
And if you're using a React framework like Next.js, here are some more examples:
💾 Next.js Using the Cloudinary Upload Widget for Signed Uploads
github.com/col...
💾 Next.js Using the Cloudinary Upload Widget with Upload Presets
github.com/col...
Instructor: Colby Fayock ( @colbyfayock )
--
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
cld.media/devh...
#cloudinary #devhints #react #images #videos #webdevelopment

[@Cloudinary]

Using Next.js? Try the CldUploadWidget: next.cloudinary.dev/clduploadwidget/basic-usage

[@mindpower1332]

amazing, i solve my 3 months pending error using this video

[@colbyfayock]

🙌

[@biruktad3327]

Clear, concise and clean presentation. Thx.

[@colbyfayock]

no problem, glad you found it helpful!

[@jtaylor8606]

This is a good tutorial, but it needs removing and replacing with an up to date version: the menus have changes in cloudinary to find the settings and you now need to specify 'uploadPreset' rather than 'upload' in the widget component.

[@colbyfayock]

thanks for the feedback

[@catreunion]

Thank you 🙏🏻

[@colbyfayock]

you're welcome! 🙌

[@josuegarces6568]

Very nice video! I need help with something specific: I've checked the Cloudinary Upload Widget documentation and I didn't find an option to change the image format. For example, when I upload an image in PNG format, I would like it to be automatically converted to WebP or the most suitable format for the browser. is there any way to configure this?

[@colbyfayock]

i assume you mean you want it stored as a webp (or something else) when you upload it? i believe you're looking for Incoming Transformations
here's how you can use the API to do this: cloudinary.com/documentation/eager_and_incoming_transformations#incoming_transformations
you're also able to use Upload Presets under Transform > Incoming Transformations

[@abiwendesen4747]

how can i get the secure url of the uploaded content i want to send the secure url to my backend ?

[@colbyfayock]

when initializing the upload widget, there's a callback function that you can use to capture different events, where you can see the resulting upload and use it as you'd like

[@captaingaz8705]

@@colbyfayock can you be more specific please?

[@colbyfayock]

@@captaingaz8705 hey, try checking out this example where i'm using the callback along with a prop to trigger functionaliy - inside the prop, I use the results to save the resource to state, which you could similarly do for a backend github.com/colbyfayock/cloudinary-examples/blob/main/examples/react-upload-widget-preset/src/components/UploadWidget/UploadWidget.js#L47

[@oloja__]

@@colbyfayock hey man. i saw the code but is there a way i can get the url immediately after i upload so i can send to the backend

[@colbyfayock]

@@oloja__ in that linked example, the URL would be available at result.secure_url

[@Sameer.Trivedi]

Please make a tutorial for signed uploads using React. The documentation is very hard to figure out.

[@colbyfayock]

great idea!

[@smartgowthamrazer]

I Cannot resolve that props validation issue on UploadWidgets.js

[@colbyfayock]

do you mean TypeScript? or what specifically are you referring to from a validation perspective?
here are some types that might help: github.com/colbyfayock/next-cloudinary/blob/main/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts

[@eudeamonism]

How do you delete an image at client side? Is this a good practice? If not, what would be? Could you create a video showing this?

[@colbyfayock]

when setting up your upload widget, you can use an upload preset that you configure to return a Delete Token, from there, you can see how you can delete it with the docs here: cloudinary.com/documentation/upload_images#deleting_client_side_uploaded_assets
as far as good practice or not, it likely depends on the UX that you're creating around this feature, is the intent that users can delete their own images for instance? by providing that, are you opening yourself to lost data if they access that token? I would consider the use case first
its a great idea for a video though, particularly the Delete Token, and we'll add it to the list!
other options though worth mentioning are setting up an API endpoint and using the Node SDK or other serverside SDK in order to delete assets securely where you would have more control over who is able to hit that endpoint or not then trigger that from the UI when necessary

[@Ddrcfszy]

Hey I took the example form github and it seems the in the first time I click upload widget it take few seconds till it’s open. Why?

[@colbyfayock]

hey i had a similar question about this a few days ago. when you click the button it triggers createWidget which pulls in resources to initialize the widget UI (to avoid downloading those resources on page load). my solution is to use requestIdleCallback, where once the browser is idle, we can initialize that, which helps reduce that open experience
if you try checking out the example it should be updated with that inside of the component. it wont let me post the link here unfortuantely, but same GitHub example

[@baqirhemani]

Hi cloudinary team, can we upload PDF Files in the system?

[@colbyfayock]

yes! you can upload PDFs as long as you're not restricting them

[@baqirhemani]

@@colbyfayock Can we get a tutorial on uploading multiple PDFs?

[@colbyfayock]

@@baqirhemani i'll add it to my list!! in the meantime, using the upload widget, it should be similar to this video. alternatively, if you're working in a node environment, here's a tutorial for uploading multiple files ua-cam.com/video/_bTX2L0jPzA/v-deo.html

[@fadlo1580]

how to restrict upload to only authed users ? i need to use signed urls right ?

[@colbyfayock]

yup! Signed Uploads are generally the best approach for handling restricting uploads. a good way to do this is by creating a serverless function that would include the code to sign the request. here's an example using Next.js...
- Generate Signature Callback: github.com/colbyfayock/cloudinary-examples/blob/main/examples/nextjs-upload-widget-signed/components/UploadWidget/UploadWidget.js#L35
- API Endpoint: github.com/colbyfayock/cloudinary-examples/blob/main/examples/nextjs-upload-widget-signed/pages/api/sign-cloudinary-params.js
this can really be translated into anywhere you have the ability to surface server code that's callable from the client though
from there, you'd likely also want to lock down the endpoint itself so that only authenticated users have the ability to call that endpoint, and that would depend on the authentication solution you're using, but it could be as minimal of a solution as checking for an active session at the beginning of the API handler and returning a 401 if they're not authenticated or authorized
happy to help expand on this if needed!

[@carlosgp4448]

Es posible hacerlo en angular ?

[@colbyfayock]

si! github.com/cloudinary-community/cloudinary-examples/tree/main/examples/angular-upload-widget

[@darshmostafa6138]

but i can not upload a video

[@colbyfayock]

what issue are you running into? you should be able to upload videos with this solution