Quickstart

Install and mount the Upload fragment.

Install

pnpm add @fragno-dev/upload

Server setup

import { createUploadFragment, createFilesystemStorageAdapter } from "@fragno-dev/upload";
import { migrate } from "@fragno-dev/db";

const storage = createFilesystemStorageAdapter({ rootDir: "./uploads" });

const fragment = createUploadFragment(
  { storage },
  {
    // Provide your database adapter (Kysely/Drizzle) here
    databaseAdapter,
    mountRoute: "/api/uploads",
  },
);

await migrate(fragment);

Client setup

import { createUploadFragmentClient } from "@fragno-dev/upload/react";

export const uploadClient = createUploadFragmentClient({
  mountRoute: "/api/uploads",
});

Upload a file

const { useUploadHelpers } = uploadClient;

const helpers = useUploadHelpers();
await helpers.createUploadAndTransfer(file, {
  keyParts: ["users", userId, "avatar"],
  onProgress: (progress) => {
    console.log(progress.bytesUploaded, progress.totalBytes);
  },
});