Skip to main content

Upload widget sends 'abort' event on Done

Vlad Chetyrkin

Hi All,

I am evaluating the Upload Widget with Angular. 

My test case is:

1. call cloudinary.openUploadWidget()

2. upload an image

3. Click on Done

Here I got a problem - I recevie 'abort' event every time I close the widget. So I cannot recognize if an user clicked on Done or Cancel. The uploaded images can be found in media gallery.

Here is the sequence of widget events for a single testcase:

Open the widget:

  • display-changed {info: "shown", event: "display-changed", uw_event: true, data: {…}}
  • source-changed {info: {…}, event: "source-changed", uw_event: true, data: {…}}
  • source-changed {info: {…}, event: "source-changed", uw_event: true, data: {…}}

Upload a file:

  • upload-added {info: {…}, event: "upload-added", uw_event: true, data: {…}}
  • queues-start {info: {…}, event: "queues-start", uw_event: true, data: {…}}
  • display-changed {info: "expanded", event: "display-changed", uw_event: true, data: {…}}
  • success {event: "success", info: {…}}
  • queues-end {info: {…}, event: "queues-end", uw_event: true, data: {…}}

Click on Done button:

  • abort {info: {…}, event: "abort", uw_event: true, data: {…}}
  • close {event: "close", info: {…}}
  • display-changed {info: "hidden", event: "display-changed", uw_event: true, data: {…}}

Please advice.

Vlad

2

Comments

11 comments

Date Votes
  • Rebecca Peltz

    Vlad,

    Can you share your cloud name and JavaScript code?  If security is an issue, please open a support ticket by emailing support@cloudinary.com. 

    Thanks, 

    Becky

    0
  • Aleksandar Kostadinov
    Edited

    Hi Vlad,

    The callback supplied in the Widget configuration returns two objects, 'error' and 'result' based on the documentation examples. If your user clicks Done then the abort event would be part of the 'result' i.e. on-success object, but not in the 'error'.

    On the other hand, if your user cancels an upload midway the abort event would be sent in both the 'error' and 'result' object. In such case, the 'error' would contain '{status: "abort", statusText: "abort"}'. This way you can distinguish between the two.

    Let me know if this clears things up.

    0
  • Vlad Chetyrkin

    Hi All, 

    thanks for your responses. The name of my cloud is 'dynatron'.

    The problem is that the behavior of the marked buttons is the same:

     

    Is it bug or feature?

    I have recorded two detailed screencasts:

    1. Click on Done:

    https://drive.google.com/file/d/16FmRtdFVQXLRU_f8ma28drHOe68l8fxR/view?usp=sharing 

    2. Click on [X]:

    https://drive.google.com/file/d/1WA8YaTWx1m_jILED4zMCgajHBqHnowtc/view?usp=sharing  

     

    Best regards

    Vlad

     

     

     

     

     

     

    0
  • Anders Bech Mellson
    Edited

    Hi Aleksandar, I am also in need of a way to distinguish between the two buttons. From a user perspective, the close button could resemble a cancel action, and the done is an ok action. At least that's the demand I'm facing right now.

    0
  • Anders Bech Mellson
    Edited

    Hi Aleksander, thanks for the reply. However there's no difference in events when I test it. There is never anything in the error object, not even when the user clicks the 'X' button.

    I'm using this version of the upload widget: 

    https://widget.cloudinary.com/v2.0/global/all.js

     

    0
  • Anders Bech Mellson

    I’m asking about clicking the X button after an upload has completed. I need to distinguish the two clicks after the upload has completed

    0
  • Anders Bech Mellson
    Edited

    Hi Erwin,

    Thanks for getting back to me!

    I'm using the widget to add images in a support chat application.
    The user can add images via the widget, and when they press the "Done" button, the chat message is sent.

    But because I can't distinguish the two buttons, the "X" button also sends the chat message.

    I know I could refactor our app to support this. But it would make sense from my point of view to be able to distinguish the two buttons, maybe by including a sender reference, a title, or anything that can separate them.

    0
  • Aleksandar Kostadinov

    Hi Vlad,

    Yes, on successful upload, the Done and Close buttons emit the same event because they produce the same result, i.e. the widget is just closed. The user can click on any of the two buttons to close the widget.

     

    -1
  • Aleksandar Kostadinov

    Hi Anders,

    There is a way to distinguish between the two - When a user clicks the Done button the Abort event is sent in the 'result' object but not in the 'error' object. However, when the user clicks the 'X' button both 'result' and 'error' objects in the callback receive the Abort event.

    -1
  • Aleksandar Kostadinov

    Hi Anders,

    Just to verify and ensure I understand/test the same case - The X close button in the top right is giving you the same event as when clicking the Done button and both of those are clicked when the upload is complete, is that right? If so, then both would indeed return the same object.

    The difference would be when clicking the X button in the centre of the widget during an upload. That would stop/cancel the upload and in the callback should have the abort event in both result/error.

    If I understand, you're also asking/checking about clicking the X button in the top right during an upload, which also cancels the upload, but that doesn't produce the expected result (i.e. that callback is the same), am I correct?

    -1
  • Erwin Lukas

    Hi Anders,

    Both the "X" button and "Done" button are both indeed emits the same set of events.
    Can you share your use case when you would like to differentiate these 2 buttons when it's after an upload has completed?

    -1

Post is closed for comments.

Didn't find what you were looking for?

New post