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.
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 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
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?
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
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
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
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!
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
@@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 ruclips.net/video/_bTX2L0jPzA/видео.html
Using Next.js? Try the CldUploadWidget: next.cloudinary.dev/clduploadwidget/basic-usage
Clear, concise and clean presentation. Thx.
no problem, glad you found it helpful!
amazing, i solve my 3 months pending error using this video
🙌
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.
thanks for the feedback
how can i get the secure url of the uploaded content i want to send the secure url to my backend ?
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
@@colbyfayock can you be more specific please?
@@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
@@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
@@oloja__ in that linked example, the URL would be available at result.secure_url
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?
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
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?
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
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?
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
how to restrict upload to only authed users ? i need to use signed urls right ?
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!
I Cannot resolve that props validation issue on UploadWidgets.js
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
Hi cloudinary team, can we upload PDF Files in the system?
yes! you can upload PDFs as long as you're not restricting them
@@colbyfayock Can we get a tutorial on uploading multiple PDFs?
@@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 ruclips.net/video/_bTX2L0jPzA/видео.html
Es posible hacerlo en angular ?
si! github.com/cloudinary-community/cloudinary-examples/tree/main/examples/angular-upload-widget
Please make a tutorial for signed uploads using React. The documentation is very hard to figure out.
great idea!
Thank you 🙏🏻
you're welcome! 🙌
but i can not upload a video
what issue are you running into? you should be able to upload videos with this solution