nuxt-upload-kit 0.1.22 → 0.1.24

package/dist/module.json

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

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

@@ -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 } from "./utils.js";
+import { createPluginContext, createFileError, getExtension, setupInitialFiles, dataUrlToBlob, deriveThumbnailKey } from "./utils.js";
 import { createPluginRunner } from "./plugin-runner.js";
 import { createFileOperations } from "./file-operations.js";
 const defaultOptions = {
@@ -65,6 +65,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 uploadHolder = { fn: async () => {
   } };
@@ -205,7 +206,22 @@ 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 });
+    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);
+        }
+      }
+    }
+    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/plugins/storage/azure-datalake.d.ts

@@ -12,8 +12,11 @@ export interface AzureDataLakeOptions {
      * - File SAS (sr=b): Called per file for granular access control
      *
      * @param storageKey - The intended storage path for the file
+     * @param operation - The storage operation being performed. Use this to:
+     *   - Generate SAS tokens with appropriate permissions per operation
+     *   - Apply different server-side path resolution (e.g., prepend org prefix only for "upload")
      */
-    getSASUrl?: (storageKey: string) => Promise<string>;
+    getSASUrl?: (storageKey: string, operation: "upload" | "delete" | "read") => Promise<string>;
     /**
      * Optional subdirectory path within the container
      * @example "uploads/images"

package/dist/runtime/composables/useUploadKit/plugins/storage/azure-datalake.js

@@ -44,7 +44,7 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
       return true;
     }
   };
-  const getSasUrlForFile = async (storageKey) => {
+  const getSasUrlForFile = async (storageKey, operation) => {
     if (options.sasURL) {
       detectedMode ??= detectSasMode(options.sasURL);
       return options.sasURL;
@@ -52,16 +52,16 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
     if (!options.getSASUrl) {
       throw new Error("Either sasURL or getSASUrl must be provided");
     }
-    if (detectedMode === "file") return options.getSASUrl(storageKey);
+    if (detectedMode === "file") return options.getSASUrl(storageKey, operation);
     if (!detectedMode) {
-      const url = await options.getSASUrl(storageKey);
+      const url = await options.getSASUrl(storageKey, operation);
       detectedMode = detectSasMode(url);
       sasURL.value = url;
       if (import.meta.dev) console.debug(`[Azure Storage] Auto-detected SAS mode: ${detectedMode}`);
       if (detectedMode === "file") return url;
     }
     if (isTokenExpired(sasURL.value)) {
-      refreshPromise ??= options.getSASUrl(storageKey).then((url) => {
+      refreshPromise ??= options.getSASUrl(storageKey, operation).then((url) => {
         refreshPromise = null;
         sasURL.value = url;
         return url;
@@ -88,8 +88,8 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
     }
     return dir.getFileClient(filename);
   };
-  const getFileClient = async (storageKey) => {
-    const sasUrl = await getSasUrlForFile(storageKey);
+  const getFileClient = async (storageKey, operation) => {
+    const sasUrl = await getSasUrlForFile(storageKey, operation);
     if (detectedMode === "file") {
       return new DataLakeFileClient(sasUrl);
     }
@@ -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
@@ -106,7 +126,7 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
           throw new Error("Cannot upload remote file - no local data available");
         }
         const requestKey = buildFullStorageKey(file.id, true);
-        const fileClient = await getFileClient(requestKey);
+        const fileClient = await getFileClient(requestKey, "upload");
         await fileClient.upload(file.data, {
           metadata: {
             ...options.metadata,
@@ -134,7 +154,7 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
        * Expects the full storageKey (e.g., "basePath/subdir/filename.jpg").
        */
       async getRemoteFile(storageKey, _context) {
-        const fileClient = await getFileClient(storageKey);
+        const fileClient = await getFileClient(storageKey, "read");
         const properties = await fileClient.getProperties();
         return {
           size: properties.contentLength || 0,
@@ -158,7 +178,7 @@ export const PluginAzureDataLake = defineStorageAdapter((options) => {
           }
           return;
         }
-        const fileClient = await getFileClient(storageKey);
+        const fileClient = await getFileClient(storageKey, "delete");
         await fileClient.deleteIfExists();
       }
     }

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/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;
@@ -405,6 +433,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

@@ -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

@@ -37,6 +37,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.22",
+  "version": "0.1.24",
   "description": "A powerful, plugin-based file upload manager for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-upload-kit.git",
@@ -50,35 +50,35 @@
     "docs:dev": "nuxt dev docs --extends docus"
   },
   "dependencies": {
-    "mitt": "^3.0.1"
+    "mitt": "3.0.1"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "3.982.0",
-    "@aws-sdk/lib-storage": "3.982.0",
-    "@azure/storage-file-datalake": "^12.29.0",
+    "@aws-sdk/client-s3": "3.988.0",
+    "@aws-sdk/lib-storage": "3.988.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/kit": "^4.3.0",
-    "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.3.0",
-    "@nuxt/test-utils": "^3.23.0",
+    "@nuxt/devtools": "3.2.1",
+    "@nuxt/eslint-config": "1.15.1",
+    "@nuxt/kit": "4.3.1",
+    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/schema": "4.3.1",
+    "@nuxt/test-utils": "4.0.0",
     "@types/node": "latest",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^9.39.2",
+    "@vitejs/plugin-vue": "6.0.4",
+    "@vitest/coverage-v8": "4.0.18",
+    "eslint": "10.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
-    "firebase": "^12.8.0",
-    "happy-dom": "20.5.0",
-    "nuxt": "^4.3.0",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.3",
-    "unbuild": "^3.6.1",
-    "vitest": "^4.0.18",
-    "vue": "^3.5.27",
-    "vue-tsc": "^3.2.4"
+    "firebase": "12.9.0",
+    "happy-dom": "20.6.1",
+    "nuxt": "4.3.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "unbuild": "3.6.1",
+    "vitest": "4.0.18",
+    "vue": "3.5.28",
+    "vue-tsc": "3.2.4"
   },
   "peerDependencies": {
     "@azure/storage-file-datalake": "^12.0.0",
@@ -100,5 +100,5 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@10.28.2"
+  "packageManager": "pnpm@10.29.3"
 }