nuxt-upload-kit 0.1.18 → 0.1.21

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-upload-kit",
   "configKey": "uploadKit",
-  "version": "0.1.18",
+  "version": "0.1.21",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/composables/useUploadKit/file-operations.d.ts

@@ -0,0 +1,41 @@
+import type { Ref } from "vue";
+import type { Emitter } from "mitt";
+import type { UploadFile, UploadOptions, StoragePlugin, PluginLifecycleStage } from "./types.js";
+export interface FileOperationsDeps<TUploadResult = any> {
+    /** Reactive ref containing the files array */
+    files: Ref<UploadFile<TUploadResult>[]>;
+    /** Event emitter for file events */
+    emitter: Emitter<any>;
+    /** Upload options configuration */
+    options: UploadOptions;
+    /** Map tracking created object URLs for cleanup */
+    createdObjectURLs: Map<string, string>;
+    /** Function to get the active storage plugin */
+    getStoragePlugin: () => StoragePlugin<any, any> | null;
+    /** Function to run plugin lifecycle stages */
+    runPluginStage: (stage: Exclude<PluginLifecycleStage, "upload">, file?: UploadFile) => Promise<UploadFile | undefined | null>;
+    /** Function to trigger upload */
+    upload: () => Promise<void>;
+    /** Function to update the hasEmittedFilesUploaded flag */
+    setHasEmittedFilesUploaded: (value: boolean) => void;
+}
+/**
+ * Creates file operation functions with injected dependencies.
+ *
+ * This factory function creates all file access and manipulation operations
+ * with proper closure over the composable's internal state.
+ */
+export declare function createFileOperations<TUploadResult = any>(deps: FileOperationsDeps<TUploadResult>): {
+    getFile: (fileId: string) => UploadFile<TUploadResult>;
+    getFileData: (fileId: string) => Promise<Blob>;
+    getFileURL: (fileId: string) => Promise<string>;
+    getFileStream: (fileId: string) => Promise<ReadableStream<Uint8Array>>;
+    replaceFileData: (fileId: string, newData: Blob, newName?: string, shouldAutoUpload?: boolean) => Promise<UploadFile<TUploadResult>>;
+    reorderFile: (oldIndex: number, newIndex: number) => void;
+    removeFile: (fileId: string, removeOptions?: {
+        deleteFromStorage?: "always" | "never" | "local-only";
+    }) => Promise<void>;
+    removeFiles: (fileIds: string[]) => UploadFile<TUploadResult>[];
+    clearFiles: () => UploadFile<TUploadResult>[];
+    reset: () => void;
+};

package/dist/runtime/composables/useUploadKit/file-operations.js

@@ -0,0 +1,167 @@
+import { cleanupObjectURLs, createPluginContext } from "./utils.js";
+export function createFileOperations(deps) {
+  const { files, emitter, options, createdObjectURLs, getStoragePlugin, runPluginStage, upload, setHasEmittedFilesUploaded } = deps;
+  const getFile = (fileId) => {
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    return file;
+  };
+  const getFileData = async (fileId) => {
+    const file = getFile(fileId);
+    if (file.size > 100 * 1024 * 1024) {
+      console.warn(
+        `getFileData: Loading large file (${(file.size / 1024 / 1024).toFixed(2)}MB) into memory. Consider using getFileURL() or getFileStream() for better performance.`
+      );
+    }
+    if (file.source === "local") {
+      return file.data;
+    }
+    const response = await fetch(file.remoteUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.statusText}`);
+    }
+    return await response.blob();
+  };
+  const getFileURL = async (fileId) => {
+    const file = getFile(fileId);
+    if (file.source === "local") {
+      const existingURL = createdObjectURLs.get(file.id);
+      if (existingURL) {
+        return existingURL;
+      }
+      const objectURL = URL.createObjectURL(file.data);
+      createdObjectURLs.set(file.id, objectURL);
+      return objectURL;
+    }
+    return file.remoteUrl;
+  };
+  const getFileStream = async (fileId) => {
+    const file = getFile(fileId);
+    if (file.source === "local") {
+      return file.data.stream();
+    }
+    const response = await fetch(file.remoteUrl);
+    if (!response.ok || !response.body) {
+      throw new Error(`Failed to fetch file stream: ${response.statusText}`);
+    }
+    return response.body;
+  };
+  const replaceFileData = async (fileId, newData, newName, shouldAutoUpload) => {
+    const file = getFile(fileId);
+    cleanupObjectURLs(createdObjectURLs, fileId);
+    const updatedFile = {
+      ...file,
+      source: "local",
+      data: newData,
+      name: newName || file.name,
+      size: newData.size,
+      status: "waiting",
+      progress: { percentage: 0 },
+      remoteUrl: void 0,
+      meta: {}
+    };
+    const preprocessedFile = await runPluginStage("preprocess", updatedFile);
+    const finalFile = preprocessedFile || updatedFile;
+    const index = files.value.findIndex((f) => f.id === fileId);
+    if (index === -1) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    files.value[index] = finalFile;
+    emitter.emit("file:replaced", finalFile);
+    emitter.emit("file:added", finalFile);
+    setHasEmittedFilesUploaded(false);
+    const shouldUpload = shouldAutoUpload ?? options.autoUpload;
+    if (shouldUpload) {
+      upload();
+    }
+    return finalFile;
+  };
+  const reorderFile = (oldIndex, newIndex) => {
+    if (oldIndex === newIndex) {
+      if (import.meta.dev) {
+        console.warn("Cannot reorder file to the same index");
+      }
+      return;
+    }
+    if (oldIndex < 0 || oldIndex >= files.value.length || newIndex < 0 || newIndex >= files.value.length) {
+      if (import.meta.dev) {
+        console.warn(`Cannot reorder file from ${oldIndex} to ${newIndex} since it is out of bounds`);
+      }
+      return;
+    }
+    const filesCopy = [...files.value];
+    const [movedFile] = filesCopy.splice(oldIndex, 1);
+    filesCopy.splice(newIndex, 0, movedFile);
+    files.value = filesCopy;
+    emitter.emit("files:reorder", { oldIndex, newIndex });
+  };
+  const removeFile = async (fileId, removeOptions) => {
+    const { deleteFromStorage = "always" } = removeOptions ?? {};
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) return;
+    let shouldDelete;
+    switch (deleteFromStorage) {
+      case "always":
+        shouldDelete = true;
+        break;
+      case "never":
+        shouldDelete = false;
+        break;
+      case "local-only":
+        shouldDelete = file.source === "local";
+        break;
+    }
+    if (shouldDelete && file.remoteUrl) {
+      const storagePlugin = getStoragePlugin();
+      if (storagePlugin?.hooks.remove) {
+        try {
+          const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
+          await storagePlugin.hooks.remove(file, context);
+        } catch (error) {
+          console.error(`Storage plugin remove error:`, error);
+        }
+      }
+    }
+    cleanupObjectURLs(createdObjectURLs, file.id);
+    files.value = files.value.filter((f) => f.id !== fileId);
+    emitter.emit("file:removed", file);
+  };
+  const removeFiles = (fileIds) => {
+    const removedFiles = files.value.filter((f) => fileIds.includes(f.id));
+    removedFiles.forEach((file) => {
+      cleanupObjectURLs(createdObjectURLs, file.id);
+    });
+    files.value = files.value.filter((f) => !fileIds.includes(f.id));
+    removedFiles.forEach((file) => {
+      emitter.emit("file:removed", file);
+    });
+    return removedFiles;
+  };
+  const clearFiles = () => {
+    const allFiles = [...files.value];
+    cleanupObjectURLs(createdObjectURLs);
+    files.value = [];
+    allFiles.forEach((file) => {
+      emitter.emit("file:removed", file);
+    });
+    return allFiles;
+  };
+  const reset = () => {
+    cleanupObjectURLs(createdObjectURLs);
+    files.value = [];
+  };
+  return {
+    getFile,
+    getFileData,
+    getFileURL,
+    getFileStream,
+    replaceFileData,
+    reorderFile,
+    removeFile,
+    removeFiles,
+    clearFiles,
+    reset
+  };
+}

package/dist/runtime/composables/useUploadKit/index.d.ts

@@ -1,4 +1,4 @@
-import type { UploaderEvents, UploadFile, UploadOptions, UploadStatus, UploadFn, GetRemoteFileFn, Plugin as UploaderPlugin } from "./types.js";
+import type { UploaderEvents, UploadFile, UploadOptions, UploadStatus, Plugin as UploaderPlugin, InitialFileInput } from "./types.js";
 export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOptions) => {
     files: Readonly<import("vue").Ref<readonly ({
         readonly source: "local";
@@ -54,6 +54,7 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         };
         readonly remoteUrl?: string | undefined;
         readonly id: string;
+        readonly storageKey?: string | undefined;
         readonly name: string;
         readonly size: number;
         readonly mimeType: string;
@@ -75,6 +76,7 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly data: null;
         readonly remoteUrl: string;
         readonly id: string;
+        readonly storageKey?: string | undefined;
         readonly name: string;
         readonly size: number;
         readonly mimeType: string;
@@ -145,6 +147,7 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         };
         readonly remoteUrl?: string | undefined;
         readonly id: string;
+        readonly storageKey?: string | undefined;
         readonly name: string;
         readonly size: number;
         readonly mimeType: string;
@@ -166,6 +169,7 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly data: null;
         readonly remoteUrl: string;
         readonly id: string;
+        readonly storageKey?: string | undefined;
         readonly name: string;
         readonly size: number;
         readonly mimeType: string;
@@ -187,285 +191,22 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
     isReady: Readonly<import("vue").Ref<boolean, boolean>>;
     addFiles: (newFiles: File[]) => Promise<UploadFile[]>;
     addFile: (file: File) => Promise<UploadFile>;
-    onGetRemoteFile: (fn: GetRemoteFileFn) => void;
-    onUpload: (fn: UploadFn<TUploadResult>) => void;
     removeFile: (fileId: string, removeOptions?: {
         deleteFromStorage?: "always" | "never" | "local-only";
-    }) => Promise<void>;
-    removeFiles: (fileIds: string[]) => ({
-        source: "local";
-        data: {
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        } | {
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        };
-        remoteUrl?: string | undefined;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    } | {
-        source: Exclude<import("./types.js").FileSource, "local">;
-        data: null;
-        remoteUrl: string;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    })[];
-    clearFiles: () => ({
-        source: "local";
-        data: {
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        } | {
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        };
-        remoteUrl?: string | undefined;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    } | {
-        source: Exclude<import("./types.js").FileSource, "local">;
-        data: null;
-        remoteUrl: string;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    })[];
+    } | undefined) => Promise<void>;
+    removeFiles: (fileIds: string[]) => UploadFile<any>[];
+    clearFiles: () => UploadFile<any>[];
     reorderFile: (oldIndex: number, newIndex: number) => void;
-    getFile: (fileId: string) => {
-        source: "local";
-        data: {
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        } | {
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: {
-                (): Promise<ArrayBuffer>;
-                (): Promise<ArrayBuffer>;
-            };
-            bytes: {
-                (): Promise<Uint8Array<ArrayBuffer>>;
-                (): Promise<Uint8Array<ArrayBuffer>>;
-            };
-            slice: {
-                (start?: number, end?: number, contentType?: string): Blob;
-                (start?: number, end?: number, contentType?: string): Blob;
-            };
-            stream: {
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-                (): ReadableStream<Uint8Array<ArrayBuffer>>;
-            };
-            text: {
-                (): Promise<string>;
-                (): Promise<string>;
-            };
-        };
-        remoteUrl?: string | undefined;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    } | {
-        source: Exclude<import("./types.js").FileSource, "local">;
-        data: null;
-        remoteUrl: string;
-        id: string;
-        name: string;
-        size: number;
-        mimeType: string;
-        status: import("./types.js").FileStatus;
-        preview?: string | undefined;
-        progress: {
-            percentage: number;
-        };
-        error?: {
-            message: string;
-            details?: unknown;
-        } | undefined;
-        uploadResult?: import("vue").UnwrapRef<TUploadResult> | undefined;
-        meta: Record<string, unknown>;
-    };
+    getFile: (fileId: string) => UploadFile<any>;
     upload: () => Promise<void>;
     reset: () => void;
     status: import("vue").Ref<UploadStatus, UploadStatus>;
     getFileData: (fileId: string) => Promise<Blob>;
     getFileURL: (fileId: string) => Promise<string>;
     getFileStream: (fileId: string) => Promise<ReadableStream<Uint8Array>>;
-    replaceFileData: (fileId: string, newData: Blob, newName?: string, shouldAutoUpload?: boolean) => Promise<UploadFile>;
+    replaceFileData: (fileId: string, newData: Blob, newName?: string, shouldAutoUpload?: boolean) => Promise<UploadFile<any>>;
     updateFile: (fileId: string, updatedFile: Partial<UploadFile<TUploadResult>>) => void;
-    initializeExistingFiles: (initialFiles: Array<Partial<UploadFile>>) => Promise<void>;
+    initializeExistingFiles: (initialFiles: InitialFileInput[]) => Promise<void>;
     addPlugin: (plugin: UploaderPlugin<any, any>) => void;
     on: {
         <K extends keyof UploaderEvents<TUploadResult>>(type: K, handler: (event: UploaderEvents<TUploadResult>[K]) => void): void;