@uploadfile/nuxt

Nuxt Uploadfile Module

Set UPLOADFILE_TOKEN on the server. Tokens from https://staging.uploadfile.dev use staging; tokens from https://www.uploadfile.dev use production. The SDK picks the address from the token.

Tokens issued before version 0.2.0 count as production. Staging users need to copy a fresh token from the staging dashboard.

Nuxt module for getting started with Uploadfile in your Nuxt app.

• ✨  Release Notes

Quick Setup

1. Add @uploadfile/nuxt and @uploadfile/core dependencies to your project

# Using pnpm
pnpm add -D @uploadfile/nuxt
pnpm add @uploadfile/core

# Using yarn
yarn add --dev @uploadfile/nuxt
yarn add @uploadfile/core

# Using npm
npm install --save-dev @uploadfile/nuxt
npm install @uploadfile/core

# Using bun
bun add -D @uploadfile/nuxt
bun add @uploadfile/core

2. Add @uploadfile/nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@uploadfile/nuxt"],
});

That's it! You can now use @uploadfile/nuxt in your Nuxt app ✨

Usage

For full documentation, see the Uploadfile docs

1. Create an upload router in your app:

// server/uploadfile.ts
import { createUploadfile, UFFiles } from "@uploadfile/core/h3";
import type { FileRouter } from "@uploadfile/core/h3";

const f = createUploadfile();

/**
 * This is your Uploadfile file router. For more information:
 * @see https://www.uploadfile.dev/docs/quickstart
 */
export const uploadRouter = {
  videoAndImage: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
      acl: "public-read",
    },
    video: {
      maxFileSize: "16MB",
    },
  })
    .middleware(({ event, files }) => {
      //           ^? H3Event

      // Return some metadata to be stored with the file
      return { foo: "bar" as const };
    })
    .onUploadComplete(({ file, metadata }) => {
      //                       ^? { foo: "bar" }
      console.log("upload completed", file);
    }),
} satisfies FileRouter;

export type UploadRouter = typeof uploadRouter;

2. Mount a component in your app and start uploading files:

<script setup lang="ts">
const alert = (msg: string) => {
  window.alert(msg);
};
</script>

<template>
  <div>Playground</div>
  <UploadButton
    :config="{
      endpoint: 'videoAndImage',
      onClientUploadComplete: (res) => {
        console.log(`onClientUploadComplete`, res);
        alert('Upload Completed');
      },
      onUploadBegin: () => {
        console.log(`onUploadBegin`);
      },
    }"
  />

  <UploadDropzone
    :config="{
      endpoint: 'videoAndImage',
      onClientUploadComplete: (res) => {
        console.log(`onClientUploadComplete`, res);
        alert('Upload Completed');
      },
      onUploadBegin: () => {
        console.log(`onUploadBegin`);
      },
    }"
  />
</template>

Wow, that was easy!

Development

From workspace root:

# Install dependencies
pnpm install

# Develop with the playground
pnpm dev

# Run ESLint
pnpm lint