nuxt-upload-kit 0.1.1

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

@@ -0,0 +1,55 @@
+import { type PathHttpHeaders } from "@azure/storage-file-datalake";
+export interface AzureDataLakeOptions {
+    /**
+     * Static SAS URL for Azure Data Lake Storage
+     */
+    sasURL?: string;
+    /**
+     * Function to dynamically fetch SAS URL
+     * Use this to handle token expiration/refreshing.
+     * If provided, it will be called before every file operation.
+     */
+    getSASUrl?: () => Promise<string>;
+    /**
+     * Optional subdirectory path within the container
+     * @example "uploads/images"
+     */
+    path?: string;
+    /**
+     * Custom metadata to attach to uploaded files
+     */
+    metadata?: Record<string, string>;
+    /**
+     * Custom HTTP headers for uploaded files
+     */
+    pathHttpHeaders?: Omit<PathHttpHeaders, "contentType">;
+    /**
+     * Automatically try to create the directory if it doesn't exist.
+     * Disable this if your SAS token only has 'Write' (Blob) permissions
+     * and not 'Create' (Directory) permissions.
+     * @default true
+     */
+    autoCreateDirectory?: boolean;
+    /**
+     * Number of retry attempts for failed operations
+     * @default 3
+     */
+    retries?: number;
+    /**
+     * Initial delay between retries in milliseconds
+     * Uses exponential backoff: delay * (2 ^ attempt)
+     * @default 1000 (1 second)
+     */
+    retryDelay?: number;
+}
+export interface AzureUploadResult {
+    /**
+     * Full URL to the uploaded file
+     */
+    url: string;
+    /**
+     * File name/path in the storage
+     */
+    blobPath: string;
+}
+export declare const PluginAzureDataLake: (options: AzureDataLakeOptions) => import("../../types.js").StoragePlugin<AzureUploadResult, Record<string, never>>;

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

@@ -0,0 +1,137 @@
+import { ref } from "vue";
+import { DataLakeDirectoryClient } from "@azure/storage-file-datalake";
+import { defineStoragePlugin } from "../../types.js";
+export const PluginAzureDataLake = defineStoragePlugin((options) => {
+  const sasURL = ref(options.sasURL || "");
+  let refreshPromise = null;
+  const directoryCheckedCache = /* @__PURE__ */ new Set();
+  const maxRetries = options.retries ?? 3;
+  const initialRetryDelay = options.retryDelay ?? 1e3;
+  async function withRetry(operation, operationName) {
+    let lastError;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await operation();
+      } catch (error) {
+        lastError = error;
+        if (attempt === maxRetries) {
+          break;
+        }
+        const delay = initialRetryDelay * Math.pow(2, attempt);
+        if (import.meta.dev) {
+          console.warn(
+            `[Azure Storage] ${operationName} failed (attempt ${attempt + 1}/${maxRetries + 1}). Retrying in ${delay}ms...`,
+            error
+          );
+        }
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+    throw new Error(`[Azure Storage] ${operationName} failed after ${maxRetries + 1} attempts: ${lastError?.message}`);
+  }
+  if (options.getSASUrl && !options.sasURL) {
+    options.getSASUrl().then((url) => {
+      sasURL.value = url;
+    });
+  }
+  const isTokenExpired = (urlStr, bufferMinutes = 5) => {
+    if (!urlStr) return true;
+    try {
+      const url = new URL(urlStr);
+      const expiryStr = url.searchParams.get("se");
+      if (!expiryStr) return true;
+      const expiry = new Date(expiryStr);
+      const now = /* @__PURE__ */ new Date();
+      return now.getTime() + bufferMinutes * 60 * 1e3 > expiry.getTime();
+    } catch {
+      return true;
+    }
+  };
+  const getFileClient = async (blobName) => {
+    if (options.getSASUrl && isTokenExpired(sasURL.value)) {
+      if (!refreshPromise) {
+        refreshPromise = options.getSASUrl().then((url) => {
+          refreshPromise = null;
+          return url;
+        });
+      }
+      sasURL.value = await refreshPromise;
+    }
+    let dir = new DataLakeDirectoryClient(sasURL.value);
+    if (options.path) {
+      const cleanPath = options.path.replace(/^\/+|\/+$/g, "");
+      dir = dir.getSubdirectoryClient(cleanPath);
+      const shouldCreateDir = options.autoCreateDirectory ?? true;
+      if (shouldCreateDir && !directoryCheckedCache.has(cleanPath)) {
+        try {
+          await dir.createIfNotExists();
+          directoryCheckedCache.add(cleanPath);
+        } catch (error) {
+          if (import.meta.dev) {
+            console.debug(`Azure directory already exists or couldn't be created: ${cleanPath}`, error);
+          }
+        }
+      }
+    }
+    return dir.getFileClient(blobName);
+  };
+  return {
+    id: "azure-datalake-storage",
+    hooks: {
+      /**
+       * Upload file to Azure Blob Storage
+       */
+      async upload(file, context) {
+        if (file.source !== "local" || file.data === null) {
+          throw new Error("Cannot upload remote file - no local data available");
+        }
+        return withRetry(async () => {
+          const fileClient = await getFileClient(file.id);
+          await fileClient.upload(file.data, {
+            metadata: {
+              ...options.metadata,
+              mimeType: file.mimeType,
+              size: String(file.size),
+              originalName: file.name
+            },
+            pathHttpHeaders: {
+              ...options.pathHttpHeaders,
+              contentType: file.mimeType
+            },
+            onProgress: ({ loadedBytes }) => {
+              const uploadedPercentage = Math.round(loadedBytes / file.size * 100);
+              context.onProgress(uploadedPercentage);
+            }
+          });
+          return {
+            url: fileClient.url,
+            blobPath: fileClient.name
+          };
+        }, `Upload file "${file.name}"`);
+      },
+      /**
+       * Get remote file metadata from Azure
+       */
+      async getRemoteFile(fileId, _context) {
+        return withRetry(async () => {
+          const fileClient = await getFileClient(fileId);
+          const properties = await fileClient.getProperties();
+          return {
+            size: properties.contentLength || 0,
+            mimeType: properties.contentType || "application/octet-stream",
+            remoteUrl: fileClient.url
+          };
+        }, `Get remote file "${fileId}"`);
+      },
+      /**
+       * Delete file from Azure Blob Storage
+       */
+      async remove(file, _context) {
+        return withRetry(async () => {
+          const fileClient = await getFileClient(file.id);
+          await fileClient.deleteIfExists();
+        }, `Delete file "${file.name}"`);
+      }
+    }
+  };
+});

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

@@ -0,0 +1,10 @@
+/**
+ * Storage Adapter Plugins
+ *
+ * These plugins handle the actual upload, download, and deletion of files
+ * to/from various cloud storage providers.
+ *
+ * Only ONE storage plugin should be active per uploader instance.
+ * If you need multiple storage destinations, create multiple uploader instances.
+ */
+export { PluginAzureDataLake, type AzureDataLakeOptions, type AzureUploadResult } from "./azure-datalake.js";

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

@@ -0,0 +1 @@
+export { PluginAzureDataLake } from "./azure-datalake.js";

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

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

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

@@ -0,0 +1,99 @@
+import { defineProcessingPlugin } from "../types.js";
+import { calculateThumbnailDimensions } from "../utils.js";
+export const PluginThumbnailGenerator = defineProcessingPlugin((pluginOptions) => {
+  return {
+    id: "thumbnail-generator",
+    hooks: {
+      preprocess: async (file, _context) => {
+        const { maxWidth = 200, maxHeight = 200, quality = 0.7, videoCaptureTime = 1 } = pluginOptions;
+        if (!file.mimeType.startsWith("image/") && !file.mimeType.startsWith("video/")) {
+          return file;
+        }
+        if (file.mimeType === "image/gif") {
+          return file;
+        }
+        if (file.mimeType === "image/svg+xml") {
+          return file;
+        }
+        if (file.source !== "local" || !file.data) {
+          return file;
+        }
+        const sourceUrl = URL.createObjectURL(file.data);
+        try {
+          let thumbnailUrl;
+          if (file.mimeType.startsWith("image/")) {
+            thumbnailUrl = await generateImageThumbnail(sourceUrl, maxWidth, maxHeight, quality);
+          } else if (file.mimeType.startsWith("video/")) {
+            thumbnailUrl = await generateVideoThumbnail(sourceUrl, maxWidth, maxHeight, quality, videoCaptureTime);
+          }
+          if (thumbnailUrl) {
+            file.preview = thumbnailUrl;
+          }
+        } catch (error) {
+          console.warn(`[ThumbnailGenerator] Failed for ${file.name}:`, error);
+        } finally {
+          URL.revokeObjectURL(sourceUrl);
+        }
+        return file;
+      }
+    }
+  };
+});
+async function generateImageThumbnail(sourceUrl, maxWidth, maxHeight, quality) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      try {
+        const { width, height } = calculateThumbnailDimensions(image.width, image.height, maxWidth, maxHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+        ctx.drawImage(image, 0, 0, width, height);
+        const thumbnailUrl = canvas.toDataURL("image/jpeg", quality);
+        resolve(thumbnailUrl);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to load image"));
+    };
+    image.src = sourceUrl;
+  });
+}
+async function generateVideoThumbnail(sourceUrl, maxWidth, maxHeight, quality, captureTime) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    video.muted = true;
+    video.onloadedmetadata = () => {
+      const seekTime = Math.min(captureTime, video.duration * 0.1);
+      video.currentTime = seekTime;
+    };
+    video.onseeked = () => {
+      try {
+        const { width, height } = calculateThumbnailDimensions(video.videoWidth, video.videoHeight, maxWidth, maxHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+        ctx.drawImage(video, 0, 0, width, height);
+        const thumbnailUrl = canvas.toDataURL("image/jpeg", quality);
+        resolve(thumbnailUrl);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    video.onerror = () => {
+      reject(new Error("Failed to load video"));
+    };
+    video.src = sourceUrl;
+  });
+}

package/dist/runtime/composables/useUploadKit/plugins/video-compressor.d.ts

@@ -0,0 +1,72 @@
+interface VideoCompressorOptions {
+    /**
+     * Target video codec
+     * @default 'libx264'
+     */
+    codec?: string;
+    /**
+     * Constant Rate Factor (0-51, lower = better quality, larger file)
+     * @default 28
+     */
+    crf?: number;
+    /**
+     * Target bitrate (e.g., '1M' = 1 megabit/sec)
+     * If specified, overrides CRF
+     */
+    bitrate?: string;
+    /**
+     * Maximum width (maintains aspect ratio)
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height (maintains aspect ratio)
+     */
+    maxHeight?: number;
+    /**
+     * Output format
+     * @default 'mp4'
+     */
+    format?: "mp4" | "webm" | "mov";
+    /**
+     * Minimum file size to compress (in bytes)
+     * Files smaller than this will be skipped
+     * @default 10MB
+     */
+    minSizeToCompress?: number;
+    /**
+     * Audio codec
+     * @default 'aac'
+     */
+    audioCodec?: string;
+    /**
+     * Audio bitrate
+     * @default '128k'
+     */
+    audioBitrate?: string;
+}
+type VideoCompressorEvents = {
+    start: {
+        file: any;
+        originalSize: number;
+    };
+    progress: {
+        file: any;
+        percentage: number;
+    };
+    complete: {
+        file: any;
+        originalSize: number;
+        compressedSize: number;
+        savedBytes: number;
+    };
+    skip: {
+        file: any;
+        reason: string;
+    };
+    error: {
+        file: any;
+        error: Error;
+    };
+};
+export declare const PluginVideoCompressor: (options: VideoCompressorOptions) => import("../types.js").ProcessingPlugin<any, VideoCompressorEvents>;
+export {};

package/dist/runtime/composables/useUploadKit/plugins/video-compressor.js

@@ -0,0 +1,111 @@
+import { defineProcessingPlugin } from "../types.js";
+import { useFFMpeg } from "../../useFFMpeg.js";
+import { watch } from "vue";
+export const PluginVideoCompressor = defineProcessingPlugin(
+  (pluginOptions = {}) => {
+    return {
+      id: "video-compressor",
+      hooks: {
+        process: async (file, context) => {
+          const {
+            codec = "libx264",
+            crf = 28,
+            bitrate,
+            maxWidth,
+            maxHeight,
+            format = "mp4",
+            minSizeToCompress = 10 * 1024 * 1024,
+            // 10MB
+            audioCodec = "aac",
+            audioBitrate = "128k"
+          } = pluginOptions;
+          if (!file.mimeType.startsWith("video/")) {
+            return file;
+          }
+          if (file.source !== "local") {
+            context.emit("skip", { file, reason: "Remote file, no local data to compress" });
+            return file;
+          }
+          if (file.size < minSizeToCompress) {
+            context.emit("skip", {
+              file,
+              reason: `File size (${(file.size / 1024 / 1024).toFixed(2)}MB) is below minimum (${(minSizeToCompress / 1024 / 1024).toFixed(2)}MB)`
+            });
+            return file;
+          }
+          let inputUrl;
+          let stopProgressWatch;
+          try {
+            context.emit("start", { file, originalSize: file.size });
+            inputUrl = URL.createObjectURL(file.data);
+            const ffmpeg = useFFMpeg({ inputUrl });
+            await ffmpeg.load();
+            stopProgressWatch = watch(
+              () => ffmpeg.progress.value,
+              (progress) => {
+                context.emit("progress", { file, percentage: Math.round(progress * 100) });
+              }
+            );
+            const convertOptions = ["-c:v", codec];
+            if (bitrate) {
+              convertOptions.push("-b:v", bitrate);
+            } else {
+              convertOptions.push("-crf", crf.toString());
+            }
+            if (maxWidth || maxHeight) {
+              let scaleFilter = "";
+              if (maxWidth && maxHeight) {
+                scaleFilter = `scale='min(${maxWidth},iw)':'min(${maxHeight},ih)':force_original_aspect_ratio=decrease`;
+              } else if (maxWidth) {
+                scaleFilter = `scale=${maxWidth}:-2`;
+              } else if (maxHeight) {
+                scaleFilter = `scale=-2:${maxHeight}`;
+              }
+              convertOptions.push("-vf", scaleFilter);
+            }
+            convertOptions.push("-c:a", audioCodec, "-b:a", audioBitrate);
+            const compressedFile = await ffmpeg.convert(convertOptions);
+            ffmpeg.unload();
+            if (!compressedFile) {
+              context.emit("error", { file, error: new Error("Compression failed: no output file") });
+              return file;
+            }
+            const originalSize = file.size;
+            const compressedSize = compressedFile.size;
+            const savedBytes = originalSize - compressedSize;
+            if (compressedSize < originalSize) {
+              context.emit("complete", {
+                file,
+                originalSize,
+                compressedSize,
+                savedBytes
+              });
+              return {
+                ...file,
+                data: compressedFile,
+                size: compressedFile.size,
+                name: file.name.replace(/\.[^.]+$/, `.${format}`),
+                mimeType: `video/${format}`
+              };
+            } else {
+              context.emit("skip", {
+                file,
+                reason: `Compressed size (${(compressedSize / 1024 / 1024).toFixed(2)}MB) is larger than original`
+              });
+              return file;
+            }
+          } catch (error) {
+            context.emit("error", { file, error });
+            console.error(`Video compression error for ${file.name}:`, error);
+            return file;
+          } finally {
+            stopProgressWatch?.();
+            if (inputUrl) {
+              URL.revokeObjectURL(inputUrl);
+            }
+          }
+        }
+      }
+    };
+  }
+);