Data & events

Data output

We provide the dedicated element for the data output purposes — <lr-data-output>. This Custom Element can be connected to some workflow context and provide you with convenient data access. Place this element inside an uploader tag:

<lr-config
  ctx-name='my-uploader'
  pubkey='YOUR_PUBLIC_KEY'
></lr-config>

<lr-file-uploader-regular
  ctx-name="my-uploader"
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.30.2/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>

<lr-data-output
  ctx-name="my-uploader"
  use-console
  use-input
  use-group
  use-event
></lr-data-output>html

Let's walk through its attributes:

  • use-console — enables browser console output without modifying the source code.
  • use-event — enables custom events (lr-data-output) dispatching for the DOM element. These events contain all uploading data and can be processed at any level of your application.
  • use-group — create a group from uploaded files, the same as groupOutput. When enabled, the groupData property will be added to the lr-data-output event along with the files property.
  • use-template — uploading results could be rendered as a list of nested DOM elements. You can specify a simple template for that.
  • use-input — create input to be used inside HTML-form.
  • input-name — used together with use-form. Sets the input name. The context name will be used by default.
  • input-required — whether the input is required or not. Works as the native required attribute.

Then, use an event listener to get all data:

const dataOutput = document.querySelector('lr-data-output');
dataOutput.addEventListener('lr-data-output', (e) => {
  console.log(e.detail);
});javascript

Events

You can catch all events on the lr-upload-ctx-provider block:

<lr-upload-ctx-provider
  ctx-name="my-uploader"
></lr-upload-ctx-provider>

<script>
  const ctx = document.querySelector('lr-upload-ctx-provider');
  ctx.addEventListener('data-output', (e) => {
    console.log(e.detail);
  });
</script>html

Here is a list of available events:

  • upload-start — upload is started for the file list selected by the user.
  • remove — fired when one of the uploaded items is removed from the uploading list.
  • upload-progress — common upload progress for the list.
  • upload-finish — uploading is finished.
  • upload-error — error occurred during file uploading.
  • validation-error — file fails checks according to the validation settings.
  • cloud-modification — image was modified via cloud API.
  • data-output — common data about uploads.
  • init-flow — called when the upload flow is initialized.
  • done-flow — called when the upload flow is finished.

Global events (deprecated)

  • ⚠️ Global events are deprecated and will be removed in the next major release. Use context scoped events described above instead.

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.
  • LR_INIT_FLOW — called when the upload flow is initialized.
  • LR_DONE_FLOW — called when the upload flow is finished.

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