Migration guide for @uploadcare/file-uploader v1.x

BREAKING CHANGES

  • The package name @uploadcare/blocks has been renamed to @uploadcare/file-uploader.
  • The prefix lr- has been replaced to uc- all custom elements.
  • The prefix lr- has been replaced to uc- all attributes.
  • The key LR_WINDOW_KEY to UC_WINDOW_KEY and globalName has been replaced the iife UC instead of LR.
  • The path ./blocks/themes/lr-basic/* has been changed to ./blocks/themes/uc-basic/*.
  • Bundle blocks.min.js is renamed to file-uploader.min.js.
  • Bundle blocks.iife.min.js is renamed to file-uploader.iife.min.js.
  • The method registerBlocks has been renamed to defineComponents.
  • The method connectBlocksFrom has been renamed to loadFileUploaderFrom.

How to migrate

Rename npm package

First, uninstall the old package:

$npm uninstall @uploadcare/blocks

Next, install the new package:

$npm install @uploadcare/file-uploader

Rename imported JS and CSS bundles

Just rename all the imports according to the following table:

Old nameNew name
blocks.min.jsfile-uploader.min.js
blocks.iife.min.jsfile-uploader.iife.min.js
lr-file-uploader-regular.min.jsuc-file-uploader-regular.min.js
lr-file-uploader-regular.min.cssuc-file-uploader-regular.min.css
lr-file-uploader-inline.min.jsuc-file-uploader-inline.min.js
lr-file-uploader-inline.min.cssuc-file-uploader-inline.min.css
lr-file-uploader-minimal.min.jsuc-file-uploader-minimal.min.js
lr-file-uploader-minimal.min.cssuc-file-uploader-minimal.min.css

For example:

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css" >
2
3<script type="module">
4  import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.js";
5  UC.defineComponents(UC);
6</script>
7
8<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
9
10<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>

Rename lr to uc for each custom elements

Update all instances of lr- to uc- in your custom elements. For example:

1FileUploaderRegular.template = /* HTML */ `
2  <uc-simple-btn set="@hidden: isHidden"></uc-simple-btn>
3
4  <uc-modal strokes block-body-scrolling>
5    <uc-start-from>
6      <uc-drop-area with-icon clickable></uc-drop-area>
7      <uc-source-list wrap></uc-source-list>
8      <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" set="onclick: *historyBack"></button>
9      <uc-copyright></uc-copyright>
10    </uc-start-from>
11    <uc-upload-list></uc-upload-list>
12    <uc-camera-source></uc-camera-source>
13    <uc-url-source></uc-url-source>
14    <uc-external-source></uc-external-source>
15    <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
16  </uc-modal>
17
18  <uc-progress-bar-common></uc-progress-bar-common>
19`;

Rename lr to uc for each html attributes

All attributes that used to be rendered with the LR prefix are now UC. The uc-* attribute will always be added to the tag itself. We’ve started using attribute selectors instead of tag selectors to enable styles to be attached to custom extended elements.

For example:

Before:

1<lr-file-uploader-regular lr-wgt-common lr-file-uploader-regular></lr-file-uploader-regular>

After:

1<uc-file-uploader-regular uc-wgt-common uc-file-uploader-regular> </uc-file-uploader-regular>

Update Global Name in IIFE

If you have been using an IIFE, the window object must now be accessed with the key UC instead of LR.

Rename blocks.min.js to file-uploader.min.js

If you previously used to the blocks.min.js bundle, you need to rename it to file-uploader.min.js as follows:

1<script src="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js" async />

Rename blocks.iife.min.js to file-uploader.iife.min.js

If you previously used to the blocks.iife.min.js bundle, you need to rename it to file-uploader.iife.min.js as follows:

1<script src="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.iife.min.js" async />

Rename registerBlocks to defineComponents

If you have installed the File Uploader using *.min.js bundles, you will need to manually call defineComponents as follows:

1<script type="module">
2  import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js";
3  UC.defineComponents(UC);
4</script>

Rename connectBlocksFrom to loadFileUploaderFrom

The was renamed method connectBlocksFrom to loadFileUploaderFrom

1loadFileUploaderFrom('https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.iife.min.js').then(
2  (UC) => {
3    UC.defineComponents(UC);
4    //  ...
5  }
6);