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.

...
<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