Search code examples
cloudinary

Cloudinary upload image widget does not work as expected

I am using the upload image widget without success.

1) result.info.path returns invalid url. 2) There is no preview of the uploaded images due to no.1 3) No images are were uploaded to my media folder at Cloudinary.

Fiddle: https://jsfiddle.net/7uqb83t1/

These are my preset settings: enter image description here enter image description here enter image description here enter image description here enter image description here

Can someone share a working version of this widget + preset settings?

Solution

  • On successful upload, you need to check result.info.secure_url for a link to the asset. Currently, in your preset, you're using Async which means the incoming transformation is performed in the background (asynchronously), and as such, you will get a pending result. Async assumes you're using a Notification URL as a webhook where you'll receive the Upload API response when the processing is complete. In your case, I'd recommend turning the Async off.

    Also, your incoming transformation configured in the preset is not valid and because of that, you will be getting an error on upload. Please console.log this in your JSFiddle to see it. Essentially, it'll be -

    Auto gravity can only be used with crop, fill, lfill, fill_pad or thumb

    'auto' gravity (g_auto) implies cropping (automatically selecting the most interesting part of the image to focus on) and therefore you need to use an appropriate crop mode. 'scale' keeps all image data and no cropping is made so that is why g_auto can't work with it. Please see the following section of the documentation for details on the different crop modes - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - which will help you decide which one you want to use.

    Lastly, you should also consider updating your incoming transformation so that it only resizes once, since currently, resizing it three times with the same crop mode is redundant. For example, you can use c_scale,q_auto,w_687 only, or if you want with 'auto' gravity you can try c_fill,g_auto,q_auto,w_687.