@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/Config/normalizeConfigValue.js

@@ -0,0 +1,177 @@
+// @ts-check
+
+import { initialConfig } from './initialConfig.js';
+
+/** @param {unknown} value */
+const asString = (value) => String(value);
+/** @param {unknown} value */
+const asNumber = (value) => {
+  const number = Number(value);
+  if (Number.isNaN(number)) {
+    throw new Error(`Invalid number: "${value}"`);
+  }
+  return number;
+};
+/** @param {unknown} value */
+export const asBoolean = (value) => {
+  if (typeof value === 'undefined' || value === null) return false;
+  if (typeof value === 'boolean') return value;
+  // for attr like multiple="true" (react will pass it as string)
+  if (value === 'true') return true;
+  // for attr flags like multiple="" (some other libs will pass it as empty string)
+  if (value === '') return true;
+  // for attr like multiple="false" (react will pass it as string)
+  if (value === 'false') return false;
+  throw new Error(`Invalid boolean: "${value}"`);
+};
+/** @param {unknown} value */
+const asStore = (value) => (value === 'auto' ? value : asBoolean(value));
+
+/** @param {unknown} value */
+const asCameraCapture = (value) => {
+  const strValue = asString(value);
+  if (strValue !== 'user' && strValue !== 'environment' && strValue !== '') {
+    throw new Error(`Invalid "cameraCapture" value: "${strValue}"`);
+  }
+  return strValue;
+};
+
+/** @param {unknown} value */
+const asMetadata = (value) => {
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    return /** @type {import('../../types').Metadata} */ (value);
+  }
+  if (typeof value === 'function') {
+    return /** @type {import('../../types').MetadataCallback} */ (value);
+  }
+
+  throw new Error('Invalid metadata value. Must be an object or function.');
+};
+
+/**
+ * @template {{}} T
+ * @param {unknown} value
+ * @returns {T}
+ */
+const asObject = (value) => {
+  if (typeof value === 'object') {
+    return /** @type {T} */ (value);
+  }
+
+  throw new Error('Invalid value. Must be an object.');
+};
+
+/**
+ * @template {Function} T
+ * @param {unknown} value
+ * @returns {T}
+ */
+const asFunction = (value) => {
+  if (typeof value === 'function') {
+    return /** @type {T} */ (value);
+  }
+
+  throw new Error('Invalid value. Must be a function.');
+};
+
+/**
+ * @template {Function[]} T
+ * @param {unknown} value
+ * @returns {T}
+ */
+const asArray = (value) => {
+  if (Array.isArray(value)) {
+    return /** @type {T} */ (value);
+  }
+
+  throw new Error('Must be an array.');
+};
+
+/**
+ * @type {{
+ *   [Key in keyof import('../../types').ConfigType]: (
+ *     value: unknown,
+ *   ) => import('../../types').ConfigType[Key] | undefined;
+ * }}
+ */
+const mapping = {
+  pubkey: asString,
+  multiple: asBoolean,
+  multipleMin: asNumber,
+  multipleMax: asNumber,
+
+  confirmUpload: asBoolean,
+  imgOnly: asBoolean,
+  accept: asString,
+  externalSourcesPreferredTypes: asString,
+  store: asStore,
+  cameraMirror: asBoolean,
+  cameraCapture: asCameraCapture,
+  sourceList: asString,
+  maxLocalFileSizeBytes: asNumber,
+  thumbSize: asNumber,
+  showEmptyList: asBoolean,
+  useLocalImageEditor: asBoolean,
+  useCloudImageEditor: asBoolean,
+  cloudImageEditorTabs: asString,
+  removeCopyright: asBoolean,
+  cropPreset: asString,
+  imageShrink: asString,
+
+  modalScrollLock: asBoolean,
+  modalBackdropStrokes: asBoolean,
+
+  sourceListWrap: asBoolean,
+
+  remoteTabSessionKey: asString,
+  cdnCname: asString,
+  baseUrl: asString,
+  socialBaseUrl: asString,
+  secureSignature: asString,
+  secureExpire: asString,
+  secureDeliveryProxy: asString,
+  retryThrottledRequestMaxTimes: asNumber,
+  multipartMinFileSize: asNumber,
+  multipartChunkSize: asNumber,
+  maxConcurrentRequests: asNumber,
+  multipartMaxConcurrentRequests: asNumber,
+  multipartMaxAttempts: asNumber,
+  checkForUrlDuplicates: asBoolean,
+  saveUrlForRecurrentUploads: asBoolean,
+
+  groupOutput: asBoolean,
+  userAgentIntegration: asString,
+  debug: asBoolean,
+
+  localeName: asString,
+
+  metadata: asMetadata,
+  secureUploadsExpireThreshold: asNumber,
+  localeDefinitionOverride: /** @type {typeof asObject<import('../../types').LocaleDefinitionOverride>} */ (asObject),
+  secureUploadsSignatureResolver:
+    /** @type {typeof asFunction<import('../../types').SecureUploadsSignatureResolver>} */ (asFunction),
+  secureDeliveryProxyUrlResolver:
+    /** @type {typeof asFunction<import('../../types').SecureDeliveryProxyUrlResolver>} */ (asFunction),
+  iconHrefResolver: /** @type {typeof asFunction<import('../../types').IconHrefResolver>} */ (asFunction),
+  fileValidators: /** @type {typeof asArray<import('../../types').FileValidators>} */ (asArray),
+  collectionValidators: /** @type {typeof asArray<import('../../types').CollectionValidators>} */ (asArray),
+};
+
+/**
+ * @template {keyof import('../../types').ConfigType} T
+ * @param {T} key
+ * @param {unknown} value
+ * @returns {import('../../types').ConfigType[T] | undefined}
+ */
+export const normalizeConfigValue = (key, value) => {
+  if (typeof value === 'undefined' || value === null) {
+    return undefined;
+  }
+
+  try {
+    return mapping[key](value);
+  } catch (reason) {
+    console.error(`Invalid value for config key "${key}".`, reason);
+    return initialConfig[key];
+  }
+};

package/blocks/Copyright/Copyright.d.ts

@@ -0,0 +1,4 @@
+export class Copyright extends Block {
+}
+import { Block } from '../../abstract/Block.js';
+//# sourceMappingURL=Copyright.d.ts.map

package/blocks/Copyright/Copyright.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copyright.d.ts","sourceRoot":"","sources":["Copyright.js"],"names":[],"mappings":"AAEA;CAqBC;sBAvBqB,yBAAyB"}

package/blocks/Copyright/Copyright.js

@@ -0,0 +1,24 @@
+import { Block } from '../../abstract/Block.js';
+
+export class Copyright extends Block {
+  initCallback() {
+    super.initCallback();
+
+    this.subConfigValue(
+      'removeCopyright',
+      /** @param {number} value */
+      (value) => {
+        this.toggleAttribute('hidden', !!value);
+      },
+    );
+  }
+
+  static template = /* HTML */ `
+    <a
+      href="https://uploadcare.com/?utm_source=copyright&utm_medium=referral&utm_campaign=v4"
+      target="_blank noopener"
+      class="uc-credits"
+      >Powered by Uploadcare</a
+    >
+  `;
+}

package/blocks/Copyright/copyright.css

@@ -0,0 +1,31 @@
+uc-copyright {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+uc-copyright .uc-credits {
+  all: unset;
+  position: absolute;
+  bottom: 12px;
+  background-color: var(--uc-background);
+  padding: 2px 5px;
+  border-radius: 6px;
+  color: var(--uc-muted-foreground);
+  font-weight: normal;
+  font-size: 12px;
+  opacity: 0.9;
+  cursor: pointer;
+  transition:
+    opacity var(--uc-transition),
+    background-color var(--uc-transition);
+}
+
+uc-copyright .uc-credits:focus-visible {
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
+uc-copyright .uc-credits:hover {
+  opacity: 1;
+  background-color: var(--uc-muted);
+}

package/blocks/DropArea/DropArea.d.ts

@@ -0,0 +1,49 @@
+export class DropArea extends UploaderBlock {
+    init$: {
+        state: number;
+        withIcon: boolean;
+        isClickable: boolean;
+        isFullscreen: boolean;
+        isEnabled: boolean;
+        isVisible: boolean;
+        text: string;
+        "uc-drop-area/registry": null;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*focusedEntry': null;
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    isActive(): boolean;
+    /** @private */
+    private _destroyDropzone;
+    _destroyContentWrapperDropzone: (() => void) | undefined;
+    /**
+     * @private
+     * @param {KeyboardEvent | Event} event
+     */
+    private _onAreaClicked;
+    /**
+     * Ignore drop events if there are other visible drop areas on the page
+     *
+     * @private
+     * @returns {Boolean}
+     */
+    private _shouldIgnore;
+    /** @private */
+    private _couldHandleFiles;
+}
+export namespace DropArea {
+    let template: string;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=DropArea.d.ts.map

package/blocks/DropArea/DropArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;;;;;;;;;;;MAUC;IAGH,oBAgBC;IAgDC,eAAe;IACf,yBA2BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBASC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAlP6B,iCAAiC"}

package/blocks/DropArea/DropArea.js

@@ -0,0 +1,273 @@
+// @ts-check
+
+import { Data } from '@symbiotejs/symbiote';
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { stringToArray } from '../../utils/stringToArray.js';
+import { asBoolean } from '../Config/normalizeConfigValue.js';
+import { UploadSource } from '../utils/UploadSource.js';
+import { DropzoneState, addDropzone } from './addDropzone.js';
+
+const GLOBAL_CTX_NAME = 'uc-drop-area';
+const REGISTRY_KEY = `${GLOBAL_CTX_NAME}/registry`;
+
+export class DropArea extends UploaderBlock {
+  static styleAttrs = [...super.styleAttrs, 'uc-drop-area'];
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      state: DropzoneState.INACTIVE,
+      withIcon: false,
+      isClickable: false,
+      isFullscreen: false,
+      isEnabled: true,
+      isVisible: true,
+      text: '',
+      [REGISTRY_KEY]: null,
+    };
+  }
+
+  isActive() {
+    if (!this.$.isEnabled) {
+      return false;
+    }
+    const bounds = this.getBoundingClientRect();
+    const hasSize = bounds.width > 0 && bounds.height > 0;
+    const isInViewport =
+      bounds.top >= 0 &&
+      bounds.left >= 0 &&
+      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      bounds.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+    const style = window.getComputedStyle(this);
+    const visible = style.visibility !== 'hidden' && style.display !== 'none';
+
+    return hasSize && visible && isInViewport;
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.bindL10n('text', () => this.l10n('drop-files-here'));
+
+    if (!this.$[REGISTRY_KEY]) {
+      this.$[REGISTRY_KEY] = new Set();
+    }
+    this.$[REGISTRY_KEY].add(this);
+
+    this.defineAccessor(
+      'disabled',
+      /** @param {unknown} value */ (value) => {
+        this.set$({ isEnabled: !asBoolean(value) });
+      },
+    );
+    this.defineAccessor(
+      'clickable',
+      /** @param {unknown} value */ (value) => {
+        this.set$({ isClickable: asBoolean(value) });
+      },
+    );
+    this.defineAccessor(
+      'with-icon',
+      /** @param {unknown} value */ (value) => {
+        this.set$({ withIcon: asBoolean(value) });
+      },
+    );
+    this.defineAccessor(
+      'fullscreen',
+      /** @param {unknown} value */ (value) => {
+        this.set$({ isFullscreen: asBoolean(value) });
+      },
+    );
+
+    this.defineAccessor(
+      'text',
+      /** @param {unknown} value */ (value) => {
+        if (typeof value === 'string') {
+          this.bindL10n('text', () => this.l10n(value) || value);
+        } else {
+          this.bindL10n('text', () => this.l10n('drop-files-here'));
+        }
+      },
+    );
+
+    /** @private */
+    this._destroyDropzone = addDropzone({
+      element: this,
+      shouldIgnore: () => this._shouldIgnore(),
+      /** @param {DropzoneState} state */
+      onChange: (state) => {
+        this.$.state = state;
+      },
+      /** @param {import('./getDropItems.js').DropItem[]} items */
+      onItems: (items) => {
+        if (!items.length) {
+          return;
+        }
+
+        items.forEach((/** @type {import('./getDropItems.js').DropItem} */ item) => {
+          if (item.type === 'url') {
+            this.api.addFileFromUrl(item.url, { source: UploadSource.DROP_AREA });
+          } else if (item.type === 'file') {
+            this.api.addFileFromObject(item.file, { source: UploadSource.DROP_AREA, fullPath: item.fullPath });
+          }
+        });
+        if (this.uploadCollection.size) {
+          this.set$({
+            '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
+          });
+          this.setOrAddState('*modalActive', true);
+        }
+      },
+    });
+
+    let contentWrapperEl = this.ref['content-wrapper'];
+    if (contentWrapperEl) {
+      this._destroyContentWrapperDropzone = addDropzone({
+        element: contentWrapperEl,
+        /** @param {DropzoneState} state */
+        onChange: (state) => {
+          const stateText = Object.entries(DropzoneState)
+            .find(([, value]) => value === state)?.[0]
+            .toLowerCase();
+          stateText && contentWrapperEl.setAttribute('drag-state', stateText);
+        },
+        onItems: () => {},
+        shouldIgnore: () => this._shouldIgnore(),
+      });
+    }
+
+    this.sub('state', (state) => {
+      const stateText = Object.entries(DropzoneState)
+        .find(([, value]) => value === state)?.[0]
+        .toLowerCase();
+      if (stateText) {
+        this.setAttribute('drag-state', stateText);
+      }
+    });
+
+    this.subConfigValue('sourceList', (value) => {
+      const list = stringToArray(value);
+      // Enable drop area if local files are allowed
+      this.$.isEnabled = list.includes(UploaderBlock.sourceTypes.LOCAL);
+      // Show drop area if it's enabled or default slot is overrided
+      this.$.isVisible = this.$.isEnabled || !this.querySelector('[data-default-slot]');
+    });
+
+    this.sub('isVisible', (value) => {
+      this.toggleAttribute('hidden', !value);
+    });
+
+    this.sub('isClickable', (value) => {
+      this.toggleAttribute('clickable', value);
+    });
+
+    if (this.$.isClickable) {
+      /**
+       * @private
+       * @param {KeyboardEvent | Event} event
+       */
+      this._onAreaClicked = (event) => {
+        if (event.type === 'keydown') {
+          // @ts-ignore
+          if (event.code === 'Space' || event.code === 'Enter') {
+            this.api.openSystemDialog();
+          }
+        } else if (event.type === 'click') {
+          this.api.openSystemDialog();
+        }
+      };
+
+      this.addEventListener('keydown', this._onAreaClicked);
+      this.addEventListener('click', this._onAreaClicked);
+    }
+  }
+
+  /**
+   * Ignore drop events if there are other visible drop areas on the page
+   *
+   * @private
+   * @returns {Boolean}
+   */
+  _shouldIgnore() {
+    if (!this.$.isEnabled) {
+      return true;
+    }
+    if (!this._couldHandleFiles()) {
+      return true;
+    }
+    if (!this.$.isFullscreen) {
+      return false;
+    }
+    const otherTargets = [...this.$[REGISTRY_KEY]].filter((el) => el !== this);
+    const activeTargets = otherTargets.filter((/** @type {typeof this} */ el) => {
+      return el.isActive();
+    });
+    return activeTargets.length > 0;
+  }
+
+  /** @private */
+  _couldHandleFiles() {
+    let isMultiple = this.cfg.multiple;
+    let multipleMax = this.cfg.multipleMax;
+    let currentFilesCount = this.uploadCollection.size;
+
+    if (isMultiple && multipleMax && currentFilesCount >= multipleMax) {
+      return false;
+    }
+
+    if (!isMultiple && currentFilesCount > 0) {
+      return false;
+    }
+
+    return true;
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+
+    /** @type {Set<DropArea>} */
+    const registry = this.$[REGISTRY_KEY];
+    if (registry) {
+      registry.delete(this);
+      if (registry.size === 0) {
+        Data.deleteCtx(GLOBAL_CTX_NAME);
+      }
+    }
+
+    this._destroyDropzone?.();
+    this._destroyContentWrapperDropzone?.();
+    if (this._onAreaClicked) {
+      this.removeEventListener('keydown', this._onAreaClicked);
+      this.removeEventListener('click', this._onAreaClicked);
+    }
+  }
+}
+
+DropArea.template = /* HTML */ `
+  <slot>
+    <div data-default-slot hidden></div>
+    <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
+      <div class="uc-icon-container" set="@hidden: !withIcon">
+        <uc-icon name="default"></uc-icon>
+        <uc-icon name="arrow-down"></uc-icon>
+      </div>
+      <span class="uc-text">{{text}}</span>
+    </div>
+  </slot>
+`;
+
+DropArea.bindAttributes({
+  // @ts-expect-error TODO: fix types inside symbiote
+  'with-icon': null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  clickable: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  text: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  fullscreen: null,
+  // @ts-expect-error TODO: fix types inside symbiote
+  disabled: null,
+});

package/blocks/DropArea/addDropzone.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @param {Object} desc
+ * @param {HTMLElement} desc.element
+ * @param {Function} desc.onChange
+ * @param {Function} desc.onItems
+ * @param {() => Boolean} desc.shouldIgnore
+ */
+export function addDropzone(desc: {
+    element: HTMLElement;
+    onChange: Function;
+    onItems: Function;
+    shouldIgnore: () => boolean;
+}): () => void;
+export type DropzoneState = number;
+export namespace DropzoneState {
+    let ACTIVE: number;
+    let INACTIVE: number;
+    let NEAR: number;
+    let OVER: number;
+}
+//# sourceMappingURL=addDropzone.d.ts.map

package/blocks/DropArea/addDropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addDropzone.d.ts","sourceRoot":"","sources":["addDropzone.js"],"names":[],"mappings":"AA0BA;;;;;;GAMG;AACH;IAL6B,OAAO,EAAzB,WAAW;IACI,QAAQ;IACR,OAAO;IACF,YAAY,EAAhC,aAAa;eAyGvB"}