nuxt-upload-kit 0.1.24 → 0.1.26

package/dist/module.json

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

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

@@ -117,7 +117,7 @@ export function createFileOperations(deps) {
       const storagePlugin = getStoragePlugin();
       if (storagePlugin?.hooks.remove) {
         try {
-          const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
+          const context = createPluginContext(storagePlugin.id, files.value, options, emitter, storagePlugin);
           await storagePlugin.hooks.remove(file, context);
         } catch (error) {
           console.error(`Storage plugin remove error:`, error);

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

@@ -223,6 +223,7 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
     replaceFileData: (fileId: string, newData: Blob, newName?: string, shouldAutoUpload?: boolean) => Promise<UploadFile<any>>;
     updateFile: (fileId: string, updatedFile: Partial<UploadFile<TUploadResult>>) => void;
     initializeExistingFiles: (initialFiles: InitialFileInput[]) => Promise<void>;
+    appendExistingFiles: (initialFiles: InitialFileInput[]) => Promise<UploadFile<TUploadResult>[]>;
     addPlugin: (plugin: UploaderPlugin<any, any>) => void;
     on: {
         <K extends keyof UploaderEvents<TUploadResult>>(type: K, handler: (event: UploaderEvents<TUploadResult>[K]) => void): void;

package/dist/runtime/composables/useUploadKit/index.js

@@ -2,7 +2,7 @@ import mitt from "mitt";
 import { computed, onBeforeUnmount, readonly, ref } from "vue";
 import { ValidatorAllowedFileTypes, ValidatorMaxFileSize, ValidatorMaxFiles } from "./validators/index.js";
 import { PluginThumbnailGenerator, PluginImageCompressor } from "./plugins/index.js";
-import { createPluginContext, createFileError, getExtension, setupInitialFiles, dataUrlToBlob, deriveThumbnailKey } from "./utils.js";
+import { createPluginContext, createFileError, getExtension, setupInitialFiles } from "./utils.js";
 import { createPluginRunner } from "./plugin-runner.js";
 import { createFileOperations } from "./file-operations.js";
 const defaultOptions = {
@@ -48,7 +48,8 @@ export const useUploadKit = (_options = {}) => {
       PluginThumbnailGenerator({
         maxWidth: thumbOpts.width ?? 128,
         maxHeight: thumbOpts.height ?? 128,
-        quality: thumbOpts.quality ?? 1
+        quality: thumbOpts.quality ?? 1,
+        upload: thumbOpts.upload ?? false
       })
     );
   }
@@ -65,8 +66,7 @@ export const useUploadKit = (_options = {}) => {
       })
     );
   }
-  const shouldUploadThumbnails = options.thumbnails !== false && options.thumbnails !== void 0 && typeof options.thumbnails === "object" && options.thumbnails.upload === true;
-  const { getPluginEmitFn, runPluginStage } = createPluginRunner({ options, files, emitter });
+  const { getPluginEmitFn, runPluginStage } = createPluginRunner({ options, files, emitter, getStoragePlugin });
   const uploadHolder = { fn: async () => {
   } };
   const fileOps = createFileOperations({
@@ -92,16 +92,16 @@ export const useUploadKit = (_options = {}) => {
   const updateFile = (fileId, updatedFile) => {
     files.value = files.value.map((file) => file.id === fileId ? { ...file, ...updatedFile } : file);
   };
-  const initializeExistingFiles = async (initialFiles) => {
-    const initializedfiles = await Promise.all(
+  const resolveRemoteFiles = async (initialFiles) => {
+    const storagePlugin = getStoragePlugin();
+    if (!storagePlugin?.hooks.getRemoteFile) {
+      throw new Error("Storage plugin with getRemoteFile hook is required to resolve remote files");
+    }
+    const resolved = await Promise.all(
       initialFiles.map(async (file) => {
         const storageKey = file.storageKey;
         if (!storageKey) return null;
-        const storagePlugin = getStoragePlugin();
-        if (!storagePlugin?.hooks.getRemoteFile) {
-          throw new Error("Storage plugin with getRemoteFile hook is required to initialize existing files");
-        }
-        const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
+        const context = createPluginContext(storagePlugin.id, files.value, options, emitter, storagePlugin);
         const remoteFileData = await storagePlugin.hooks.getRemoteFile(storageKey, context);
         const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
         const name = storageKey.split("/").pop() || storageKey;
@@ -124,8 +124,27 @@ export const useUploadKit = (_options = {}) => {
         return existingFile;
       })
     );
-    const filteredFiles = initializedfiles.filter((f) => f !== null);
-    files.value = [...filteredFiles];
+    return resolved.filter((f) => f !== null);
+  };
+  const initializeExistingFiles = async (initialFiles) => {
+    const resolvedFiles = await resolveRemoteFiles(initialFiles);
+    files.value = [...resolvedFiles];
+  };
+  const appendExistingFiles = async (initialFiles) => {
+    const existingKeys = new Set(files.value.map((f) => f.storageKey).filter(Boolean));
+    let filesToAdd = initialFiles.filter((f) => f.storageKey && !existingKeys.has(f.storageKey));
+    if (filesToAdd.length === 0) return [];
+    if (options.maxFiles !== false && options.maxFiles !== void 0) {
+      const available = options.maxFiles - files.value.length;
+      if (available <= 0) return [];
+      filesToAdd = filesToAdd.slice(0, available);
+    }
+    const resolvedFiles = await resolveRemoteFiles(filesToAdd);
+    files.value.push(...resolvedFiles);
+    resolvedFiles.forEach((file) => {
+      emitter.emit("file:added", file);
+    });
+    return resolvedFiles;
   };
   const addFile = async (file) => {
     const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -206,21 +225,7 @@ export const useUploadKit = (_options = {}) => {
     const currentFile = files.value.find((f) => f.id === processedFile.id);
     const preview = currentFile?.preview || remoteUrl;
     const storageKey = extractStorageKey(uploadResult);
-    let thumbnail;
-    if (shouldUploadThumbnails && currentFile?.preview?.startsWith("data:")) {
-      try {
-        const thumbnailBlob = dataUrlToBlob(currentFile.preview);
-        const thumbnailKey = deriveThumbnailKey(processedFile.id);
-        const thumbnailResult = await storagePlugin.upload(thumbnailBlob, thumbnailKey, {
-          contentType: thumbnailBlob.type
-        });
-        thumbnail = { url: thumbnailResult.url, storageKey: thumbnailResult.storageKey };
-      } catch (err) {
-        if (import.meta.dev) {
-          console.warn(`[useUploadKit] Thumbnail upload failed for "${processedFile.name}":`, err);
-        }
-      }
-    }
+    const thumbnail = currentFile?.thumbnail;
     updateFile(processedFile.id, { status: "complete", uploadResult, remoteUrl, preview, storageKey, thumbnail });
   };
   const upload = async () => {
@@ -280,6 +285,7 @@ export const useUploadKit = (_options = {}) => {
     replaceFileData: fileOps.replaceFileData,
     updateFile,
     initializeExistingFiles,
+    appendExistingFiles,
     // Utilities
     addPlugin,
     // Events

package/dist/runtime/composables/useUploadKit/plugin-runner.d.ts

@@ -1,11 +1,12 @@
 import type { Ref } from "vue";
 import type { Emitter } from "mitt";
-import type { UploadFile, UploadOptions, PluginLifecycleStage } from "./types.js";
+import type { UploadFile, UploadOptions, PluginLifecycleStage, StoragePlugin } from "./types.js";
 type EmitFn = <K extends string | number | symbol>(event: K, payload: any) => void;
 export interface PluginRunnerDeps<TUploadResult = any> {
     options: UploadOptions;
     files: Ref<UploadFile<TUploadResult>[]>;
     emitter: Emitter<any>;
+    getStoragePlugin: () => StoragePlugin<any, any> | null;
 }
 /**
  * Creates the plugin execution system with cached emit functions

package/dist/runtime/composables/useUploadKit/plugin-runner.js

@@ -1,5 +1,5 @@
 export function createPluginRunner(deps) {
-  const { options, files, emitter } = deps;
+  const { options, files, emitter, getStoragePlugin } = deps;
   const pluginEmitFunctions = /* @__PURE__ */ new Map();
   const getPluginEmitFn = (pluginId) => {
     let emitFn = pluginEmitFunctions.get(pluginId);
@@ -34,9 +34,11 @@ export function createPluginRunner(deps) {
       const hook = plugin.hooks[stage];
       if (!hook) continue;
       try {
+        const storage = getStoragePlugin();
         const context = {
           files: files.value,
           options,
+          storage: storage || void 0,
           emit: getPluginEmitFn(plugin.id)
         };
         const result = await callPluginHook(hook, stage, currentFile, context);

package/dist/runtime/composables/useUploadKit/plugins/thumbnail-generator.d.ts

@@ -3,6 +3,7 @@ interface ThumbnailGeneratorOptions {
     maxHeight?: number;
     quality?: number;
     videoCaptureTime?: number;
+    upload?: boolean;
 }
 export declare const PluginThumbnailGenerator: (options: ThumbnailGeneratorOptions) => import("../types.js").ProcessingPlugin<any, Record<string, never>>;
 export {};

package/dist/runtime/composables/useUploadKit/plugins/thumbnail-generator.js

@@ -1,5 +1,5 @@
 import { defineProcessingPlugin } from "../types.js";
-import { calculateThumbnailDimensions } from "../utils.js";
+import { calculateThumbnailDimensions, dataUrlToBlob, deriveThumbnailKey } from "../utils.js";
 export const PluginThumbnailGenerator = defineProcessingPlugin((pluginOptions) => {
   return {
     id: "thumbnail-generator",
@@ -35,6 +35,24 @@ export const PluginThumbnailGenerator = defineProcessingPlugin((pluginOptions) =
           URL.revokeObjectURL(sourceUrl);
         }
         return file;
+      },
+      process: async (file, context) => {
+        const { upload = false } = pluginOptions;
+        if (upload && context.storage && file.preview?.startsWith("data:")) {
+          try {
+            const thumbnailBlob = dataUrlToBlob(file.preview);
+            const thumbnailKey = deriveThumbnailKey(file.id);
+            const thumbnailResult = await context.storage.upload(thumbnailBlob, thumbnailKey, {
+              contentType: thumbnailBlob.type
+            });
+            file.thumbnail = { url: thumbnailResult.url, storageKey: thumbnailResult.storageKey };
+          } catch (err) {
+            if (import.meta.dev) {
+              console.warn(`[thumbnail-generator] Thumbnail upload failed for "${file.name}":`, err);
+            }
+          }
+        }
+        return file;
       }
     }
   };

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

@@ -344,6 +344,11 @@ export type UploaderEvents<TUploadResult = any> = CoreUploaderEvents<TUploadResu
 export type PluginContext<TPluginEvents extends Record<string, any> = Record<string, never>> = {
     files: UploadFile[];
     options: UploadOptions;
+    /**
+     * Storage plugin for uploading derivatives (thumbnails, variants, etc.)
+     * Available only when a storage plugin is configured
+     */
+    storage?: StoragePlugin<any, any>;
     /**
      * Emit custom plugin events
      * Events are automatically prefixed with the plugin ID

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

@@ -1,4 +1,4 @@
-import type { PluginContext, UploadFile, FileError, UploadOptions, InitialFileInput } from "./types.js";
+import type { PluginContext, UploadFile, FileError, UploadOptions, InitialFileInput, StoragePlugin } from "./types.js";
 import type { Emitter } from "mitt";
 /**
  * Get file extension from filename
@@ -7,7 +7,7 @@ export declare function getExtension(fullFileName: string): string;
 /**
  * Create a plugin context object with consistent structure
  */
-export declare function createPluginContext<TPluginEvents extends Record<string, any> = Record<string, never>>(pluginId: string, files: UploadFile[], options: UploadOptions, emitter: Emitter<any>): PluginContext<TPluginEvents>;
+export declare function createPluginContext<TPluginEvents extends Record<string, any> = Record<string, never>>(pluginId: string, files: UploadFile[], options: UploadOptions, emitter: Emitter<any>, storage?: StoragePlugin<any, any>): PluginContext<TPluginEvents>;
 /**
  * Create a consistent file error object
  */

package/dist/runtime/composables/useUploadKit/utils.js

@@ -6,10 +6,11 @@ export function getExtension(fullFileName) {
   }
   return fullFileName.slice(lastDot + 1).toLocaleLowerCase();
 }
-export function createPluginContext(pluginId, files, options, emitter) {
+export function createPluginContext(pluginId, files, options, emitter, storage) {
   return {
     files,
     options,
+    storage,
     emit: (event, payload) => {
       const prefixedEvent = `${pluginId}:${String(event)}`;
       emitter.emit(prefixedEvent, payload);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-upload-kit",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "A powerful, plugin-based file upload manager for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-upload-kit.git",
@@ -53,8 +53,8 @@
     "mitt": "3.0.1"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "3.988.0",
-    "@aws-sdk/lib-storage": "3.988.0",
+    "@aws-sdk/client-s3": "3.989.0",
+    "@aws-sdk/lib-storage": "3.989.0",
     "@azure/storage-file-datalake": "12.29.0",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",