feat(entry-file): added file upload source (#736)

* feat(entry-file): added file upload source

* feat: added method getSourceTypes

* feat: added export UploadSource, ExternalUploadSource

* feat: added types and handler fallback

* build(ssr): added check object and return stubbedExports with obj

* feat(types): added SourceTypes in the OutputFileEntry

* test(types): added test for source type in the file

Author: egordidenko

abstract/UploaderBlock.js

@@ -15,6 +15,7 @@ import { TypedCollection } from './TypedCollection.js';
 import { UploaderPublicApi } from './UploaderPublicApi.js';
 import { ValidationManager } from './ValidationManager.js';
 import { uploadEntrySchema } from './uploadEntrySchema.js';
+import { ExternalUploadSource, UploadSource } from '../blocks/utils/UploadSource.js';
 
 export class UploaderBlock extends ActivityBlock {
   /** @protected */
@@ -421,26 +422,18 @@ export class UploaderBlock extends ActivityBlock {
   }
 }
 
-/** @enum {String} */
+/**
+ * @deprecated Use list sources ExternalUploadSource from from blocks/utils/UploadSource.js
+ * @enum {String}
+ */
 UploaderBlock.extSrcList = Object.freeze({
-  FACEBOOK: 'facebook',
-  DROPBOX: 'dropbox',
-  GDRIVE: 'gdrive',
-  GPHOTOS: 'gphotos',
-  INSTAGRAM: 'instagram',
-  FLICKR: 'flickr',
-  VK: 'vk',
-  EVERNOTE: 'evernote',
-  BOX: 'box',
-  ONEDRIVE: 'onedrive',
-  HUDDLE: 'huddle',
+  ...ExternalUploadSource,
 });
 
-/** @enum {String} */
+/**
+ * @deprecated Use list sources UploadSource from from blocks/utils/UploadSource.js
+ * @enum {String}
+ */
 UploaderBlock.sourceTypes = Object.freeze({
-  LOCAL: 'local',
-  URL: 'url',
-  CAMERA: 'camera',
-  DRAW: 'draw',
-  ...UploaderBlock.extSrcList,
+  ...UploadSource,
 });

abstract/UploaderPublicApi.js

@@ -240,6 +240,7 @@ export class UploaderPublicApi {
       isRemoved: status === 'removed',
       errors: /** @type {import('../types/exported.js').OutputFileEntry['errors']} */ (uploadEntryData.errors),
       status,
+      source: uploadEntryData?.source,
     };
 
     return /** @type {import('../types/exported.js').OutputFileEntry<TStatus>} */ (outputItem);

abstract/uploadEntrySchema.js

@@ -27,6 +27,7 @@ import { UploadcareFile } from '@uploadcare/upload-client';
  * @property {string | null} fullPath
  * @property {import('@uploadcare/upload-client').Metadata | null} metadata
  * @property {boolean} isRemoved
+ * @property {String} source
  */
 
 /**

blocks/DropArea/DropArea.js

@@ -151,7 +151,7 @@ export class DropArea extends UploaderBlock {
     this.subConfigValue('sourceList', (value) => {
       const list = stringToArray(value);
       // Enable drop area if local files are allowed
-      this.$.isEnabled = list.includes(UploaderBlock.sourceTypes.LOCAL);
+      this.$.isEnabled = list.includes(UploadSource.LOCAL);
       // Show drop area if it's enabled or default slot is overrided
       this.$.isVisible = this.$.isEnabled || !this.querySelector('[data-default-slot]');
     });

blocks/FileItem/FileItem.js

@@ -397,6 +397,7 @@ export class FileItem extends UploaderBlock {
         cdnUrl: entry.getValue('cdnUrl') ?? fileInfo.cdnUrl,
         cdnUrlModifiers: entry.getValue('cdnUrlModifiers') ?? '',
         uploadProgress: 100,
+        source: entry.getValue('source') ?? null,
       });
 
       if (entry === this._entry) {

blocks/SourceBtn/SourceBtn.js

@@ -1,6 +1,7 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { ExternalUploadSource, UploadSource } from '../utils/UploadSource.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -37,19 +38,19 @@ export class SourceBtn extends UploaderBlock {
 
   initTypes() {
     this.registerType({
-      type: UploaderBlock.sourceTypes.LOCAL,
+      type: UploadSource.LOCAL,
       activate: () => {
         this.api.openSystemDialog();
         return false;
       },
     });
     this.registerType({
-      type: UploaderBlock.sourceTypes.URL,
+      type: UploadSource.URL,
       activity: ActivityBlock.activities.URL,
       textKey: 'from-url',
     });
     this.registerType({
-      type: UploaderBlock.sourceTypes.CAMERA,
+      type: UploadSource.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
       activate: () => {
         const supportsCapture = 'capture' in document.createElement('input');
@@ -65,7 +66,7 @@ export class SourceBtn extends UploaderBlock {
       icon: 'edit-draw',
     });
 
-    for (let externalSourceType of Object.values(UploaderBlock.extSrcList)) {
+    for (let externalSourceType of Object.values(ExternalUploadSource)) {
       this.registerType({
         type: externalSourceType,
         activity: ActivityBlock.activities.EXTERNAL,

blocks/UrlSource/UrlSource.js

@@ -13,7 +13,7 @@ export class UrlSource extends UploaderBlock {
       e.preventDefault();
 
       let url = this.ref.input['value'];
-      this.api.addFileFromUrl(url, { source: UploadSource.URL_TAB });
+      this.api.addFileFromUrl(url, { source: UploadSource.URL });
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {

blocks/utils/UploadSource.js

@@ -1,8 +1,27 @@
+// @ts-check
+export const ExternalUploadSource = Object.freeze({
+  FACEBOOK: 'facebook',
+  DROPBOX: 'dropbox',
+  GDRIVE: 'gdrive',
+  GPHOTOS: 'gphotos',
+  INSTAGRAM: 'instagram',
+  FLICKR: 'flickr',
+  VK: 'vk',
+  EVERNOTE: 'evernote',
+  BOX: 'box',
+  ONEDRIVE: 'onedrive',
+  HUDDLE: 'huddle',
+});
+
 export const UploadSource = Object.freeze({
   LOCAL: 'local',
   DROP_AREA: 'drop-area',
-  URL_TAB: 'url-tab',
   CAMERA: 'camera',
   EXTERNAL: 'external',
   API: 'js-api',
+  URL: 'url',
+  DRAW: 'draw',
+  ...ExternalUploadSource,
 });
+
+/** @typedef {(typeof UploadSource)[keyof typeof UploadSource]} SourceTypes */

build-ssr-stubs.js

@@ -72,6 +72,8 @@ const stubbedExports = Object.fromEntries(
       newValue = '() => {}';
     } else if (typeof value === 'string') {
       newValue = `\`${value}\``;
+    } else if (typeof value === 'object') {
+      newValue = JSON.stringify(value);
     } else {
       throw new Error(`Unexpected export type: ${typeof value}`);
     }

index.js

@@ -44,6 +44,7 @@ export { defineComponents } from './abstract/defineComponents.js';
 export { defineLocale } from './abstract/localeRegistry.js';
 export { loadFileUploaderFrom } from './abstract/loadFileUploaderFrom.js';
 export { toKebabCase } from './utils/toKebabCase.js';
+export { UploadSource, ExternalUploadSource } from './blocks/utils/UploadSource.js';
 
 export * from './env.js';
 

types/exported.d.ts

@@ -21,6 +21,7 @@ export type SecureUploadsSignatureResolver = () => Promise<SecureUploadsSignatur
 export type IconHrefResolver = (iconName: string) => string;
 export type FileValidators = FuncFileValidator[];
 export type CollectionValidators = FuncCollectionValidator[];
+export type SourceTypes = import('../blocks/utils/UploadSource').SourceTypes
 
 export type ConfigType = {
   pubkey: string;
@@ -168,6 +169,7 @@ export type OutputFileEntry<TStatus extends OutputFileStatus = OutputFileStatus>
   externalUrl: string | null;
   uploadProgress: number;
   fullPath: string | null;
+  source: SourceTypes | null;
 } & (
     | {
       status: 'success';

types/test/uc-upload-ctx-provider.test-d.tsx

@@ -11,6 +11,7 @@ import {
   OutputFileErrorType,
   UploadCtxProvider
 } from '../../index.js';
+import { SourceTypes } from '../../blocks/utils/UploadSource.js';
 
 const instance = new UploadCtxProvider();
 instance.uploadCollection.size;
@@ -96,6 +97,7 @@ instance.addEventListener('file-added', (e) => {
   expectType<null>(state.cdnUrlModifiers);
   expectType<null>(state.uuid);
   expectType<null>(state.fileInfo);
+  expectType<SourceTypes | null>(state.source);
 });
 
 instance.addEventListener('file-removed', (e) => {