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:

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:

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

1
loadFileUploaderFrom('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
);