Upload Widget abnorting after crop

Jon
Jon Member Posts: 4
edited July 5 in Developer APIs

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?

Tagged:

Best Answer

  • Tom
    Tom Member, Cloudinary Staff Posts: 21
    Answer ✓

    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

Answers

  • Tom
    Tom Member, Cloudinary Staff Posts: 21

    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
    Jon Member Posts: 4

    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
    Tom Member, Cloudinary Staff Posts: 21

    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
    Jon Member Posts: 4

    Hi Thomas,

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

    Access mode: public

    The same problem exists.

  • Jon
    Jon Member Posts: 4

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