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.