Data & events
On this page
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 asgroupOutput
. When enabled, thegroupData
property will be added to thelr-data-output
event along with thefiles
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 withuse-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 nativerequired
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