nuxt-upload-kit 0.1.1

package/README.md

@@ -0,0 +1,171 @@
+<p align="center">
+  <img src="docs/public/logo.png" alt="Nuxt Upload Kit" width="300" />
+</p>
+
+<h1 align="center">Nuxt Upload Kit</h1>
+
+<p align="center">A powerful, plugin-based file upload manager for Nuxt applications.</p>
+
+## Features
+
+- 🔌 **Plugin System** - Extensible architecture with built-in plugins for validation, compression, and storage
+- 📤 **Multi-provider Storage** - Azure Data Lake support with S3, Cloudinary coming soon
+- 🖼️ **Image Processing** - Automatic thumbnail generation and image compression
+- 🎥 **Video Compression** - FFmpeg-powered video compression (optional)
+- ✅ **Validation** - File type, size, and count validation out of the box
+- 📊 **Progress Tracking** - Real-time upload progress with events
+- 🔄 **File Lifecycle** - Complete control over file preprocessing, processing, and post-upload
+
+## Installation
+
+```bash
+pnpm add nuxt-upload-kit
+# or
+npm install nuxt-upload-kit
+# or
+yarn add nuxt-upload-kit
+```
+
+## Setup
+
+Add the module to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ["nuxt-upload-kit"],
+})
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+const uploader = useUploadKit({
+  maxFiles: 10,
+  maxFileSize: 50 * 1024 * 1024, // 50MB
+  allowedFileTypes: ["image/jpeg", "image/png", "video/mp4"],
+  thumbnails: true,
+  imageCompression: {
+    maxWidth: 1920,
+    quality: 0.85,
+  },
+})
+
+// Configure upload handler
+uploader.onUpload(async (file, onProgress) => {
+  const formData = new FormData()
+  formData.append("file", file.data as Blob)
+
+  const response = await fetch("/api/upload", {
+    method: "POST",
+    body: formData,
+  })
+
+  return await response.json()
+})
+
+// Add files
+const onFileSelect = async (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (input.files) {
+    await uploader.addFiles(Array.from(input.files))
+  }
+}
+
+// Upload all files
+const handleUpload = () => uploader.upload()
+</script>
+
+<template>
+  <div>
+    <input type="file" multiple @change="onFileSelect" />
+
+    <div v-for="file in uploader.files" :key="file.id">
+      <img v-if="file.preview" :src="file.preview" />
+      <span>{{ file.name }} - {{ file.status }}</span>
+      <progress :value="file.progress.percentage" max="100" />
+    </div>
+
+    <button @click="handleUpload">Upload</button>
+  </div>
+</template>
+```
+
+## Using Storage Plugins
+
+### Azure Data Lake Storage
+
+```typescript
+import { PluginAzureDataLake } from "nuxt-upload-kit"
+
+const uploader = useUploadKit({
+  storage: PluginAzureDataLake({
+    sasURL: "https://your-storage.blob.core.windows.net/container?sv=...",
+    path: "uploads/images",
+  }),
+  thumbnails: true,
+})
+```
+
+## Configuration Options
+
+| Option             | Type                            | Default | Description                     |
+| ------------------ | ------------------------------- | ------- | ------------------------------- |
+| `storage`          | `StoragePlugin`                 | -       | Storage plugin for file uploads |
+| `plugins`          | `ProcessingPlugin[]`            | `[]`    | Additional processing plugins   |
+| `maxFiles`         | `number \| false`               | `false` | Maximum number of files         |
+| `maxFileSize`      | `number \| false`               | `false` | Maximum file size in bytes      |
+| `allowedFileTypes` | `string[] \| false`             | `false` | Allowed MIME types              |
+| `thumbnails`       | `boolean \| ThumbnailOptions`   | `false` | Enable thumbnail generation     |
+| `imageCompression` | `boolean \| CompressionOptions` | `false` | Enable image compression        |
+| `autoProceed`      | `boolean`                       | `false` | Auto-upload after adding files  |
+
+## Events
+
+```typescript
+uploader.on("file:added", (file) => console.log("Added:", file.name))
+uploader.on("file:removed", (file) => console.log("Removed:", file.name))
+uploader.on("file:error", ({ file, error }) => console.error(error))
+uploader.on("upload:start", (files) => console.log("Starting upload"))
+uploader.on("upload:progress", ({ file, progress }) => console.log(progress))
+uploader.on("upload:complete", (files) => console.log("Complete!"))
+```
+
+## Creating Custom Plugins
+
+```typescript
+import { defineProcessingPlugin } from "nuxt-upload-kit"
+
+const MyPlugin = defineProcessingPlugin<{ option: string }>((options) => ({
+  id: "my-plugin",
+  hooks: {
+    validate: async (file, context) => {
+      // Validation logic
+      return file
+    },
+    process: async (file, context) => {
+      // Processing logic
+      context.emit("processed", { file })
+      return file
+    },
+  },
+}))
+```
+
+## Optional Dependencies
+
+For video compression, install FFmpeg:
+
+```bash
+pnpm add @ffmpeg/ffmpeg @ffmpeg/util
+```
+
+For Azure storage, install the Azure SDK:
+
+```bash
+pnpm add @azure/storage-file-datalake
+```
+
+## License
+
+MIT

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+interface ModuleOptions {
+    /**
+     * Enable auto-import of useUploadKit composable
+     * @default true
+     */
+    autoImport?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-upload-kit",
+  "configKey": "uploadKit",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,29 @@
+import { defineNuxtModule, createResolver, addImports } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "nuxt-upload-kit",
+    configKey: "uploadKit"
+  },
+  defaults: {
+    autoImport: true
+  },
+  setup(options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    if (options.autoImport) {
+      addImports([
+        {
+          name: "useUploadKit",
+          from: resolver.resolve("./runtime/composables/useUploadKit")
+        },
+        {
+          name: "useFFMpeg",
+          from: resolver.resolve("./runtime/composables/useFFMpeg")
+        }
+      ]);
+    }
+    _nuxt.options.alias["#upload-kit"] = resolver.resolve("./runtime");
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/composables/useFFMpeg.d.ts

@@ -0,0 +1,14 @@
+interface FFMPegOptions {
+    inputUrl: string;
+    convertOptions?: string[];
+}
+export declare const useFFMpeg: (options: FFMPegOptions) => {
+    status: import("@vue/reactivity").Ref<"paused" | "converting" | "success" | "error", "paused" | "converting" | "success" | "error">;
+    progress: import("@vue/reactivity").Ref<number, number>;
+    convertedFile: import("@vue/reactivity").Ref<File | undefined, File | undefined>;
+    load: () => Promise<void>;
+    unload: () => void;
+    convert: (convertOptions: string[]) => Promise<File | undefined>;
+    onConvertSuccess: (callback: (updatedVideo: File) => void) => (updatedVideo: File) => void;
+};
+export {};

package/dist/runtime/composables/useFFMpeg.js

@@ -0,0 +1,66 @@
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+import { ref } from "vue";
+const defaultOptions = {
+  convertOptions: []
+};
+const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm";
+export const useFFMpeg = (options) => {
+  options = { ...defaultOptions, ...options };
+  const ffmpeg = new FFmpeg();
+  const status = ref("paused");
+  const progress = ref(0);
+  const originalFile = ref();
+  const convertedFile = ref();
+  let _onConvertSuccess;
+  ffmpeg.on("progress", ({ time }) => {
+    progress.value = time / 1e6;
+  });
+  const load = async () => {
+    await ffmpeg.load({
+      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
+    });
+  };
+  const unload = () => ffmpeg.terminate();
+  const convert = async (convertOptions) => {
+    status.value = "converting";
+    const command = ["-i", "input.avi", ...options.convertOptions, ...convertOptions, "-c", "copy", "output.mp4"];
+    try {
+      originalFile.value = await fetchFile(options.inputUrl);
+      await ffmpeg.writeFile("input.avi", originalFile.value);
+      await ffmpeg.exec(command);
+      convertedFile.value = await getModifiedVideo();
+      await ffmpeg.deleteFile("input.avi");
+      status.value = "success";
+      if (_onConvertSuccess) _onConvertSuccess(convertedFile.value);
+      return convertedFile.value;
+    } catch (error) {
+      if (import.meta.env.DEV) console.error(error);
+      status.value = "error";
+    }
+  };
+  const getModifiedVideo = async () => {
+    const data = await ffmpeg.readFile("output.mp4");
+    let bytes;
+    if (typeof data === "string") {
+      bytes = new TextEncoder().encode(data);
+    } else {
+      const buffer = new ArrayBuffer(data.byteLength);
+      new Uint8Array(buffer).set(data);
+      bytes = new Uint8Array(buffer);
+    }
+    const updatedFile = new File([bytes], "output.mp4", { type: "video/mp4" });
+    return updatedFile;
+  };
+  const onConvertSuccess = (callback) => _onConvertSuccess = callback;
+  return {
+    status,
+    progress,
+    convertedFile,
+    load,
+    unload,
+    convert,
+    onConvertSuccess
+  };
+};