UploadingFile Uploader

Migration guide for @uploadcare/blocks v0.32.0

BREAKING CHANGES

  • Global events are removed, i.e. window.addEventListener('LR_UPLOAD_FINISH', ...) will not work anymore. Now you need to use lr-upload-ctx-provider block to subscribe to the events. See the Events page for more details.
  • All existing events and their payloads are changed. See the Events page for more details.
  • lr-data-output block is removed.
    • To handle HTML forms you need to use lr-form-input block. See the HTML Forms page for more details.
    • Groups output moved to the lr-upload-ctx-provider events. See the Events page for more details.
    • Console debugging output now enabled with the debug attribute on lr-config. See the Options page for more details.
  • lr-message-box block is removed.

How to migrate

Global events

Before:

1<script>
2  window.addEventListener('LR_UPLOAD_FINISH', event => {
3    if (e.detail.ctx === 'my-uploader') {
4      const files = event.detail
5    }
6  })
7</script>

After:

1<lr-upload-ctx-provider ctx="my-uploader"></lr-upload-ctx-provider>
2
3<script>
4  const ctxProvider = document.querySelector('lr-upload-ctx-provider')
5  ctxProvider.addEventListener('common-upload-success', event => {
6    const files = event.detail.successEntries
7  })
8</script>

Events names

  • LR_UPLOAD_START and upload-start -> file-upload-start
  • LR_REMOVE and remove -> file-removed
  • LR_UPLOAD_PROGRESS and upload-progress -> common-upload-progress
  • LR_UPLOAD_FINISH and upload-finish -> common-upload-success
  • LR_UPLOAD_ERROR and upload-error -> file-upload-failed
  • LR_VALIDATION_ERROR and validation-error -> file-upload-failed
  • LR_CLOUD_MODIFICATION and cloud-modification -> file-url-changed
  • LR_DATA_OUTPUT and data-output -> change
  • LR_DONE_FLOW and done-flow -> modal-close
  • LR_INIT_FLOW and init-flow -> modal-open

Events upload-error and validation-error are merged into one event file-upload-failed. The event payload OutputFileEntry contains the errors property that contains both the uploading and validation errors.

Event payloads

All the event payloads are changed a lot. See the Events page for more details.

lr-data-output block

If you used lr-data-output block to handle HTML forms, now you need to use lr-form-input block. See the HTML Forms page for more details.

If you used lr-data-output block to handle groups, now you need to use lr-upload-ctx-provider events. See the Events page for more details.

If you used lr-data-output block to handle console debugging output, now you need to use debug attribute on lr-config. See the Options page for more details.

lr-message-box block

This block is removed. Now validation errors are shown inside the File Uploader UI. If you used lr-message-box block inside your custom templates - you need to remove it.