nuxt-upload-kit 0.1.1

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

@@ -0,0 +1,486 @@
+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, cleanupObjectURLs } from "./utils.js";
+function isStoragePlugin(plugin) {
+  return plugin !== null && "upload" in plugin.hooks;
+}
+function getExtension(fullFileName) {
+  const lastDot = fullFileName.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === fullFileName.length - 1) {
+    throw new Error("Invalid file name");
+  }
+  return fullFileName.slice(lastDot + 1).toLocaleLowerCase();
+}
+const defaultOptions = {
+  storage: void 0,
+  plugins: [],
+  maxFileSize: false,
+  allowedFileTypes: false,
+  maxFiles: false,
+  thumbnails: false,
+  imageCompression: false,
+  autoProceed: false
+};
+export const useUploadKit = (_options = {}) => {
+  const options = { ...defaultOptions, ..._options };
+  const files = ref([]);
+  const emitter = mitt();
+  const status = ref("waiting");
+  const createdObjectURLs = /* @__PURE__ */ new Map();
+  const pluginEmitFunctions = /* @__PURE__ */ new Map();
+  const getPluginEmitFn = (pluginId) => {
+    let emitFn = pluginEmitFunctions.get(pluginId);
+    if (!emitFn) {
+      emitFn = (event, payload) => {
+        const prefixedEvent = `${pluginId}:${String(event)}`;
+        emitter.emit(prefixedEvent, payload);
+      };
+      pluginEmitFunctions.set(pluginId, emitFn);
+    }
+    return emitFn;
+  };
+  let uploadFn = async () => {
+    throw new Error("No uploader configured");
+  };
+  let getRemoteFileFn = async () => {
+    throw new Error("Function to get remote file not configured");
+  };
+  const totalProgress = computed(() => {
+    if (files.value.length === 0) return 0;
+    const sum = files.value.reduce((acc, file) => acc + file.progress.percentage, 0);
+    return Math.round(sum / files.value.length);
+  });
+  const getStoragePlugin = () => {
+    if (options.storage) {
+      return options.storage;
+    }
+    if (!options.plugins) return null;
+    for (let i = options.plugins.length - 1; i >= 0; i--) {
+      const plugin = options.plugins[i] || null;
+      if (isStoragePlugin(plugin)) {
+        if (import.meta.dev) {
+          console.warn(
+            `[useUploadKit] Storage plugin "${plugin.id}" found in plugins array.
+This is deprecated. Use the 'storage' option instead:
+
+  useUploadKit({ storage: ${plugin.id}(...) })`
+          );
+        }
+        return plugin;
+      }
+    }
+    return null;
+  };
+  const addPlugin = (plugin) => {
+    const hasUploadHook = "upload" in plugin.hooks;
+    if (hasUploadHook) {
+      if (import.meta.dev) {
+        console.warn(
+          `[useUploadKit] Storage plugin "${plugin.id}" should use the 'storage' option instead of 'plugins':
+
+  useUploadKit({
+    storage: ${plugin.id}({ ... }),  // \u2713 Correct
+    plugins: [...]                    // Only for validators/processors
+  })
+`
+        );
+      }
+    }
+    if (options.plugins) {
+      options.plugins.push(plugin);
+    } else {
+      options.plugins = [plugin];
+    }
+  };
+  if (options.maxFiles !== false && options.maxFiles !== void 0) {
+    addPlugin(ValidatorMaxFiles({ maxFiles: options.maxFiles }));
+  }
+  if (options.maxFileSize !== false && options.maxFileSize !== void 0) {
+    addPlugin(ValidatorMaxFileSize({ maxFileSize: options.maxFileSize }));
+  }
+  if (options.allowedFileTypes !== false && options.allowedFileTypes !== void 0 && options.allowedFileTypes.length > 0) {
+    addPlugin(ValidatorAllowedFileTypes({ allowedFileTypes: options.allowedFileTypes }));
+  }
+  if (options.thumbnails !== false && options.thumbnails !== void 0) {
+    const thumbOpts = options.thumbnails === true ? {} : options.thumbnails || {};
+    addPlugin(
+      PluginThumbnailGenerator({
+        maxWidth: thumbOpts.width ?? 128,
+        maxHeight: thumbOpts.height ?? 128,
+        quality: thumbOpts.quality ?? 1
+      })
+    );
+  }
+  if (options.imageCompression !== false && options.imageCompression !== void 0) {
+    const compressionOpts = options.imageCompression === true ? {} : options.imageCompression || {};
+    addPlugin(
+      PluginImageCompressor({
+        maxWidth: compressionOpts.maxWidth ?? 1920,
+        maxHeight: compressionOpts.maxHeight ?? 1920,
+        quality: compressionOpts.quality ?? 0.85,
+        outputFormat: compressionOpts.outputFormat ?? "auto",
+        minSizeToCompress: compressionOpts.minSizeToCompress ?? 1e5,
+        preserveMetadata: compressionOpts.preserveMetadata ?? true
+      })
+    );
+  }
+  emitter.on("upload:progress", ({ file, progress }) => {
+    updateFile(file.id, { progress: { percentage: progress } });
+  });
+  const updateFile = (fileId, updatedFile) => {
+    files.value = files.value.map((file) => file.id === fileId ? { ...file, ...updatedFile } : file);
+  };
+  const onUpload = (fn) => {
+    uploadFn = fn;
+  };
+  const onGetRemoteFile = (fn) => {
+    getRemoteFileFn = fn;
+  };
+  const initializeExistingFiles = async (initialFiles) => {
+    const initializedfiles = await Promise.all(
+      initialFiles.map(async (file) => {
+        if (!file.id) return null;
+        const storagePlugin = getStoragePlugin();
+        let remoteFileData;
+        if (storagePlugin?.hooks.getRemoteFile) {
+          const context = createPluginContext(storagePlugin.id, files.value, options, emitter);
+          remoteFileData = await storagePlugin.hooks.getRemoteFile(file.id, context);
+        } else {
+          remoteFileData = await getRemoteFileFn(file.id);
+        }
+        const existingFile = {
+          ...file,
+          id: file.id,
+          name: file.id,
+          data: null,
+          status: "complete",
+          progress: { percentage: 100 },
+          meta: {},
+          size: remoteFileData.size,
+          mimeType: remoteFileData.mimeType,
+          remoteUrl: remoteFileData.remoteUrl,
+          preview: remoteFileData.preview || file.preview || remoteFileData.remoteUrl,
+          // Use preview from storage, passed-in value, or fallback to remoteUrl
+          source: "storage"
+          // File loaded from remote storage
+        };
+        return existingFile;
+      })
+    );
+    const filteredFiles = initializedfiles.filter((f) => f !== null);
+    files.value = [...filteredFiles];
+  };
+  const addFile = async (file) => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const extension = getExtension(file.name);
+    const uploadFile = {
+      id: `${id}.${extension}`,
+      progress: {
+        percentage: 0
+      },
+      name: file.name,
+      size: file.size,
+      status: "waiting",
+      mimeType: file.type,
+      data: file,
+      source: "local",
+      meta: {
+        extension
+      }
+    };
+    try {
+      const validatedFile = await runPluginStage("validate", uploadFile);
+      if (!validatedFile) {
+        throw new Error(`File validation failed for ${file.name}`);
+      }
+      const preprocessedFile = await runPluginStage("preprocess", validatedFile);
+      const fileToAdd = preprocessedFile || validatedFile;
+      files.value.push(fileToAdd);
+      emitter.emit("file:added", fileToAdd);
+      if (options.autoProceed) {
+        upload();
+      }
+      return validatedFile;
+    } catch (err) {
+      const error = createFileError(uploadFile, err);
+      const fileWithError = { ...uploadFile, status: "error", error };
+      files.value.push(fileWithError);
+      emitter.emit("file:error", { file: fileWithError, error });
+      throw err;
+    }
+  };
+  const addFiles = async (newFiles) => {
+    const results = await Promise.allSettled(newFiles.map((file) => addFile(file)));
+    const addedFiles = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
+    return addedFiles;
+  };
+  const removeFile = async (fileId) => {
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) return;
+    if (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 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",
+      // Mark as needing upload
+      progress: { percentage: 0 },
+      remoteUrl: void 0,
+      // Clear old remote URL
+      meta: {}
+      // Clear old metadata (thumbnails, dimensions, etc.)
+    };
+    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);
+    const shouldUpload = shouldAutoUpload ?? options.autoProceed;
+    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 getFile = (fileId) => {
+    const file = files.value.find((f) => f.id === fileId);
+    if (!file) {
+      throw new Error(`File not found: ${fileId}`);
+    }
+    return file;
+  };
+  const upload = async () => {
+    const filesToUpload = files.value.filter((f) => f.status === "waiting");
+    emitter.emit("upload:start", filesToUpload);
+    for (const file of filesToUpload) {
+      try {
+        const processedFile = await runPluginStage("process", file);
+        if (!processedFile) {
+          const error = createFileError(file, new Error("File processing failed"));
+          updateFile(file.id, { status: "error", error });
+          emitter.emit("file:error", { file, error });
+          continue;
+        }
+        if (processedFile.id !== file.id) {
+          files.value = files.value.map((f) => f.id === file.id ? processedFile : f);
+        }
+        updateFile(processedFile.id, { status: "uploading" });
+        const onProgress = (progress) => {
+          updateFile(processedFile.id, { progress: { percentage: progress } });
+          emitter.emit("upload:progress", { file: processedFile, progress });
+        };
+        const storagePlugin = getStoragePlugin();
+        let uploadResult;
+        let remoteUrl;
+        if (storagePlugin?.hooks.upload) {
+          const context = {
+            files: files.value,
+            options,
+            onProgress,
+            emit: getPluginEmitFn(storagePlugin.id)
+          };
+          const result = await storagePlugin.hooks.upload(processedFile, context);
+          uploadResult = result;
+          remoteUrl = result.url;
+        } else {
+          uploadResult = await uploadFn(processedFile, onProgress);
+          remoteUrl = typeof uploadResult === "string" ? uploadResult : void 0;
+        }
+        const currentFile = files.value.find((f) => f.id === processedFile.id);
+        const preview = currentFile?.preview || remoteUrl;
+        updateFile(processedFile.id, { status: "complete", uploadResult, remoteUrl, preview });
+      } catch (err) {
+        const error = createFileError(file, err);
+        updateFile(file.id, { status: "error", error });
+        emitter.emit("file:error", { file, error });
+      }
+    }
+    const completed = files.value.filter((f) => f.status === "complete");
+    emitter.emit("upload:complete", completed);
+  };
+  const reset = () => {
+    cleanupObjectURLs(createdObjectURLs);
+    files.value = [];
+  };
+  onBeforeUnmount(() => {
+    createdObjectURLs.forEach((url) => {
+      URL.revokeObjectURL(url);
+    });
+    createdObjectURLs.clear();
+  });
+  const callPluginHook = async (hook, stage, file, context) => {
+    switch (stage) {
+      case "validate":
+        await hook(file, context);
+        return file;
+      case "preprocess":
+      case "process":
+      case "complete":
+        if (!file) throw new Error("File is required for this hook type");
+        await hook(file, context);
+        return file;
+      default:
+        return file;
+    }
+  };
+  async function runPluginStage(stage, file) {
+    if (!options.plugins) return file;
+    let currentFile = file;
+    for (const plugin of options.plugins) {
+      const hook = plugin.hooks[stage];
+      if (hook) {
+        try {
+          const context = {
+            files: files.value,
+            options,
+            emit: getPluginEmitFn(plugin.id)
+          };
+          const result = await callPluginHook(hook, stage, currentFile, context);
+          if (!result) continue;
+          if (currentFile && "id" in result) {
+            currentFile = result;
+          }
+        } catch (error) {
+          if (currentFile) {
+            emitter.emit("file:error", { file: currentFile, error });
+          }
+          console.error(`Plugin ${plugin.id} ${stage} hook error:`, error);
+          return null;
+        }
+      }
+    }
+    return currentFile;
+  }
+  return {
+    // State
+    files: readonly(files),
+    totalProgress,
+    // Core Methods
+    addFiles,
+    addFile,
+    onGetRemoteFile,
+    onUpload,
+    removeFile,
+    removeFiles,
+    clearFiles,
+    reorderFile,
+    getFile,
+    upload,
+    reset,
+    status,
+    // File Data Access (for editing/processing)
+    getFileData,
+    getFileURL,
+    getFileStream,
+    replaceFileData,
+    updateFile,
+    initializeExistingFiles,
+    // Utilities
+    addPlugin,
+    // Events - autocomplete for core events, allow arbitrary strings for plugin events
+    on: emitter.on
+  };
+};

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

@@ -0,0 +1,56 @@
+import type { UploadFile } from "../types.js";
+/**
+ * Events emitted by the image compressor plugin
+ * Note: These are automatically prefixed with "image-compressor:" by the plugin system
+ * e.g., "start" becomes "image-compressor:start"
+ */
+type ImageCompressorEvents = {
+    start: {
+        file: UploadFile;
+        originalSize: number;
+    };
+    complete: {
+        file: UploadFile;
+        originalSize: number;
+        compressedSize: number;
+        savedBytes: number;
+    };
+    skip: {
+        file: UploadFile;
+        reason: string;
+    };
+};
+interface ImageCompressorOptions {
+    /**
+     * Maximum width in pixels. Images wider than this will be scaled down.
+     * @default 1920
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height in pixels. Images taller than this will be scaled down.
+     * @default 1920
+     */
+    maxHeight?: number;
+    /**
+     * JPEG/WebP quality (0-1). Lower values = smaller files but worse quality.
+     * @default 0.85
+     */
+    quality?: number;
+    /**
+     * Output format. Use 'auto' to preserve original format.
+     * @default 'auto'
+     */
+    outputFormat?: "jpeg" | "webp" | "png" | "auto";
+    /**
+     * Only compress images larger than this size (in bytes).
+     * @default 100000 (100KB)
+     */
+    minSizeToCompress?: number;
+    /**
+     * Preserve EXIF metadata (orientation, etc)
+     * @default true
+     */
+    preserveMetadata?: boolean;
+}
+export declare const PluginImageCompressor: (options: ImageCompressorOptions) => import("../types.js").ProcessingPlugin<any, ImageCompressorEvents>;
+export {};

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

@@ -0,0 +1,137 @@
+import { defineProcessingPlugin } from "../types.js";
+export const PluginImageCompressor = defineProcessingPlugin((pluginOptions) => {
+  const {
+    maxWidth = 1920,
+    maxHeight = 1920,
+    quality = 0.85,
+    outputFormat = "auto",
+    minSizeToCompress = 1e5
+    // 100KB
+  } = pluginOptions;
+  return {
+    id: "image-compressor",
+    hooks: {
+      process: async (file, context) => {
+        if (!file.mimeType.startsWith("image/")) {
+          return file;
+        }
+        if (file.source !== "local") {
+          context.emit("skip", { file, reason: "Remote file, no local data to compress" });
+          return file;
+        }
+        if (file.mimeType === "image/gif") {
+          context.emit("skip", { file, reason: "GIF format not supported" });
+          return file;
+        }
+        if (file.mimeType === "image/svg+xml") {
+          context.emit("skip", { file, reason: "SVG already optimized" });
+          return file;
+        }
+        if (file.size < minSizeToCompress) {
+          context.emit("skip", {
+            file,
+            reason: `File size (${file.size} bytes) below minimum threshold`
+          });
+          return file;
+        }
+        context.emit("start", { file, originalSize: file.size });
+        try {
+          const sourceUrl = URL.createObjectURL(file.data);
+          const image = new Image();
+          image.src = sourceUrl;
+          await new Promise((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = () => reject(new Error("Failed to load image"));
+          });
+          const needsResize = image.width > maxWidth || image.height > maxHeight;
+          if (!needsResize && outputFormat === "auto") {
+            URL.revokeObjectURL(sourceUrl);
+            context.emit("skip", {
+              file,
+              reason: "Image within size limits and format is auto"
+            });
+            return file;
+          }
+          let targetWidth = image.width;
+          let targetHeight = image.height;
+          if (needsResize) {
+            const widthRatio = maxWidth / image.width;
+            const heightRatio = maxHeight / image.height;
+            const ratio = Math.min(widthRatio, heightRatio);
+            targetWidth = Math.round(image.width * ratio);
+            targetHeight = Math.round(image.height * ratio);
+          }
+          const canvas = document.createElement("canvas");
+          canvas.width = targetWidth;
+          canvas.height = targetHeight;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            throw new Error("Could not get canvas context");
+          }
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = "high";
+          ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+          let mimeType = file.mimeType;
+          if (outputFormat === "jpeg") {
+            mimeType = "image/jpeg";
+          } else if (outputFormat === "webp") {
+            mimeType = "image/webp";
+          } else if (outputFormat === "png") {
+            mimeType = "image/png";
+          }
+          const compressedBlob = await new Promise((resolve, reject) => {
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve(blob);
+                } else {
+                  reject(new Error("Failed to compress image"));
+                }
+              },
+              mimeType,
+              quality
+            );
+          });
+          URL.revokeObjectURL(sourceUrl);
+          if (compressedBlob.size < file.size) {
+            const savedBytes = file.size - compressedBlob.size;
+            context.emit("complete", {
+              file,
+              originalSize: file.size,
+              compressedSize: compressedBlob.size,
+              savedBytes
+            });
+            let newId = file.id;
+            if (outputFormat !== "auto" && outputFormat !== file.meta.extension) {
+              const extension = outputFormat === "jpeg" ? "jpg" : outputFormat;
+              newId = file.id.replace(/\.[^.]+$/, `.${extension}`);
+            }
+            file.meta.originalSize = file.size;
+            file.meta.compressionRatio = ((file.size - compressedBlob.size) / file.size * 100).toFixed(1);
+            return {
+              ...file,
+              id: newId,
+              data: compressedBlob,
+              size: compressedBlob.size,
+              mimeType,
+              meta: {
+                ...file.meta,
+                compressed: true,
+                originalSize: file.size,
+                compressionRatio: file.meta.compressionRatio
+              }
+            };
+          }
+          context.emit("skip", {
+            file,
+            reason: "Compressed version larger than original"
+          });
+          return file;
+        } catch (error) {
+          console.warn(`Image compression failed for ${file.name}:`, error);
+          return file;
+        }
+      }
+    }
+  };
+});

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

@@ -0,0 +1,4 @@
+export * from "./thumbnail-generator.js";
+export * from "./image-compressor.js";
+export * from "./video-compressor.js";
+export * from "./storage/index.js";

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

@@ -0,0 +1,4 @@
+export * from "./thumbnail-generator.js";
+export * from "./image-compressor.js";
+export * from "./video-compressor.js";
+export * from "./storage/index.js";