Skip to content

Latest commit

 

History

History
1692 lines (1034 loc) · 94.5 KB

CHANGELOG.md

File metadata and controls

1692 lines (1034 loc) · 94.5 KB

1.9.0 (2024-10-04)

Features

  • a11y: added accessible titles to buttons in uc-activity-header (#748) (97f13e3)

1.8.1 (2024-10-02)

Bug Fixes

  • svg-sprite: unneeded icons leak to the uc-basic sprite (#746) (f4decff)

1.8.0 (2024-09-24)

Features

  • cloud-editor increased the capture area for dragging (#741) (47cc087)

1.7.0 (2024-09-19)

Features

  • a11y: added WCAG AAA contrast and high-contrast theme (#739) (82c29e1)

1.6.0 (2024-09-02)

Features

  • a11y: add aria-live attribute to the file item elements to make the uploading status observable by the screen readers (#733) (649db3b)
  • output-file-entry: add source property to the OutputFileEntry object. This property indicated from which upload source the file was added: local, camera, dropbox etc. (#736) (6fe5bcd)

1.5.2 (2024-08-26)

Bug Fixes

1.5.1 (2024-08-21)

Bug Fixes

  • styles: compatibility issues with tailwindcss/forms (#728) (2fb5ca0)

1.5.0 (2024-08-15)

Bug Fixes

  • cloud-image-editor: little memory leak where cloud image editor was holding some references that prevents from context destroying (70a9b2b)

Features

  • a11y: Added title to button (#723) (3090304)
  • public-upload-api: add method getCurrentActivity (3f5b127)
  • public-upload-api: allow to switch activity to the cloud image editor with predefined file opened (ef663fa)

1.4.0 (2024-08-14)

Features

  • theme: add predefined color presets classes (#715) (3dc0b46)

1.3.0 (2024-08-08)

Features

  • remove common progress bar from the regular and inline modes (#721) (f7b8fa7)

1.2.0 (2024-08-01)

Bug Fixes

  • regular-mode: disable done button until group created (#710) (3e30f63)

Features

BREAKING CHANGES:

  • rename package @uploadcare/blocks to @uploadcare/file-uploader
  • method connectBlocksFrom renamed to loadFileUploaderFrom (d083cb7)
  • method registerBlocks renamed to defineComponents (606f8fc)
  • rename all prefixes from lr to uc (#698) (e28f2af)

See the migration guide for details.

0.50.1 (2024-07-16)

Bug Fixes

  • styles: added prefix uc- to className in the js (#700) (672c5c3)

0.50.0 (2024-07-16)

Features

  • async secureDeliveryProxyUrlResolver (#677) (60f06be)

See the secureDeliveryProxyUrlResolver docs for details.

0.49.0 (2024-07-03)

BEAKING CHANGES

  • styles: Added the uc- prefix to all class selectors (#683) (a3929d5).

See the migration guide for details.

0.48.1 (2024-07-02)

Bug Fixes

0.48.0 (2024-07-02)

0.47.0 (2024-07-02)

BEAKING CHANGES

  • Extract public api to the composition class at the Uploader API instance that you can get using getAPI() method of the lr-upload-ctx-provider block. (#676) (ea29dd2).

See the migration guide for details.

0.46.3 (2024-07-01)

Bug Fixes

  • icons: Added currentColor to icon edit-file (#689) (617d3cd)

0.46.2 (2024-07-01)

Bug Fixes

0.46.1 (2024-06-28)

Bug Fixes

  • events: Added status after deleting files in idle (#684) (0e07ee3)

0.46.0 (2024-06-24)

Features

  • Significant improvements to accessibility and keyboard navigation, enhancing user experience and inclusivity (#671) (4acb8a0)

0.45.0 (2024-06-23)

BEAKING CHANGES

  • The previously deprecated API method setUploadMetadata has been removed. Use metadata instance property on lr-config block instead. See metadata for more details.
  • The previously deprecated API method addFiles has been removed. Use addFileFromObject, addFileFromUrl or addFileFromUuid instead. See File Uploader API for more details.

See the migration guide for details.

0.44.0 (2024-06-21)

BEAKING CHANGES

  • All theme variables of the previous version are deprecated and won't affect the look anymore.
  • The default button that opens the uploader dialog (SimpleBtn) component now uses independent variables.
  • By default, the theme now uses OKLCH color space. You can still override it using other color spaces, but we recommend converting your colors to OKLCH.

See the migration guide for details.

Full styling docs are available here.

Features

  • updated theming mechanics with oklch colors and reworked css properties (#662) (ee90e66)

0.43.0 (2024-06-14)

Features

  • added collectionValidators and fileValidators: Custom validators are now supported for collections and files. This enhancement allows for the addition of necessary checks for uploaded files and collections, providing flexibility and control over compliance with requirements (#667) (d3260b0). See docs here.

0.42.1 (2024-05-30)

0.42.0 (2024-05-30)

Features

  • lr-file-uploader-regular: added attribute headless (5e58ff4). See docs here.

0.41.1 (2024-05-27)

Bug Fixes

  • styles-readme: updated connect style in the project (#663) (2ee913f)

0.41.0 (2024-05-24)

Features

  • add secureDeliveryProxyUrlResolver option (c7cfcd0). See docs here.
  • add secureUploadsExpireThreshold option (0d9205d). See docs here.
  • add secureUploadsSignatureResolver option (226d36f). See docs here.

0.40.0 (2024-05-17)

BREAKING CHANGES

  • Icons are moved from CSS custom properties to SVG sprites. Overriding icons is now done via the iconHrefResolver option. See the migration guide for details.

Bug Fixes

  • image-editor: check for imageSize before commit (cdb87b4)
  • image-editor: define icons size via css (080439f)

Features

  • load svg icons as sprite (9cf4c07)

0.39.1 (2024-05-15)

Bug Fixes

  • l10n: add l10n key to the state if it's not present (#656) (227a88f)

0.39.0 (2024-05-07)

Features

  • shadow-styles: eliminating shadow styles (#646) (984dbda)

0.38.3 (2024-05-07)

Bug Fixes

  • lr-config: normalize DOM property values (#653) (5aa55c2)

0.38.2 (2024-04-29)

Bug Fixes

  • config: dont bind complex config options to the attributes (#650) (310c728)

0.38.1 (2024-04-29)

Bug Fixes

  • upload-list: set fixed modal container width to avoid bouncy width (could lead to some l10n ui width glitches but we're ok with them) (#648) (167af55)

0.38.0 (2024-04-25)

BREAKING CHANGES

  • CSS configuration deprecated in v0.25.0 is removed. See the migration guide for v0.25.0 for more details.
  • Localizations are removed from CSS.
    Now we have a special API defineLocale, and locale-name and locale-definition-override options. See the migration guide for more details.

0.37.0 (2024-04-15)

Bug Fixes

  • activity switch races (#643) (fe365da)
  • define config DOM property accessors on the class prototype to make it compatible with framework bindings (#638) (d47baf0)

Features

  • added export UID from @symbiotejs/symbiote (#636) (9666f21)

0.36.0 (2024-03-21)

Bug Fixes

  • don't try to open empty modal on mobile when camera is the only source (#634) (1bc4f5d)

Features

0.35.2 (2024-03-08)

Bug Fixes

  • image-shrink: fallback algo on Firefox and iOS (#630) (066cfca)

0.35.1 (2024-03-07)

Bug Fixes

  • improve uploading progress animation (#628) (a1db063)

0.35.0 (2024-03-07)

Bug Fixes

  • minimal: open system dialog on add more button (#626) (0098600)

Features

0.34.0 (2024-03-05)

Bug Fixes

  • show camera system dialog when camera is the only source (95f0287)
  • specify camera input accept attribute value as simple image/* to prevent OS to show unrelated sources (video/audio) (5ecacba)
  • switch camera source output format to JPEG to make it shrinkable (6da4212)

Features

  • add cameraCapture option to specify inpit capture attribute value (9a77057)
  • lr-upload-ctx-provider: add method addFileFromCdnUrl to add already uploaded files with predefined cdn url modifiers (#617) (8043d08)
  • lr-upload-ctx-provider: add method removeFileByInternalId (#618) (c2492eb)

0.33.2 (2024-02-20)

Bug Fixes

  • set cdnUrlModifers default to empty string after file upload (#613) (7113058)

0.33.1 (2024-02-20)

Bug Fixes

  • shadow-wrapper: wait for shadowStyles load before calling shadowReadyCallback (#611) (42b73b7)

0.33.0 (2024-02-16)

Bug Fixes

  • progress calculation errors when file is removed during uploading (#606) (74769ce)

Features

  • Add image shrink to the uploader (e2b0896). See docs here

0.32.4 (2024-02-15)

Bug Fixes

  • cloud-image-editor: disable image enter transition (2abe55f)
  • cloud-image-editor: weird ui glitches when updating cdnUrl on change (c264c64)

0.32.3 (2024-02-13)

Bug Fixes

0.32.2 (2024-02-12)

Bug Fixes

  • form-input: do not append [] postfix to input name when multiple is falsy (#602) (4722c4d)

0.32.1 (2024-02-06)

Bug Fixes

  • bump upload-client to fix large groups uploading (#599) (cb61448)

0.32.0 (2024-02-05)

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 migration guide for more details.
  • All existing events and their payloads are changed. See the migration guide for more details.
  • lr-data-output block is removed.
    • To handle HTML forms you need to use lr-form-input block.
    • Groups output moved to the lr-upload-ctx-provider events
    • Console debugging output now enabled with the debug attribute on lr-config
  • lr-message-box block is removed.

See the migration guide for more details.

0.31.1 (2024-01-30)

Bug Fixes

  • image-editor: fix flip operation serialization (#595) (140df3a)

0.31.0 (2024-01-29)

Bug Fixes

Features

0.30.9 (2024-01-18)

Bug Fixes

  • cloud-image-editor: ignore unsupported cdn operations and print console warning (#587) (503eaae)
  • external-source: disallow to select multiple files when multiple mode is off (#589) (d5c43cd)

0.30.8 (2023-12-29)

Bug Fixes

  • shadow-wrapper: do not call success callback on the second css-src attribute change (#583) (eb9618a)

0.30.7 (2023-12-27)

Features

  • lr-img: Do not append -/format/auto/ and -/quality/smart/ by default to the resulting CDN URL. Now, the defaults of these settings are preserved within the project settings on the dashboard. See the release notes for the Auto formatting and CDN updates.

Bug fixes

  • lr-img:: Ignore breakpoints config when applying image-set for the background image using is-background-for option.

0.30.6 (2023-12-20)

Bug Fixes

  • upload-ctx-provider: execute destroy context callback async to ensure all sync callbacks are run (#575) (cbb9a21)

0.30.5 (2023-12-07)

Bug Fixes

  • activity-block: check for the *modalActive key presence in state before subscribing it (0e50b4f)
  • destroy upload collection when the last block in context is being destroyed (42e501a)

0.30.4 (2023-12-06)

Bug Fixes

  • activity: run activity deactivation callback when modal became closed (2e84268)
  • cloud-image-editor: do no try to update image when element is disconnected from DOM (1b417a9)
  • cloud-image-editor: init *tabId global state key in the main editor block instead of deeper toolbar block (511d3e1)
  • start-from: add missing scroll area (680a282)
  • window-height-tracker: prevent infinite loop (7576ece)

0.30.3 (2023-12-04)

Bug Fixes

  • block: destroy both local and global contexts (bdd4a33)
  • cloud-image-editor: destroy context (deb9d25)
  • config: do not overwrite config values inside context (c1f6a0f)
  • drop-area: destroy global registry context if there are no items inside (ad89e56)
  • img: destroy context (05ba451)
  • typed-collection: destroy context (a7c136d)
  • upload-collection: destroy upload collection (bcc4d46)

0.30.2 (2023-12-01)

Bug Fixes

  • start-from: styles (#566) (7367b1d)
  • upload-ctx-provider: run parent init callback before accessing event emitter (#565) (a313c5c)

0.30.1 (2023-11-30)

Bug Fixes

0.30.0 (2023-11-14)

  • drop-area: show pointer on clickable drop areas (6990cd4)

Features

  • add cancel button on the start from activity (#554) (44bd845)
  • move global events to the lr-upload-ctx-provider scope (c452eeb)

0.29.1 (2023-10-31)

Bug Fixes

  • modal: buggy click handlers to close modal on outside click (#551) (8949948)
  • types: bump @uploadcare/upload-client with fixed types for imageInfo.datetimeOriginal (#550) (8babfab)

0.29.0 (2023-10-27)

Features

  • add property fullPath to the output entry (9e4707f)
  • pass output entry to the metadata callback (9153826)
config.metadata = (fileEntry) => ({
  type: 'cat',
  fileName: fileEntry.name,
  fullPath: fileEntry.fullPath,
});

0.28.0 (2023-10-26)

BREAKING CHANGES

LR_DATA_OUTPUT event on window

Before: The LR_DATA_OUTPUT event only contained uploaded files and fired only when a file was uploaded, deleted, or edited.

Now: The LR_DATA_OUTPUT event now includes all the files in the upload list, including those not yet uploaded, and it fires whenever there is any change in the file list. The event firing is debounced with a 100ms delay. So, in this event, you receive a complete snapshot of the upload list's state. *Please note that if the file hasn't been uploaded yet, the data will be incomplete. Properties such as uuid, cdnUrl and others will not be accessible. Before accessing them, you should check the isUploaded flag, which is described below.

window.addEventListener('LR_DATA_OUTPUT', (e) => {
  const entries = e.detail.data;
  for (const entry of entries) {
    if (entry.isUploaded) {
      console.log('Uploaded', entry.uuid);
    } else {
      console.log('Not uploaded', entry.uploadProgress);
    }
  }
});
  • make LR_DATA_OUTPUT event frequent and contain all the files (69105e4)

lr-data-output event on lr-data-output block (tag)

Before: The lr-data-output event mirrors the LR_DATA_OUTPUT event. When the group-output option is enabled or the use-group attribute is present, it always creates a group for the file list.

Now: The lr-data-output event mirrors the LR_DATA_OUTPUT event. When the group-output option is enabled or the use-group attribute is present, a group is only created if all files are uploaded, and there are no validation errors. Otherwise, the event contains undefined groupData and a list of files.

Features

New file properties for the events payload

The following events are affected:

  • LR_DATA_OUTPUT
  • LR_UPLOAD_FINISH
  • LR_REMOVE
  • LR_UPLOAD_START
  • lr-data-output

What file properties have been added:

validationErrorMessage: string | null; // message with the validation error
uploadError: Error | null; // error object with the upload error
file: File | Blob | null; // file object
externalUrl: string | null; // external URL for the file (when uploading from URL or external source)
isValid: boolean; // is file valid (passed validation checks)
isUploaded: boolean; // is file uploaded
uploadProgress: number; // upload progress in percents
  • add new properties to the output file entry (2821bf3)

lr-data-output now uses native validation to show errors

  • lr-data-output: improve native form validation (c329d4c)

Bug Fixes

  • lr-config: validate passed settings (6012581)
  • show inline validation message for the multiple-min requirement check fail (8af0fec)

0.27.6 (2023-10-20)

Bug Fixes

  • minimal-mode: add file button should open system dialog (#544) (366d524)

0.27.5 (2023-10-19)

Bug Fixes

  • types: add missing LR_CLOUD_MODIFICATION JSX type (#542) (3307b25)

0.27.4 (2023-10-12)

Bug Fixes

  • require ctx-name attribute for all the public blocks and wait for it with 300ms timeout (11d5a94)

0.27.3 (2023-10-10)

Bug Fixes

  • cloud-image-editor: make crop-preset and tabs attributes reactive (8545c71)
  • uploader: append preview operation when setting initial crop with crop-preset defined (5f1036c)

0.27.2 (2023-10-10)

Bug Fixes

  • capture and store file's full path while getting drag'n'dropped (#536) (3ba168e)

0.27.1 (2023-10-06)

Bug Fixes

  • init-flow: fix sync initFlow calls right after upload collection (#532) (f4f4dea)

0.27.0 (2023-10-06)

Bug Fixes

  • drag-n-drop: do not show drop cursor when it's not over the drop target (05a08dc)

Features

  • simple-btn: add flag to toggle drop-zone (5f4fae2)

Example:

class CustomSimpleBtn extends LR.SimpleBtn {
  dropzone = false;
}

LR.registerBlocks({ ...LR, SimpleBtn: CustomSimpleBtn });

or

<lr-simple-btn dropzone="false"></lr-simple-btn>

0.26.0 (2023-10-03)

Features

New option cloudImageEditorTabs

Defines the list of tabs in the cloud image editor. See the configuration reference for more details.

  • cloud-image-editor: add ability to hide unnecessary editor tabs (crop, tuning or filters) (af15f51)

New option cropPreset

Defines the crop behavior. When uploading images, your users can select a crop area with defined aspect ratio. See the configuration reference for more details.

  • cloud-image-editor: add crop preset setting (923f4ca)
  • uploader: force defined aspect ration for the output images (26eda66)

Fixes

  • external-sources: add files to the upload list after done button click (0089370)

0.25.6 (2023-09-01)

Bug Fixes

  • types: shadow wrapper static fields mixin (#522) (a65435c)

0.25.5 (2023-08-28)

Bug Fixes

  • types: events types export for angular projects (#518) (daf3c2c)

0.25.4 (2023-08-08)

Bug Fixes

  • add-file-from: handle upload collection initial state when called before initialization (6f932d3)
  • inline: show upload list if there are any file in the list (96e44e6)
  • minimal: show upload list if there are any file in the list (174c4a7)

0.25.3 (2023-08-08)

Bug Fixes

  • minimal: add exports of lr-config and upload-ctx-provider (#506) (8049e6f)

0.25.2 (2023-08-07)

0.25.1 (2023-07-24)

Bug Fixes

  • cloud-image-editor: fix initEditor type (#502) (6c222d5)

0.25.0 (2023-07-24)

BREAKING CHANGES

  1. Configuration in CSS is now deprecated. Although it currently works, it will be removed shortly. In lieu of this, we are introducing a new lr-config block for configuration definitions.

  2. The css-src attribute is now required on solution blocks. This implies that the use of Shadow DOM is enforced.

  3. The ctx-name attribute is required for the each block on the page.

  4. Method setUploadMetadata is deprecated in favour of metadata DOM property on the lr-config block.

  5. CloudEditor (lr-cloud-editor) solution block is renamed to CloudImageEditor (lr-cloud-image-editor).

  6. CloudImageEditor (lr-cloud-image-editor) activity is was renamed to CloudImageEditorActivity (lr-cloud-image-editor-activity).

  7. All solution bundles are prefixed with lr- prefix:

  • file-uploader-regular.min.js -> lr-file-uploader-regular.min.js
  • file-uploader-regular.min.css -> lr-file-uploader-regular.min.css
  • file-uploader-inline.min.js -> lr-file-uploader-inline.min.js
  • file-uploader-inline.min.css -> lr-file-uploader-inline.min.css
  • file-uploader-minimal.min.js -> lr-file-uploader-minimal.min.js
  • file-uploader-minimal.min.css -> lr-file-uploader-minimal.min.css
  1. Solution bundles do not automatically register blocks. You will need to manually register them:
import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.js';

LR.registerBlocks(LR);
  1. Bundle blocks.iife.js is renamed to blocks.iife.min.js.

  2. Bundle blocks-browser.min.js is deprecated. Use blocks.iife.min.js instead.

How to migrate

This migration guide is also available at: https://uploadcare.com/docs/file-uploader/migration-to-0.25.0/

Configuration

First and foremost, you need to shift all the configuration from CSS to the lr-config block. For instance, if you have the following CSS:

.config {
  --ctx-name: 'my-uploader';
  --cfg-pubkey: 'YOUR_PUBLIC_KEY';
  --cfg-multiple-min: 0;
  --cfg-multiple-max: 3;
}

Move it to the lr-config block:

<lr-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY" multiple-min="0" multiple-max="3"></lr-config>

Subsequently, you should link your solution block to the lr-config block using the ctx-name attribute:

<lr-file-uploader-regular
  ctx-name="my-uploader"
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>

The property names remain the same but without the --cfg prefix. For example, --cfg-pubkey becomes simply pubkey.

See the [configuration reference][file-uploader-configuration] for more details.

Dynamic configuration updates

If you have dynamically updated CSS configuration like this:

const uploader = document.querySelector('lr-file-uploader-regular');
uploader.style.setProperty('--cfg-pubkey', 'YOUR_PUBLIC_KEY');

const uploaderCtx = document.querySelector('lr-upload-ctx-provider');
uploaderCtx.updateCtxCssData();

You need to update it to the following:

const config = document.querySelector('lr-config');
config.setAttribute('pubkey', 'YOUR_PUBLIC_KEY'); // using attribute
config.pubkey = 'YOUR_PUBLIC_KEY'; // or using DOM property

Both attributes and DOM properties are reactive so you don't need to call updateCtxCssData anymore.

Shadow DOM and css-src

Shadow DOM is now enforced for all the solution blocks. It means that you need to use css-src attribute to attach CSS to the block.

If you previously attached CSS to the global like this:

<link href="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.css" rel="stylesheet" />

<lr-file-uploader-regular class="lr-wgt-common"></lr-file-uploader-regular>

You need to use css-src attribute instead:

<lr-file-uploader-regular
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>

(Other attributes are omitted for brevity)

ctx-name attribute

ctx-name attribute is required for all the blocks now even if you have only one block on the page. It's used to wire blocks to the lr-config block. For example:

<lr-config ctx-name="my-uploader"></lr-config>
<lr-file-uploader-regular ctx-name="my-uploader"></lr-file-uploader-regular>
<lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>
<lr-data-output ctx-name="my-uploader"></lr-data-output>

(Other attributes are omitted for brevity)

Replace setUploadMetadata with metadata DOM property

If you was using setUploadMetadata method like this:

uploaderCtxProvider.setUploadMetadata({ foo: 'bar' });

You need to replace it with metadata DOM property on the lr-config block:

const config = document.querySelector('lr-config');
config.metadata = { foo: 'bar' };
// or
config.metadata = () => Promise.resolve({ foo: 'bar' });

See the [configuration reference][file-uploader-option-metadata] for more details.

Rename CloudEditor -> CloudImageEditor

If you was using standalone lr-cloud-editor solution block, you need to rename it to lr-cloud-image-editor like this:

<lr-cloud-image-editor
  uuid="7c167b79-9f27-4489-8032-3f3be1840605"
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-cloud-image-editor.min.css"
  ctx-name="my-editor"
></lr-cloud-image-editor>

Rename CloudImageEditor -> CloudImageEditorActivity

If you was using lr-cloud-image-editor activity block inside your custom Symbiote.js templates, you need to rename it to lr-cloud-image-editor-activity like this:

FileUploaderRegular.template = /* HTML */ `
  <lr-simple-btn></lr-simple-btn>

  <lr-modal strokes block-body-scrolling>
    <lr-start-from>
      <lr-drop-area with-icon clickable></lr-drop-area>
      <lr-source-list wrap></lr-source-list>
      <lr-copyright></lr-copyright>
    </lr-start-from>
    <lr-upload-list></lr-upload-list>
    <lr-camera-source></lr-camera-source>
    <lr-url-source></lr-url-source>
    <lr-external-source></lr-external-source>
    <lr-cloud-image-editor-activity></lr-cloud-image-editor-activity>
    <!-- here it is -->
  </lr-modal>

  <lr-message-box></lr-message-box>
  <lr-progress-bar-common></lr-progress-bar-common>
`;

Rename imported JS and CSS bundles

Just rename all the imports according to the following table:

Old name New name
file-uploader-regular.min.js lr-file-uploader-regular.min.js
file-uploader-regular.min.css lr-file-uploader-regular.min.css
file-uploader-inline.min.js lr-file-uploader-inline.min.js
file-uploader-inline.min.css lr-file-uploader-inline.min.css
file-uploader-minimal.min.js lr-file-uploader-minimal.min.js
file-uploader-minimal.min.css lr-file-uploader-minimal.min.css

For example:

<script type="module">
  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/file-uploader-regular.min.js';
  LR.registerBlocks(LR);
</script>

<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/web/file-uploader-regular.min.css"
></lr-file-uploader-regular>

Became:

<script type="module">
  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.js';
  LR.registerBlocks(LR);
</script>

<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/web/lr-file-uploader-regular.min.css"
></lr-file-uploader-regular>

Call registerBlocks manually

If you have installed blocks using min.js bundles, you need to call registerBlocks manually:

<script type="module">
  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/lr-file-uploader-regular.min.js';
  LR.registerBlocks(LR);
</script>

Rename blocks.iife.js to blocks.iife.min.js

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

<script src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/blocks.iife.min.js" async />

Rename blocks-browser.min.js to blocks.iife.min.js

If you were using the connectBlocksFrom method in conjunction with the blocks-browser.min.js bundle, you need to rename it to blocks.iife.min.js, as shown below:

connectBlocksFrom('https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/blocks.iife.min.js').then((LR) => {
  LR.registerBlocks(LR);
  //  ...
});

If you were using blocks-browser.min.js via a script tag with type="module", you need to rename it to blocks.min.js, as shown below:

<script type="module">
  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/blocks.min.js';

  LR.registerBlocks(LR);
</script>

If you were using blocks-browser.min.js via a script tag without type="module", you need to rename it to blocks.iife.min.js, as shown below:

<script src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks/web/blocks.iife.min.js" async />

0.24.2 (2023-07-20)

Changes

  • update readme

0.24.1 (2023-06-27)

Bug Fixes

  • url-source: enable input autofocus, form submit, value clear on submit (#495) (552cad3)

0.24.0 (2023-06-21)

Bug Fixes

  • drag-n-drop: copy type value from DataTransferItem to FileSystemFileEntry when doing drag'n'drop because FileSystemFileEntry don't resolve type for HEIC (832ed55)
  • get mimeType from upload API from both contentInfo and provided type (33cf2f7)
  • validation: skip client validation if mime type or file name aren't available (0d7a96f)

Features

  • add icons for flickr, evernote, box, onedrive, huddle (#490) (30ae37d)

0.23.0 (2023-06-14)

Features

  • add uploadAll method to trigger upload (db69508)
  • add separate addFileFromUrl, addFileFromUuid and addFileFromObject (b5a89c4)

Deprecations

  • method addFiles is deprecated in favour of addFileFromUrl, addFileFromUuid and addFileFromObject above

API

// `silent` option supresses `LR_UPLOAD_FINISH` event
// `fileName` options specifies file name
uploaderCtx.addFileFromUrl(url: string, { silent?: boolean, fileName?: string } = {});
uploaderCtx.addFileFromUuid(uuid: string, { silent?: boolean, fileName?: string } = {});
uploaderCtx.addFileFromObject(file: File, { silent?: boolean, fileName?: string } = {});

// Trigger uploading. Useful with `--cfg-confirm-upload: 1;` to force uploading predefined files.
uploaderCtx.uploadAll();

0.22.13 (2023-06-14)

Bug Fixes

0.22.12 (2023-06-09)

Features

  • add IIFE bundle web/blocks.iife.js (#480)

0.22.11 (2023-06-08)

Bug Fixes

  • skip validation if no allowed file types provided (#477) (e241993)

0.22.10 (2023-06-08)

Bug Fixes

  • file-item: --cfg-img-only for external sources causing error (#475) (479db7b)

0.22.9 (2023-06-05)

Bug Fixes

  • copyright: not working --cfg-remove-copyright config option (#473) (e925c7b)

0.22.8 (2023-05-31)

Bug Fixes

  • make file extension validation case-insensitive (#471) (ae87b6b)

0.22.7 (2023-05-29)

Bug Fixes

0.22.6 (2023-05-26)

Bug Fixes

  • cloud-editor: init editor on initCallback instead of connectedCallback to prevent cases when editor init is going before the block init (#467) (f6d92fd)

0.22.5 (2023-05-26)

Bug Fixes

  • do not use host-context unsupported in firefox and safari (7ab7a98)

0.22.4 (2023-05-23)

Bug Fixes

  • file-item: do not validate local files if no mime type provided (this is the case for drag'n'dropped HEICs) (e47497e)
  • file-item: validate file extensions along with the mime types (b89ea0e)

0.22.3 (2023-05-19)

Features

  • external-source: configurable social base url (0cd7f94)

Bug Fixes

  • drop-area: fix detection of the active dropzone (97dbb32)
  • drop-area: prevent flickering on file being dragged before init (72b76a7)
  • file-uploader-inline: update missing init$ usage that was leading to crash (51a7b10)

0.22.2 (2023-05-17)

Bug Fixes

  • add empty export to the blocks-browser bundle to fix working under isolatedModules (#451) (683fb2b)
  • cloud-editor: extend from ShadowWrapper (3c518a5)
  • cloud-editor: solution bundle (89ad5af)

0.22.1 (2023-05-15)

Bug Fixes

  • copyright: hide whole lr-copyright block if it's disabled (2550d20)
  • get rid of ctxOwner flag due to it's buggy behaviour (6c5f374)

0.22.0 (2023-05-12)

Bug Fixes

  • file-item: error while rewoke thumb (9dc73ff)
  • progress-bar-common: ignore pointer events when not active (e6ddbf6)
  • Don't show block re-registration warnings for the same block components

Features

  • Run upload requests in the queue (ed9d6de)

0.21.7 (2023-05-03)

Bug Fixes

  • bump @uploadcare/upload-client to fix issues with Buffer polyfilling by CDNs (esm.sh, skypack) (#442) (afd1d7d)

0.21.6 (2023-04-28)

Bug Fixes

  • file-uploader-inline: add flex: 1 css property to fill all available space inside flex column container (#439) (a781d20)
  • package.json: add types to exports field (#440) (718f432)

0.21.5 (2023-04-27)

Bug Fixes

  • file-uploader-inline: set init context (#437) (81031a7)

0.21.4 (2023-04-27)

Bug Fixes

  • file-uploader-inline: do not try to hide drop area because it's hides itself (#435) (4f11007)

0.21.3 (2023-04-27)

Bug Fixes

  • modal: restore scroll lock on modal destroy (#433) (70fad11)

0.21.2 (2023-04-27)

Bug Fixes

  • jsx: add missing lr-file-uploader-inline tag (#431) (a15cc28)

0.21.1 (2023-04-25)

Bug Fixes

  • activity-block: reset current activity (e72f15c)
  • activity-header: button colors in the darkmode (6c29b47)
  • block: update css data when block is connected to the DOM only (23a99e2)
  • drop-area: disable and hide drop area if local sources are not allowed (cf6bc8a)
  • external-source: reactive style updates (bb6838b)
  • message-box: reduce background lightness in the darkmode (221bd05)
  • shadow-wrapper: prepend css-src style instead of append to make easier to override styles via shadowStyles (7941e40)
  • simple-btn: safari icon fractional scaling (4400acd)
  • solutions: export LR from web bundles (d5e718c)
  • source-list: update children when source list is empty (75cbbd4)
  • stub package exports for SSR (d528184)
  • upload-list: do not try to handle file collection update while being disconnected from DOM (ef6f101)

0.21.0 (2023-04-19)

Features

  • add --cfg-external-sources-preferred-types option to configure preferred mime types for the external sources (1d4e645)

0.20.1 (2023-04-11)

Bug Fixes

  • bundle stubbed jsx types to npm package (#414) (98de315)

0.20.0 (2023-04-10)

Bug Fixes

  • file-item: make ui reactive to css data (5d64a05)
  • simple-btn: prevent dropzone flickering on initial render (82d9c1d)
  • types: add type stub for lr-upload-ctx-provider (560502f)
  • uploader-block: add missing external source types to the UploaderBlock's sourceTypes static property (0a7c2fc)

Features

  • add --cfg-remove-copyright option (e128953)
  • block: add method updateCtxCssData to update css data for all the blocks in the context (5a89749)

0.19.0 (2023-03-10)

Bug Fixes

  • cloud-editor: refetch image on container resize (67ea66f)

Features

  • cloud-editor: use resize observer to wait for non-zero container size (5686965)

0.18.1 (2023-03-09)

Bug Fixes

  • docs: set cloud-editor examples body height (#398) (690760e)
  • lr-data-output: create dynamic inputs container even if input-required is not defined (#401) (cdfce56)

0.18.0 (2023-02-17)

Bug Fixes

  • modal: backdrop color definition (d8fcf51)
  • modal: do not manipulate open attr if dialog is supported (4a286b9)

Features

  • data-output: add input-required attribute (0fb1370)
  • file-uploader-minimal: include lr-data-output to the bundle (a6e7802)

0.17.1 (2023-02-14)

Bug Fixes

  • cloud-image-editor: get rid of change event double initial calling (#386) (0cc0b00)

0.17.0 (2023-02-08)

Bug Fixes

  • cloud-image-editor: dispatch events with bubble and composed flags (58733c4)
  • cloud-image-editor: fix extraction of filter operation with undefined value (351b080)
  • cloud-image-editor: pause render until container get non-zero size (1e5a4a8)

Features

  • cloud-image-editor: Add change event (1fff5fb)

0.16.1 (2023-02-06)

Bug Fixes

  • do not call init flow without user interaction (#380) (be100a5)
  • file-uploader-inline: show back button (#381) (cb83ebe)

0.16.0 (2023-02-03)

Bug Fixes

  • file-uploader-inline: hide close button (4026508)

Features

  • add LR_DONE_FLOW and LR_INIT_FLOW events (b5828ad)

0.15.2 (2023-02-03)

Bug Fixes

  • upload-list: undefined files count in the header (#376) (c897986)

0.15.1 (2023-02-02)

Bug Fixes

  • file-item: dont show edit button if --cfg-use-cloud-image-editor flag is false (#374) (85d79bb)

0.15.0 (2023-01-31)

We are excited to announce the launch of a brand-new design. This new design offers a more modern look and feels, making it easier and faster to use. We have also made several other UI improvements, such as improved navigation and a better overall user experience. We hope you enjoy the new design and experience.

Breaking changes

If you haven't used custom templates, then there shouldn't be any breaking changes for you.

If you're using custom templates, you will need to update them to comply with the new version's default template.

  • Content of <lr-start-from /> component was modified
  • <lr-confirmation-dialog /> was removed

Here is the basic template for the <lr-file-uploader-regular /> component:

<lr-simple-btn></lr-simple-btn>

<lr-modal strokes block-body-scrolling>
  <lr-start-from>
    <lr-drop-area with-icon clickable></lr-drop-area>
    <lr-source-list wrap></lr-source-list>
    <lr-copyright></lr-copyright>
  </lr-start-from>
  <lr-upload-list></lr-upload-list>
  <lr-camera-source></lr-camera-source>
  <lr-url-source></lr-url-source>
  <lr-external-source></lr-external-source>
  <lr-cloud-image-editor></lr-cloud-image-editor>
</lr-modal>

<lr-message-box></lr-message-box>
<lr-progress-bar-common></lr-progress-bar-common>

Bug Fixes

  • image-editor: restore transformations state from the cdn url (32b1858)
  • shadow-wrapper: hide container until css load (ef9c552)
  • specify image types for file input capture accept, fixes Firefox on Android (99b5f4f)

Features

  • allow custom pluralizers (62ecffb)
  • do not confirm upload list clearing (c90c57a)
  • show cloud editor instead of upload details (036be6c)
  • drop-area: fullscreen mode
  • upload-list: show upload errors inside file item

0.14.3 (2022-12-20)

Bug Fixes

  • data-output: pass files or group URL to the hidden input (160b08f)
  • events: emit LR_DATA_OUTPUT on image edit (fa30140)
  • events: pass the whole file info object to to the LR_CLOUD_MODIFICATION event (38440bd)
  • single source behaviour (#343) (d2929de)

0.14.2 (2022-11-22)

Bug Fixes

  • wrap ::backdrop with :is to prevent ignoring from unsupported browsers (#332) (e3ef691)

0.14.1 (2022-10-26)

Bug Fixes

  • fix processing escaped css property values in Firefox

0.14.0 (2022-10-26)

Bug Fixes

  • external-source: prevent iframe height overflow (4fc669b)
  • store: set store to auto by default (464a5ce)

Features

  • Block: use real window height instead of 100vh (577981e)
  • camera-source: show user media denied error to the user (b4d167d)
  • modal: use native dialog element & close modal on outside click (5ec02e0)

0.13.0 (2022-10-17)

Bug Fixes

  • drop-area: open modal on files drop (6c112a8)

Features

  • simple-button: show drop area on files drag (25fa023)

0.12.4 (2022-10-11)

Bug Fixes

  • modal: disable stroked backdrop by default (970b590)

0.12.3 (2022-10-10)

Bug Fixes

  • register-blocks: remove optional chaining usage (935c8f3)

0.12.2 (2022-10-08)

Bug Fixes

  • connect-blocks-from: remove optional chaining usage (f93ab07)

0.12.1 (2022-10-05)

Bug Fixes

  • file-item: cancel debounced thumb generation on element disconnect (#294) (7371335)

0.12.0 (2022-10-03)

Bug Fixes

  • count blocks number in the registry and unobserve upload collection when there are no any registred blocks (9134f9b)
  • file-uploader-minimal: add missing translations (#291) (2ee8964)

Features

  • add export of ShadowWrapper (6fedc7c)

0.11.1 (2022-09-28)

Bug Fixes

  • file-item: check file mime type before upload (0ced1ef)
  • file-item: check for allowed mime types list length before match (16cabec)
  • file-item: do not handle empty mime types (3ce3e95)
  • file-item: skip isImage check for the external files before upload (7f19457)
  • uploader-block: fix array destructuring mistake (09d57f6)

0.11.0 (2022-09-26)

Bug Fixes

  • lr-image: return data: and blob: sources as is (e83518b)
  • lr-image: set provided custom cdn-cname when uuid attr passed (ff04d93)
  • svg image preview rendering in firefox (1231951)

Features

  • lr-image: don't proxify already uploaded images (4d0dc0d)

0.10.3 (2022-09-23)

Bug Fixes

  • file-item: uploading from external url (typo) (#281) (ed5c741)
  • unobserve upload collection on destroy (#282) (2c871e1)

0.10.2 (2022-09-22)

Bug Fixes

  • external-source: disable done button when no files selected (#278) (7ae584f)

0.10.1 (2022-09-20)

Bug Fixes

  • file-item: prevent flickering (d04ec9d)
  • file-item: regenerate thumb on image edit (15e567d)
  • rework history (f7e39f9)
  • upload-list: do not close modal automatically if --cfg-confirm-upload enabled (68f3e93)

0.10.0 (2022-09-19)

Bug Fixes

  • file-item: calculate state in the single place (8eb5f6e)
  • file-item: proper request abort, restore state on new entry, optimize thumb generation (60038f2)
  • upload-list: enable Upload button if any file isn't started uploading (9b980c4)
  • uploader-block: do not history back if no any files in the collection (34bbb7e)

Features

  • typed-collection: check type with instanceof (409feec)
  • typed-collection: notify subscribers about added and removed items (624c282)

0.9.4 (2022-09-13)

Bug Fixes

  • do not use structuredClone due to unsupport in safari <= 15.3 (#257) (8708b08)
  • message-box: specify text-align for message (#254) (2561eb6)

0.9.3 (2022-09-09)

Bug Fixes

  • abort uploading on item remove (c53d730)
  • core: deep clone shared initial state before use it (f48e7f3)
  • file-uploader-minimal: add missing icons (91f08b4)
  • file-uploader-minimal: do not show empty list (15c1fb4)
  • upload-list: do not call upload done callback on empty list (522a8cb)
  • upload-list: wrong scrollable content height on safari 15.3 (#248) (60573d8)

0.9.2 (2022-09-02)

0.9.1 (2022-08-31)

Bug Fixes

  • DropArea > prevent activity change on empty list (f65806e)

0.9.0 (2022-08-31)

Bug Fixes

0.8.1 (2022-08-26)

Bug Fixes

  • cloud-image-editor: errors while edit image multiple times (#232) (743220d)
  • ctx-owner rendering issue (React) (0365765)

0.8.0 (2022-08-23)

Bug Fixes

  • #BLOCKS-130 (165d9d2), closes #BLOCKS-130
  • data output call bound to upload state and uploaded items removal + lr-img fix (863fe99)
  • double slash bug with --cfg-cdn-cname trailing slash (6a121c9)
  • merge issues (ba48502)
  • modal layout in Safari (52bbc4a)
  • TS error (f0babf1)

Features

  • add clickable attribute to DropArea (d486788)
  • connectBlocksFrom added (4c80a97)
  • custom base upload URL support (6d03fd1)
  • drag-n-drop page img (0ec0e69)
  • lr-drop-area is-image validation support (3bc8ae5)
  • workflow evens (7709a1d)

0.7.2 (2022-08-11)

0.7.1 (2022-08-04)

Bug Fixes

  • file-uploader-minimal: ensure current activity is always present (33ee804)

0.7.0 (2022-08-04)

Bug Fixes

  • cloud-editor: create own context (db97b19)
  • data-output: do not set value property (88c5deb)
  • file-item: call IntersectionObserver.unobserve in the right places (3216ad7)
  • move TypedCollection and TypedData from symbiote to our repo (#211) (eb99ce7)
  • specify side-effects for .css files (#210) (30d7e51)
  • use zero specific css selectors for common classes to allow user to override styles (#209) (959931b)
  • volume range behavior (aede13b)

Features

  • add --cfg-user-agent-integration option (75eebf0)
  • lr-video stage 1 (626d5b6)

0.6.0 (2022-07-14)

Bug Fixes

Features

  • img: proxify image load and error events (#202) (7350c97)

0.5.2 (2022-07-07)

Bug Fixes

  • camera label (287700f)
  • empty camera labels return on some platforms (d66b471)

0.5.1 (2022-07-06)

Bug Fixes

  • camera-source with symbiote updated (5d136e4)

0.5.0 (2022-07-06)

Bug Fixes

Features

0.4.1 (2022-06-29)

Bug Fixes

  • add missing FileUploaderInline export (1fa0888)
  • bump upload-client version (5b1df67)
  • cloud-editor: do not initialize --cfg-cdn-cname with empty string (07a770b)

0.4.0 (2022-06-22)

Bug Fixes

Features

0.3.0 (2022-06-15)

Bug Fixes

  • add type=button to all the buttons to prevent form submit (e681ca5)
  • FileItem: error icon (094eb7b)
  • TS fix (72f6a91)
  • upload-details: handle not-uploaded images and clear canvase before preview render (d522818)
  • upload-details: render preview image with format/auto and preview operations (7c30d29)
  • upload-details: show/hide cloud edit button properly (b2efe40)

Features

  • add --cfg-cdn-cname option (#154)
  • add --cfg-preview-proxy option state (#157)
  • add --cfg-secure-expire and --cfg-secure-signature (#156)
  • cloud-image-editor: add separate config for the solution (f6b1726)
  • Img: secure delivery support (a14baa1)
  • optional grouping output support (3f9b23c)
  • passthrough upload-client options (80c2226)

0.2.0 (2022-05-17)

Bug Fixes

Features

0.1.3 (2022-04-27)

Bug Fixes

  • uc-image breakpoint duplicates (8d3b542)

0.1.2 (2022-04-25)

0.1.1 (2022-04-21)

0.1.0 (2022-04-21)

Bug Fixes

  • blocks page navigation (aba948f)
  • camera-source: l10n fix (ddc1abd)
  • closing slash for uc-img src + common test updates (7dc5e17)
  • closing slash for uc-img src 2 (50d3ce0)
  • cloud editor styles and behaviour (5a3fcec)
  • cloud-image-editor: retry network button (b2ff5e0)
  • edit button visibility (c45c60f)
  • excess render calls for the FileItem on "Add more" (655747a)
  • external source type (832d269)
  • live-html indents (137d6a8)
  • regular uploader demo (149d0c2)
  • single source flow + minimal case activity (ff8c335)
  • styles for modal sizes & content scrolls (892e3ea)

Features

  • app-shell (test) (be01d8a)
  • app-shell (test) (0fd91bc)
  • github contribution templates and conditions added (7c75ead)
  • single source flow handle (a899c15)
  • single source handle (ad7b8ce)
  • single source handle WIP (5f19625)
  • uc-image solution (340349a)
  • uc-live-html - remove excess tree indents for innerHTML (920cbd4)