Backend Adapters
H3

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

💡

If you don't already have a uploadthing secret key, sign up (opens in a new tab) and create one from the dashboard! (opens in a new tab)

UPLOADTHING_SECRET=... # A secret key for your app (starts with sk_live_)
UPLOADTHING_APP_ID=... # Your app id

Set Up A FileRouter

Creating your first FileRoute

All files uploaded to uploadthing are associated with a FileRoute. Following example is very minimalistic. To get full insight into what you can do with the FileRoutes, please refer to the File Router API.

src/uploadthing.ts
import { createUploadthing, type FileRouter } from "uploadthing/h3";
 
const f = createUploadthing();
 
export const uploadRouter = {
  videoAndImage: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
    },
    video: {
      maxFileSize: "16MB",
    },
  }).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 { createH3EventHandler } from "uploadthing/h3";
import { uploadRouter } from "./router";
 
const app = createApp();
const router = createRouter();
 
router.use(
  "/api/uploadthing",
  createH3EventHandler({ router: uploadRouter })
);
 
app.use(router);
 
export { app }; // Run server with e.g. `listhen`

Use the FileRouter in your app

Please refer to client side examples:

💡

Support for Vue is coming soon which will allow you to use the fullstack framework Nuxt with Uploadthing.