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

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024
  • НаукаНаука

Комментарии • 37

  • @Cloudinary
    @Cloudinary  2 месяца назад

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

  • @mindpower1332
    @mindpower1332 4 месяца назад +5

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

  • @biruktad3327
    @biruktad3327 5 месяцев назад +1

    Clear, concise and clean presentation. Thx.

    • @colbyfayock
      @colbyfayock 5 месяцев назад

      no problem, glad you found it helpful!

  • @jtaylor8606
    @jtaylor8606 Год назад +2

    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.

  • @josuegarces6568
    @josuegarces6568 2 месяца назад

    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
      @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
    @abiwendesen4747 Год назад +3

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

    • @colbyfayock
      @colbyfayock Год назад +4

      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
      @captaingaz8705 Год назад

      @@colbyfayock can you be more specific please?

    • @colbyfayock
      @colbyfayock Год назад +2

      @@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__
      @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
      @colbyfayock Год назад +1

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

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

  • @smartgowthamrazer
    @smartgowthamrazer Год назад

    I Cannot resolve that props validation issue on UploadWidgets.js

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

  • @fadlo1580
    @fadlo1580 Год назад

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

    • @colbyfayock
      @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!

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

  • @baqirhemani
    @baqirhemani 8 месяцев назад

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

    • @colbyfayock
      @colbyfayock 8 месяцев назад

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

    • @baqirhemani
      @baqirhemani 8 месяцев назад

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

    • @colbyfayock
      @colbyfayock 8 месяцев назад

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

  • @catreunion
    @catreunion Год назад +1

    Thank you 🙏🏻

  • @Sameer.Trivedi
    @Sameer.Trivedi Год назад

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

  • @carlosgp4448
    @carlosgp4448 Год назад

    Es posible hacerlo en angular ?

    • @colbyfayock
      @colbyfayock 8 месяцев назад

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

  • @darshmostafa6138
    @darshmostafa6138 Год назад

    but i can not upload a video

    • @colbyfayock
      @colbyfayock Год назад

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