nuxt-upload-kit 0.1.23 → 0.1.25

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-upload-kit",
   "configKey": "uploadKit",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "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

@@ -71,6 +71,10 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
+        readonly thumbnail?: {
+            readonly url: string;
+            readonly storageKey: string;
+        } | undefined;
     } | {
         readonly source: Exclude<import("./types.js").FileSource, "local">;
         readonly data: null;
@@ -93,6 +97,10 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
+        readonly thumbnail?: {
+            readonly url: string;
+            readonly storageKey: string;
+        } | undefined;
     })[], readonly ({
         readonly source: "local";
         readonly data: {
@@ -164,6 +172,10 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
+        readonly thumbnail?: {
+            readonly url: string;
+            readonly storageKey: string;
+        } | undefined;
     } | {
         readonly source: Exclude<import("./types.js").FileSource, "local">;
         readonly data: null;
@@ -186,6 +198,10 @@ export declare const useUploadKit: <TUploadResult = any>(_options?: UploadOption
         readonly meta: {
             readonly [x: string]: Readonly<unknown>;
         };
+        readonly thumbnail?: {
+            readonly url: string;
+            readonly storageKey: string;
+        } | undefined;
     })[]>>;
     totalProgress: import("vue").ComputedRef<number>;
     isReady: Readonly<import("vue").Ref<boolean, boolean>>;

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

@@ -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,7 +66,7 @@ export const useUploadKit = (_options = {}) => {
       })
     );
   }
-  const { getPluginEmitFn, runPluginStage } = createPluginRunner({ options, files, emitter });
+  const { getPluginEmitFn, runPluginStage } = createPluginRunner({ options, files, emitter, getStoragePlugin });
   const uploadHolder = { fn: async () => {
   } };
   const fileOps = createFileOperations({
@@ -100,7 +101,7 @@ export const useUploadKit = (_options = {}) => {
         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;
@@ -205,7 +206,8 @@ export const useUploadKit = (_options = {}) => {
     const currentFile = files.value.find((f) => f.id === processedFile.id);
     const preview = currentFile?.preview || remoteUrl;
     const storageKey = extractStorageKey(uploadResult);
-    updateFile(processedFile.id, { status: "complete", uploadResult, remoteUrl, preview, storageKey });
+    const thumbnail = currentFile?.thumbnail;
+    updateFile(processedFile.id, { status: "complete", uploadResult, remoteUrl, preview, storageKey, thumbnail });
   };
   const upload = async () => {
     const filesToUpload = files.value.filter((f) => f.status === "waiting");

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/storage/azure-datalake.js

@@ -97,6 +97,26 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
   };
   return {
     id: "azure-datalake-storage",
+    async upload(data, storageKey, uploadOptions) {
+      const requestKey = buildFullStorageKey(storageKey, true);
+      const fileClient = await getFileClient(requestKey, "upload");
+      const contentType = uploadOptions?.contentType || "application/octet-stream";
+      await fileClient.upload(data, {
+        pathHttpHeaders: {
+          ...options.pathHttpHeaders,
+          contentType
+        },
+        onProgress: uploadOptions?.onProgress ? ({ loadedBytes }) => {
+          const percentage = Math.round(loadedBytes / data.size * 100);
+          uploadOptions.onProgress(percentage);
+        } : void 0
+      });
+      const actualStorageKey = getBlobPathFromUrl(fileClient.url) || requestKey;
+      return {
+        url: fileClient.url,
+        storageKey: actualStorageKey
+      };
+    },
     hooks: {
       /**
        * Upload file to Azure Blob Storage

package/dist/runtime/composables/useUploadKit/plugins/storage/firebase-storage.js

@@ -56,6 +56,12 @@ export const PluginFirebaseStorage = defineStorageAdapter((options) => {
   };
   return {
     id: "firebase-storage",
+    async upload(data, storageKey, uploadOptions) {
+      const fullKey = buildFullStorageKey(storageKey);
+      const contentType = uploadOptions?.contentType || "application/octet-stream";
+      return uploadToFirebase(fullKey, data, contentType, storageKey, uploadOptions?.onProgress || (() => {
+      }));
+    },
     hooks: {
       /**
        * Upload file to Firebase Storage

package/dist/runtime/composables/useUploadKit/plugins/storage/s3.js

@@ -33,6 +33,23 @@ export const PluginS3 = defineStorageAdapter((options) => {
   }
   return {
     id: "s3-storage",
+    async upload(data, storageKey, uploadOptions) {
+      return withRetry(async () => {
+        const fullKey = buildFullStorageKey(storageKey);
+        const contentType = uploadOptions?.contentType || "application/octet-stream";
+        const { uploadUrl, publicUrl } = await options.getPresignedUploadUrl(fullKey, contentType, {
+          fileName: storageKey,
+          fileSize: data.size
+        });
+        const etag = await uploadWithProgress(uploadUrl, data, contentType, uploadOptions?.onProgress || (() => {
+        }));
+        return {
+          url: publicUrl,
+          storageKey: fullKey,
+          etag
+        };
+      }, `Standalone upload "${storageKey}"`);
+    },
     hooks: {
       /**
        * Upload file to S3 using presigned URL

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

@@ -81,6 +81,14 @@ export interface BaseUploadFile<TUploadResult = any> {
      * Plugins can add data here (e.g., { extension: 'jpg', originalWidth: 4000 })
      */
     meta: Record<string, unknown>;
+    /**
+     * Thumbnail upload result (populated when `thumbnails.upload` is enabled).
+     * Contains the URL and storage key for the uploaded thumbnail.
+     */
+    thumbnail?: {
+        url: string;
+        storageKey: string;
+    };
 }
 /**
  * Local upload file - originates from user's device
@@ -272,6 +280,26 @@ export interface ThumbnailOptions {
     width?: number;
     height?: number;
     quality?: number;
+    /**
+     * Upload generated thumbnails to storage alongside main files.
+     * Requires a storage adapter with standalone upload support.
+     *
+     * When enabled, after each file uploads, its thumbnail preview
+     * is converted to a Blob and uploaded using `storage.upload()`.
+     * The result is stored on `file.thumbnail`.
+     *
+     * @default false
+     */
+    upload?: boolean;
+}
+/**
+ * Options for standalone upload (bypassing the useUploadKit pipeline)
+ */
+export interface StandaloneUploadOptions {
+    /** MIME type of the data being uploaded. Defaults to 'application/octet-stream'. */
+    contentType?: string;
+    /** Progress callback (0-100) */
+    onProgress?: (percentage: number) => void;
 }
 export interface ImageCompressionOptions {
     maxWidth?: number;
@@ -316,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
@@ -405,6 +438,39 @@ export interface StoragePlugin<TUploadResult = any, TPluginEvents extends Record
     hooks: StoragePluginHooks<TUploadResult, TPluginEvents>;
     options?: UploadOptions;
     events?: TPluginEvents;
+    /**
+     * Upload a raw Blob or File directly to storage, bypassing the useUploadKit pipeline.
+     *
+     * This is a low-level primitive for uploading arbitrary data without going through
+     * validation, preprocessing, or processing stages. Useful for:
+     * - Uploading edited/cropped images
+     * - Uploading thumbnails separately
+     * - Any scenario where you have a Blob and just need it in storage
+     *
+     * The `storageKey` is treated like a filename — the adapter prepends any configured
+     * path prefix (e.g., `options.path`), and the server-side SAS/presigned URL handler
+     * may further resolve it (e.g., prepend organization ID).
+     *
+     * @param data - The Blob or File to upload
+     * @param storageKey - Filename or relative path for the file in storage
+     * @param options - Optional content type and progress callback
+     * @returns The upload result with `url` and resolved `storageKey`
+     *
+     * @example
+     * ```typescript
+     * const storage = PluginAzureDataLake({ getSASUrl: ... })
+     *
+     * // Upload an edited image
+     * const result = await storage.upload(croppedBlob, 'edited_photo.jpg', {
+     *   contentType: 'image/jpeg',
+     * })
+     * console.log(result.storageKey) // Full resolved path in storage
+     * ```
+     */
+    upload: (data: Blob | File, storageKey: string, options?: StandaloneUploadOptions) => Promise<TUploadResult & {
+        url: string;
+        storageKey: string;
+    }>;
 }
 /**
  * Base plugin interface (for internal use - supports both types)

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
  */
@@ -19,6 +19,16 @@ export declare function calculateThumbnailDimensions(originalWidth: number, orig
     width: number;
     height: number;
 };
+/**
+ * Convert a base64-encoded data URL (e.g., from canvas.toDataURL) to a Blob.
+ * Only supports base64-encoded data URLs (`;base64,` format).
+ */
+export declare function dataUrlToBlob(dataUrl: string): Blob;
+/**
+ * Derive a thumbnail storage key from a file ID by appending '_thumb' before the extension
+ * @example "1738345678901-abc123.jpg" → "1738345678901-abc123_thumb.jpg"
+ */
+export declare function deriveThumbnailKey(fileId: string): string;
 /**
  * Cleanup object URLs to prevent memory leaks
  * @param urlMap Map of file IDs to object URLs

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);
@@ -37,6 +38,24 @@ export function calculateThumbnailDimensions(originalWidth, originalHeight, maxW
   }
   return { width, height };
 }
+export function dataUrlToBlob(dataUrl) {
+  if (!dataUrl.includes(";base64,")) {
+    throw new Error("dataUrlToBlob only supports base64-encoded data URLs");
+  }
+  const [header, base64] = dataUrl.split(",");
+  const mimeType = header.match(/:(.*?);/)?.[1] ?? "image/jpeg";
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mimeType });
+}
+export function deriveThumbnailKey(fileId) {
+  const lastDot = fileId.lastIndexOf(".");
+  if (lastDot === -1) return `${fileId}_thumb`;
+  return `${fileId.slice(0, lastDot)}_thumb${fileId.slice(lastDot)}`;
+}
 export function cleanupObjectURLs(urlMap, fileId) {
   if (fileId) {
     const url = urlMap.get(fileId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-upload-kit",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "A powerful, plugin-based file upload manager for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-upload-kit.git",
@@ -50,20 +50,20 @@
     "docs:dev": "nuxt dev docs --extends docus"
   },
   "dependencies": {
-    "mitt": "^3.0.1"
+    "mitt": "3.0.1"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "3.985.0",
-    "@aws-sdk/lib-storage": "3.985.0",
-    "@azure/storage-file-datalake": "^12.29.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",
-    "@nuxt/devtools": "^3.1.1",
-    "@nuxt/eslint-config": "^1.13.0",
+    "@nuxt/devtools": "3.2.1",
+    "@nuxt/eslint-config": "1.15.1",
     "@nuxt/kit": "4.3.1",
-    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "4.3.1",
-    "@nuxt/test-utils": "^4.0.0",
+    "@nuxt/test-utils": "4.0.0",
     "@types/node": "latest",
     "@vitejs/plugin-vue": "6.0.4",
     "@vitest/coverage-v8": "4.0.18",
@@ -71,7 +71,7 @@
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
     "firebase": "12.9.0",
-    "happy-dom": "20.5.3",
+    "happy-dom": "20.6.1",
     "nuxt": "4.3.1",
     "prettier": "3.8.1",
     "typescript": "5.9.3",
@@ -100,5 +100,5 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@10.29.2"
+  "packageManager": "pnpm@10.29.3"
 }