@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/DropArea/addDropzone.js

@@ -0,0 +1,137 @@
+import { getDropItems } from './getDropItems.js';
+
+/** @enum {Number} */
+export const DropzoneState = {
+  ACTIVE: 0,
+  INACTIVE: 1,
+  NEAR: 2,
+  OVER: 3,
+};
+
+let RESET_EVENTS = ['focus'];
+let NEAR_OFFSET = 100;
+let nearnessRegistry = new Map();
+
+/**
+ * @param {[x: number, y: number]} p
+ * @param {{ x: number; y: number; width: number; height: number }} r
+ * @returns {number}
+ */
+function distance(p, r) {
+  let cx = Math.max(Math.min(p[0], r.x + r.width), r.x);
+  let cy = Math.max(Math.min(p[1], r.y + r.height), r.y);
+
+  return Math.sqrt((p[0] - cx) * (p[0] - cx) + (p[1] - cy) * (p[1] - cy));
+}
+
+/**
+ * @param {Object} desc
+ * @param {HTMLElement} desc.element
+ * @param {Function} desc.onChange
+ * @param {Function} desc.onItems
+ * @param {() => Boolean} desc.shouldIgnore
+ */
+export function addDropzone(desc) {
+  let eventCounter = 0;
+
+  let body = document.body;
+  let switchHandlers = new Set();
+  let handleSwitch = (fn) => switchHandlers.add(fn);
+  let state = DropzoneState.INACTIVE;
+
+  let setState = (newState) => {
+    if (desc.shouldIgnore() && newState !== DropzoneState.INACTIVE) {
+      return;
+    }
+    if (state !== newState) {
+      switchHandlers.forEach((fn) => fn(newState));
+    }
+    state = newState;
+  };
+
+  let isDragging = () => eventCounter > 0;
+
+  handleSwitch((newState) => desc.onChange(newState));
+
+  let onResetEvent = () => {
+    eventCounter = 0;
+    setState(DropzoneState.INACTIVE);
+  };
+  let onDragEnter = () => {
+    eventCounter += 1;
+    if (state === DropzoneState.INACTIVE) {
+      setState(DropzoneState.ACTIVE);
+    }
+  };
+  let onDragLeave = () => {
+    eventCounter -= 1;
+    if (!isDragging()) {
+      setState(DropzoneState.INACTIVE);
+    }
+  };
+  let onDrop = (e) => {
+    e.preventDefault();
+    eventCounter = 0;
+    setState(DropzoneState.INACTIVE);
+  };
+
+  let onDragOver = (e) => {
+    if (desc.shouldIgnore()) {
+      return;
+    }
+
+    if (!isDragging()) {
+      eventCounter += 1;
+    }
+
+    /** @type {[Number, Number]} */
+    let dragPoint = [e.x, e.y];
+    let targetRect = desc.element.getBoundingClientRect();
+    let nearness = Math.floor(distance(dragPoint, targetRect));
+    let isNear = nearness < NEAR_OFFSET;
+    let isOver = e.composedPath().includes(desc.element);
+
+    nearnessRegistry.set(desc.element, nearness);
+    let isNearest = Math.min(...nearnessRegistry.values()) === nearness;
+
+    if (isOver && isNearest) {
+      e.preventDefault();
+      setState(DropzoneState.OVER);
+    } else if (isNear && isNearest) {
+      setState(DropzoneState.NEAR);
+    } else {
+      setState(DropzoneState.ACTIVE);
+    }
+  };
+
+  let onElementDrop = async (e) => {
+    if (desc.shouldIgnore()) {
+      return;
+    }
+    e.preventDefault();
+    let items = await getDropItems(e.dataTransfer);
+    desc.onItems(items);
+    setState(DropzoneState.INACTIVE);
+  };
+
+  body.addEventListener('drop', onDrop);
+  body.addEventListener('dragleave', onDragLeave);
+  body.addEventListener('dragenter', onDragEnter);
+  body.addEventListener('dragover', onDragOver);
+  desc.element.addEventListener('drop', onElementDrop);
+  RESET_EVENTS.forEach((eventName) => {
+    window.addEventListener(eventName, onResetEvent);
+  });
+
+  return () => {
+    nearnessRegistry.delete(desc.element);
+    body.removeEventListener('drop', onDrop);
+    body.removeEventListener('dragleave', onDragLeave);
+    body.removeEventListener('dragenter', onDragEnter);
+    body.removeEventListener('dragover', onDragOver);
+    desc.element.removeEventListener('drop', onElementDrop);
+    RESET_EVENTS.forEach((eventName) => {
+      window.removeEventListener(eventName, onResetEvent);
+    });
+  };
+}

package/blocks/DropArea/drop-area.css

@@ -0,0 +1,188 @@
+:where([uc-drop-area]) {
+  padding: 2px;
+  overflow: hidden;
+  border: 1px dashed var(--uc-border);
+  border-radius: calc(var(--uc-radius) * 1.75);
+  transition:
+    border var(--uc-transition),
+    border-radius var(--uc-transition);
+}
+
+:where([uc-drop-area]),
+:where([uc-drop-area]) .uc-content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+:where([uc-drop-area]) .uc-text {
+  position: relative;
+  margin: var(--uc-padding);
+  color: var(--uc-muted-foreground);
+  transition: color var(--uc-transition);
+}
+
+:where([uc-drop-area])[ghost][drag-state='inactive'] {
+  display: none;
+}
+
+:where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state='active'], [drag-state='near'], [drag-state='over']) {
+  background: var(--uc-background);
+}
+
+:where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  :is(.uc-text, .uc-icon-container) {
+  color: var(--uc-primary);
+}
+
+:where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+  color: var(--uc-primary);
+  background: var(--uc-primary-transparent);
+  border-color: var(--uc-primary-transparent);
+}
+
+:where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
+  opacity: 1;
+}
+
+:where([uc-drop-area])[drag-state='over'] {
+  border-color: var(--uc-primary);
+  opacity: 1;
+}
+
+:where([uc-drop-area])[with-icon] {
+  min-height: 180px;
+}
+
+:where([uc-drop-area])[with-icon] .uc-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+:where([uc-drop-area])[with-icon] .uc-text {
+  color: var(--uc-foreground);
+  font-weight: 500;
+  font-size: 1.1em;
+}
+
+:where([uc-drop-area])[with-icon] .uc-icon-container {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  margin: var(--uc-padding);
+  overflow: hidden;
+  color: var(--uc-foreground);
+  background-color: var(--uc-muted);
+  border-radius: 50%;
+  transition:
+    color var(--uc-transition),
+    background-color var(--uc-transition);
+}
+
+:where([uc-drop-area])[with-icon] uc-icon {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  top: calc(50% - 16px);
+  left: calc(50% - 16px);
+  transition: transform var(--uc-transition);
+}
+
+:where([uc-drop-area])[with-icon] uc-icon:last-child {
+  transform: translateY(48px);
+}
+
+:where([uc-drop-area])[with-icon]:hover .uc-icon-container,
+:where([uc-drop-area])[with-icon]:hover .uc-text {
+  color: var(--uc-primary);
+}
+
+:where([uc-drop-area])[with-icon]:hover .uc-icon-container {
+  background-color: var(--uc-primary-transparent);
+}
+
+:where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-icon-container {
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
+}
+
+:where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-text {
+  color: var(--uc-primary);
+}
+
+:where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  uc-icon:first-child {
+  transform: translateY(-48px);
+}
+
+:where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  uc-icon:last-child {
+  transform: translateY(0);
+}
+
+:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='near'] uc-icon:last-child {
+  transform: scale(1.3);
+}
+
+:where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state='over'] uc-icon:last-child {
+  transform: scale(1.5);
+}
+
+:where([uc-drop-area])[fullscreen] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100vw - var(--uc-padding) * 2);
+  height: calc(100vh - var(--uc-padding) * 2);
+  margin: var(--uc-padding);
+}
+
+:where([uc-drop-area])[fullscreen] .uc-content-wrapper {
+  width: 100%;
+  max-width: calc(var(--uc-dialog-width) * 0.8);
+  height: 180px;
+  color: var(--uc-foreground);
+  background-color: var(--uc-background);
+  border-radius: calc(var(--uc-radius) * 1.75);
+  box-shadow: var(--uc-dialog-shadow);
+  transition:
+    color var(--uc-transition),
+    background-color var(--uc-transition),
+    box-shadow var(--uc-transition),
+    border-radius var(--uc-transition),
+    transform var(--uc-transition);
+}
+
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='active'] > .uc-content-wrapper,
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='near'] > .uc-content-wrapper {
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+:where([uc-drop-area])[with-icon][fullscreen][drag-state='over'] > .uc-content-wrapper {
+  transform: translateY(0px);
+  opacity: 1;
+}
+
+:is(:where([uc-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper uc-icon:first-child {
+  transform: translateY(-48px);
+}
+
+:where([uc-drop-area])[clickable] {
+  cursor: pointer;
+}

package/blocks/DropArea/getDropItems.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Note: dataTransfer will be destroyed outside of the call stack. So, do not try to process it asynchronous.
+ *
+ * @param {DataTransfer} dataTransfer
+ * @returns {Promise<DropItem[]>}
+ */
+export function getDropItems(dataTransfer: DataTransfer): Promise<DropItem[]>;
+export type DropItem = {
+    type: 'file';
+    file: File;
+    fullPath?: string;
+} | {
+    type: 'url';
+    url: string;
+};
+//# sourceMappingURL=getDropItems.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getDropItems.d.ts","sourceRoot":"","sources":["getDropItems.js"],"names":[],"mappings":"AAwGA;;;;;GAKG;AACH,2CAHW,YAAY,GACV,QAAQ,QAAQ,EAAE,CAAC,CA0D/B;uBAnKY;IACZ,IAAY,EAAE,MAAM,CAAC;IACrB,IAAY,EAAE,IAAI,CAAC;IACnB,QAAgB,CAAC,EAAE,MAAM,CAAC;CACnB,GACD;IACN,IAAY,EAAE,KAAK,CAAC;IACpB,GAAW,EAAE,MAAM,CAAC;CACb"}

package/blocks/DropArea/getDropItems.js

@@ -0,0 +1,167 @@
+// @ts-check
+
+/**
+ * @typedef {{
+ *       type: 'file';
+ *       file: File;
+ *       fullPath?: string;
+ *     }
+ *   | {
+ *       type: 'url';
+ *       url: string;
+ *     }} DropItem
+ */
+
+/**
+ * @param {File} file
+ * @returns {Promise<boolean>}
+ */
+function checkIsDirectory(file) {
+  return new Promise((resolve) => {
+    if (typeof window.FileReader !== 'function') {
+      resolve(false);
+    }
+
+    try {
+      let reader = new FileReader();
+      reader.onerror = () => {
+        resolve(true);
+      };
+      /** @param {Event} e */
+      let onLoad = (e) => {
+        if (e.type !== 'loadend') {
+          reader.abort();
+        }
+        resolve(false);
+      };
+      reader.onloadend = onLoad;
+      reader.onprogress = onLoad;
+
+      reader.readAsDataURL(file);
+    } catch (err) {
+      resolve(false);
+    }
+  });
+}
+
+/**
+ * @param {FileSystemEntry} webkitEntry
+ * @param {string} dataTransferItemType
+ * @returns {Promise<DropItem[] | null>}
+ */
+function readEntryContentAsync(webkitEntry, dataTransferItemType) {
+  return new Promise((resolve) => {
+    let reading = 0;
+    /** @type {DropItem[]} */
+    const dropItems = [];
+
+    /** @param {FileSystemEntry} entry */
+    const readEntry = (entry) => {
+      if (!entry) {
+        console.warn('Unexpectedly received empty content entry', { scope: 'drag-and-drop' });
+        resolve(null);
+      }
+      if (entry.isFile) {
+        reading++;
+        /** @type {FileSystemFileEntry} */ (entry).file((file) => {
+          reading--;
+          // webkitGetAsEntry don't provide type for HEIC images at least, so we use type value from dataTransferItem
+          const clonedFile = new File([file], file.name, { type: file.type || dataTransferItemType });
+          dropItems.push({
+            type: 'file',
+            file: clonedFile,
+            fullPath: entry.fullPath,
+          });
+
+          if (reading === 0) {
+            resolve(dropItems);
+          }
+        });
+      } else if (entry.isDirectory) {
+        readReaderContent(/** @type {FileSystemDirectoryEntry} */ (entry).createReader());
+      }
+    };
+
+    /** @param {FileSystemDirectoryReader} reader */
+    let readReaderContent = (reader) => {
+      reading++;
+
+      reader.readEntries((entries) => {
+        reading--;
+        for (let entry of entries) {
+          readEntry(entry);
+        }
+
+        if (reading === 0) {
+          resolve(dropItems);
+        }
+      });
+    };
+
+    readEntry(webkitEntry);
+  });
+}
+
+/**
+ * Note: dataTransfer will be destroyed outside of the call stack. So, do not try to process it asynchronous.
+ *
+ * @param {DataTransfer} dataTransfer
+ * @returns {Promise<DropItem[]>}
+ */
+export function getDropItems(dataTransfer) {
+  /** @type {DropItem[]} */
+  const dropItems = [];
+  const promises = [];
+  for (let i = 0; i < dataTransfer.items.length; i++) {
+    let item = dataTransfer.items[i];
+    if (!item) {
+      continue;
+    }
+    if (item.kind === 'file') {
+      const itemType = item.type;
+      if (typeof item.webkitGetAsEntry === 'function' || typeof (/** @type {any} */ (item).getAsEntry) === 'function') {
+        let entry =
+          typeof item.webkitGetAsEntry === 'function'
+            ? item.webkitGetAsEntry()
+            : /** @type {any} */ (item).getAsEntry();
+        promises.push(
+          readEntryContentAsync(entry, itemType).then((items) => {
+            if (items) {
+              dropItems.push(...items);
+            }
+          }),
+        );
+        continue;
+      }
+
+      const file = item.getAsFile();
+      file &&
+        promises.push(
+          checkIsDirectory(file).then((isDirectory) => {
+            if (isDirectory) {
+              // we can't get directory files, so we'll skip it
+            } else {
+              dropItems.push({
+                type: 'file',
+                file,
+              });
+            }
+          }),
+        );
+    } else if (item.kind === 'string' && item.type.match('^text/uri-list')) {
+      promises.push(
+        new Promise((resolve) => {
+          item.getAsString((value) => {
+            dropItems.push({
+              type: 'url',
+              url: value,
+            });
+            resolve(undefined);
+          });
+        }),
+      );
+    }
+  }
+
+  return Promise.all(promises).then(() => dropItems);
+}

package/blocks/ExternalSource/ExternalSource.d.ts

@@ -0,0 +1,98 @@
+/** @typedef {{ externalSourceType: string }} ActivityParams */
+/**
+ * @typedef {{
+ *   type: 'file-selected';
+ *   obj_type: 'selected_file';
+ *   filename: string;
+ *   url: string;
+ *   alternatives?: Record<string, string>;
+ * }} SelectedFileMessage
+ */
+/**
+ * @typedef {{
+ *   type: 'embed-css';
+ *   style: string;
+ * }} EmbedCssMessage
+ */
+/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
+export class ExternalSource extends UploaderBlock {
+    activityType: "external";
+    init$: {
+        activityIcon: string;
+        activityCaption: string;
+        selectedList: never[];
+        counter: number;
+        multiple: boolean;
+        onDone: () => void;
+        onCancel: () => void;
+        '*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;
+    };
+    /**
+     * @private
+     * @type {HTMLIFrameElement | null}
+     */
+    private _iframe;
+    /**
+     * @private
+     * @param {SelectedFileMessage} message
+     */
+    private extractUrlFromMessage;
+    /**
+     * @private
+     * @param {Message} message
+     */
+    private sendMessage;
+    /**
+     * @private
+     * @param {SelectedFileMessage} message
+     */
+    private handleFileSelected;
+    /** @private */
+    private handleIframeLoad;
+    /**
+     * @private
+     * @param {string} propName
+     */
+    private getCssValue;
+    /** @private */
+    private applyStyles;
+    /** @private */
+    private remoteUrl;
+    /** @private */
+    private mountIframe;
+    /** @private */
+    private unmountIframe;
+}
+export namespace ExternalSource {
+    let template: string;
+}
+export type ActivityParams = {
+    externalSourceType: string;
+};
+export type SelectedFileMessage = {
+    type: 'file-selected';
+    obj_type: 'selected_file';
+    filename: string;
+    url: string;
+    alternatives?: Record<string, string>;
+};
+export type EmbedCssMessage = {
+    type: 'embed-css';
+    style: string;
+};
+export type Message = SelectedFileMessage | EmbedCssMessage;
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=ExternalSource.d.ts.map

package/blocks/ExternalSource/ExternalSource.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;;;;;;;;;;;;;;;;;;;;MAoBC;IAGH;;;OAGG;IACH,gBAAe;IA2Cf;;;OAGG;IACH,8BAcC;IAED;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,2BAUC;IAED,eAAe;IACf,yBAEC;IAED;;;OAGG;IACH,oBAGC;IAED,eAAe;IACf,oBAkBC;IAED,eAAe;IACf,kBAcC;IAED,eAAe;IACf,oBAsBC;IAED,eAAe;IACf,sBAMC;CACF;;;;6BAnOa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;kCAG/B;IACZ,IAAQ,EAAE,eAAe,CAAC;IAC1B,QAAY,EAAE,eAAe,CAAC;IAC9B,QAAY,EAAE,MAAM,CAAC;IACrB,GAAO,EAAE,MAAM,CAAC;IAChB,YAAgB,CAAC,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;8BAIS;IACZ,IAAQ,EAAE,WAAW,CAAC;IACtB,KAAS,EAAE,MAAM,CAAC;CACf;sBAGU,mBAAmB,GAAG,eAAe;8BA1BrB,iCAAiC"}