JavaScript Events (upload)

The upload widgets sends custom javascript events when a user uploads a file or when a file is removed.

By listening to those events you can build a custom experience using the file information passed in each event. 

The events are:

• upload:added
• upload:removed

The event is triggered from the file upload container, the event bubbles up the DOM and can be caught on the form element (shown in the example). If you have multiple upload widgets, you can listen on the event directly on the container div where the upload widget is rendered.

Sample javascript:

/* attach event listener to the product form */
window.addEventListener('upload:added', function(e) {
    /* event detail contains the file reference */
    var file = e.detail;
    /* print file on console to see all attributes */
    console.debug('file added', file);

    /* if image thumbnail is enabled
      then the event is executed twice, once for the original and once for the thumbnail
      check the file.meta.variant to decide which version this event is from
     */
    if(file.url && file.meta.variant === 'thumbnail'){
        console.log('file is thumbnail!');
    }

    /* url contains the link to the file */
    console.log('new file: ' + file.url);
});

window.addEventListener('upload:removed', function(e) {
    /* event detail contains the file reference */
    let file = e.detail;

    console.log('file deleted: ' + file.url);
});

the event.detail property contains the full file object with all attributes.

To view the event data you can visit the events sample page: https://www.cloudlift.app/collections/upload-lift/products/upload-events

If you need further assistance, please send us a request and we will be happy to help you out.