Getting started with H3

Added in v5.7

H3 is a HTTP framework that powers the web server framework Nitro and other full-stack frameworks like Nuxt and soon also SolidStart. This adapter will work for all frameworks that use H3 under the hood.

Package Setup

Install the package

npm install uploadthing

Add env variables

UPLOADTHING_TOKEN=... # A token for interacting with the SDK

Set Up A FileRouter

Creating your first FileRoute

All files uploaded to uploadthing are associated with a FileRoute. The following is a very minimalistic example, with a single FileRoute "imageUploader". Think of a FileRoute similar to an endpoint, it has:

• Permitted types ["image", "video", etc]
• Max file size
• How many files are allowed to be uploaded
• (Optional) input validation to validate client-side data sent to the route
• (Optional) middleware to authenticate and tag requests
• onUploadComplete callback for when uploads are completed

To get full insight into what you can do with the FileRoutes, please refer to the File Router API.

import { createUploadthing, type FileRouter } from "uploadthing/h3";

const f = createUploadthing();

export const uploadRouter = {
  // Define as many FileRoutes as you like, each with a unique routeSlug
  imageUploader: f({
    image: {
      /**
       * For full list of options and defaults, see the File Route API reference
       * @see https://docs.uploadthing.com/file-routes#route-config
       */
      maxFileSize: "4MB",
      maxFileCount: 1,
    },
  }).onUploadComplete((data) => {
    console.log("upload completed", data);
  }),
} satisfies FileRouter;

export type OurFileRouter = typeof uploadRouter;

Create the H3 event handlers

import { createApp, createRouter } from "h3";

import { createRouteHandler } from "uploadthing/h3";
import { uploadRouter } from "./router";

const app = createApp();
const router = createRouter();

router.use(
  "/api/uploadthing",
  createRouteHandler({
    router: uploadRouter,
    config: { ... },
  })
);

app.use(router);

export { app }; // Run server with e.g. `listhen`

See configuration options in server API reference

Use the FileRouter in your app

Client side usage differs ever so slightly from the fullstack framework setups when using a separate backend server. You'll need to set the URL of your server when you generate the components and helpers.

import { generateUploadButton } from "@uploadthing/react";

export const UploadButton = generateUploadButton({
  url: "https://your-server.com/api/uploadthing",
});
// ...

For the remaining usage, please refer to client side examples of the fullstack framework guides:

• Next.js
• Solid.js
• Vue ↗
• Svelte

or check out the full API reference:

• @uploadthing/react
• uploadthing/client