Upload Widget abnorting after crop

Jon

I have set up the widget with the following parameters (this is React based):

            sources: ['local', 'camera'],

            cropping: true,

            multiple: false,

            resourceType: 'image'

After I resize an image in the widget and press the crop button, it appears to crop the image onscreen, then the widget closes itself. An image is uploaded, but it is the full image, not the cropped image.

I'm getting a series of messages back from Cloudinary, which seem to imply it is aborting the upload and then closing the widget:

result= {info: 'shown', event: 'display-changed', uw_event: true, data: {…}}

UploadWidget.js:18 result= {info: 'expanded', event: 'display-changed', uw_event: true, data: {…}}

UploadWidget.js:18 result= {info: {…}, event: 'upload-added', uw_event: true, data: {…}}data: {type: 'uw_event', widgetId: 'widget_2', event: 'upload-added', info: {…}}event: "upload-added"info: {id: 'uw-file3', batchId: 'uw-batch2', publicId: '', file: {…}}uw_event: true[[Prototype]]: Object

UploadWidget.js:18 result= {info: {…}, event: 'queues-start', uw_event: true, data: {…}}

UploadWidget.js:18 result= {event: 'success', info: {…}}event: "success"info: {id: 'uw-file3', batchId: 'uw-batch2', asset_id: '1b8aec0ff99b0a2376e0da5a63761868', public_id: 'kbn9z2ymjeuhltbwtzus', version: 1687946102, …}[[Prototype]]: Object

UploadWidget.js:18 result= {info: {…}, event: 'queues-end', uw_event: true, data: {…}}

UploadWidget.js:18 result= {info: {…}, event: 'abort', uw_event: true, data: {…}}data: {type: 'uw_event', widgetId: 'widget_2', event: 'abort', info: {…}}event: "abort"info: all: trueids: null[[Prototype]]: Objectuw_event: true[[Prototype]]: Object

UploadWidget.js:18 result= {event: 'close', info: {…}}

UploadWidget.js:18 result= {info: 'hidden', event: 'display-changed', uw_event: true, data: {…}}

Any ideas what is wrong?

Tom

Hi @Jon ,

I just checked the last upload you made with that preset and to me it looks like the cropping worked, it's the one with the public_id as bziimmlvqsucwvc2zu1e.

Could you please double-check and confirm? If not, please let me know the public_id of the image where this did not work with the preset and I will check further.

Thanks,

Thomas

Tom

Hi @Jon ,

Thanks for reaching out.

This article (https://support.cloudinary.com/hc/en-us/articles/203062071-How-to-crop-images-via-the-Upload-Widget-) explains how to crop images via the Upload Widget.

Basically, you need to create an upload preset, define the settings as mentioned in the article above and then make sure this upload preset is included in your upload widget config as well.

Please let me know if you have any other questions or queries.

Kind Regards,

Thomas

Jon

Hi Thomas,

That was the article that I originally followed. My settings in Incoming Transformation are as follows:

In my React code I specify the preset with the following line:

            uploadPreset:'ADCA_Dev',

Tom

Hi @Jon ,

Thanks for getting back.

I just checked your uploadPreset ADCA_Dev and I do not see that incoming transformation saved.

Please can you add it again and make sure to hit save? After saving, you should see it in the upload preset page like so

Please let me know if you have any other questions or queries.

Kind Regards,

Thomas

Jon

Hi Thomas,

I've recreated that - the only difference versus yours is that mine also says:

Access mode: public

The same problem exists.

Jon

You're right that's fixed it, thanks Thomas. I guess I couldn't have pressed the save button after making the changes 🙄