Events

You can catch all events in the window scope:

window.addEventListener('LR_UPLOAD_START', (e) => {
  console.log(e.detail);
});javascript

Here is a list of available events:

LR_UPLOAD_START — upload is started for the file list selected by the user.
LR_REMOVE — fired when one of the uploaded items is removed from the uploading list.
LR_UPLOAD_PROGRESS — common upload progress for the list.
LR_UPLOAD_FINISH — uploading is finished.
LR_UPLOAD_ERROR — error occurred during file uploading.
LR_VALIDATION_ERROR — file fails checks according to the validation settings.
LR_CLOUD_MODIFICATION — image was modified via cloud API.
LR_DATA_OUTPUT — common data about uploads.

Several uploaders on the same page

Sometimes you may need to place more than one File Uploader on the same page. To define what exact workflow caused an event, use the context name:

...
<lr-file-uploader-regular ctx-name="UPLOADER_1"></lr-file-uploader-regular>
...
<lr-file-uploader-regular ctx-name="UPLOADER_2"></lr-file-uploader-regular>
...html

window.addEventListener('LR_UPLOAD_START', (e) => {
  if (e.detail.ctx === 'UPLOADER_1') {
    console.log('Uploading started in the FIRST uploader instance.', e.detail.data);
  } else if (e.detail.ctx === 'UPLOADER_2') {
    console.log('Uploading started in the SECOND uploader instance.', e.detail.data);
  }
});javascript