UploadKit

https://docs.uploadkit.dev
Admin
A file upload service providing type-safe, managed cloud storage with premium React components and...
Tokens:121,939
Snippets:1,089
Trust Score:3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install QStash SDK

Source: https://docs.uploadkit.dev/docs/api-reference/webhooks

Install the QStash SDK to enable webhook signature verification.

```bash
npm install @upstash/qstash
```

--------------------------------

### Fastify Backend Adapter Setup

Source: https://docs.uploadkit.dev/docs/sdk/next/backend-adapters

Integrate UploadKit with Fastify by using the `createFastifyHandler`. This example demonstrates setting up the handler for all HTTP methods on a specific route.

```typescript
import Fastify from 'fastify';
import { createFastifyHandler } from '@uploadkitdev/next/fastify';
import { ourFileRouter } from './file-router';

const fastify = Fastify();

fastify.all(
  '/api/uploadkit/*',
  createFastifyHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);
```

--------------------------------

### Install UploadKit Packages (bun)

Source: https://docs.uploadkit.dev/docs/getting-started/quickstart

Install the necessary server-side and UI packages for UploadKit using bun.

```bash
bun add @uploadkitdev/next @uploadkitdev/react
```

--------------------------------

### Install @uploadkitdev/react with npm

Source: https://docs.uploadkit.dev/docs/sdk/react/installation

Install the @uploadkitdev/react and @uploadkitdev/core packages using npm.

```bash
npm install @uploadkitdev/react @uploadkitdev/core
```

--------------------------------

### Install UploadKit Core and React Packages

Source: https://docs.uploadkit.dev/docs/getting-started/react

Install the necessary packages for the upload client and UI components using pnpm, npm, or yarn.

```bash
pnpm add @uploadkitdev/core @uploadkitdev/react
```

```bash
npm install @uploadkitdev/core @uploadkitdev/react
```

```bash
yarn add @uploadkitdev/core @uploadkitdev/react
```

--------------------------------

### Install @uploadkitdev/react with yarn

Source: https://docs.uploadkit.dev/docs/sdk/react/installation

Install the @uploadkitdev/react and @uploadkitdev/core packages using yarn.

```bash
yarn add @uploadkitdev/react @uploadkitdev/core
```

--------------------------------

### Express Backend Adapter Setup

Source: https://docs.uploadkit.dev/docs/sdk/next/backend-adapters

Set up the Express adapter to handle UploadKit requests. This example shows how to mount the handler for both Express v5 (named wildcards) and v4 (positional wildcard).

```typescript
import express from 'express';
import { createExpressHandler } from '@uploadkitdev/next/express';
import { ourFileRouter } from './file-router';

const app = express();

// Express v5 uses named wildcards
app.all(
  '/api/uploadkit/{*path}',
  createExpressHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);

// Express v4 uses a positional wildcard
// app.all('/api/uploadkit/*', createExpressHandler({ router: ourFileRouter, apiKey: process.env.UPLOADKIT_API_KEY }));
```

--------------------------------

### Install UploadKit Packages (yarn)

Source: https://docs.uploadkit.dev/docs/getting-started/quickstart

Install the necessary server-side and UI packages for UploadKit using yarn.

```bash
yarn add @uploadkitdev/next @uploadkitdev/react
```

--------------------------------

### Install UploadKit with bun

Source: https://docs.uploadkit.dev/docs/guides/cli-existing-projects

Use this command to initialize UploadKit in an existing project using bun.

```bash
bunx uploadkit init
```

--------------------------------

### Install UploadKit with npx

Source: https://docs.uploadkit.dev/docs/guides/cli-existing-projects

Use this command to initialize UploadKit in an existing project using npx.

```bash
npx uploadkit init
```

--------------------------------

### Authenticated GET Request Example

Source: https://docs.uploadkit.dev/docs/api-reference/authentication

Example of making an authenticated GET request to retrieve files, including the Authorization header and Content-Type.

```curl
curl -X GET "https://api.uploadkit.dev/api/v1/files?limit=10" \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json"
```

--------------------------------

### Basic UploadDataStream Usage

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-data-stream

Demonstrates the basic setup for the UploadDataStream component, including required props like 'route' and an example of handling upload completion.

```jsx
import { UploadDataStream } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadDataStream
      route="fileUploader"
      columns={24}
      onUploadComplete={(results) => {
        console.log('Stream complete:', results.length);
      }}
    />
  );
}
```

--------------------------------

### Non-interactive Example

Source: https://docs.uploadkit.dev/docs/guides/cli

Scaffold a new UploadKit app non-interactively using specific flags for template, package manager, Git initialization, and dependency installation.

```bash
npx create-uploadkit-app my-app \
  --template next \
  --pm pnpm \
  --no-git \
  --yes
```

--------------------------------

### Minimum Working Example - UploadKit Core SDK

Source: https://docs.uploadkit.dev/docs/sdk/core/installation

This example shows how to initialize the UploadKit client and perform a basic file upload. Ensure you replace 'uk_live_xxxxxxxxxxxxxxxxxxxxx' with your actual API key and 'someFile' with a valid File or Blob object.

```typescript
import { createUploadKit } from '@uploadkitdev/core';

const client = createUploadKit({ apiKey: 'uk_live_xxxxxxxxxxxxxxxxxxxxx' });

const file = /* a File or Blob */ someFile;

const result = await client.upload({ file, route: 'imageUploader' });

console.log(result.url); // https://cdn.uploadkit.dev/...
```

--------------------------------

### Install UploadKit Packages (npm)

Source: https://docs.uploadkit.dev/docs/getting-started/quickstart

Install the necessary server-side and UI packages for UploadKit using npm.

```bash
npm install @uploadkitdev/next @uploadkitdev/react
```

--------------------------------

### Install UploadKit with yarn

Source: https://docs.uploadkit.dev/docs/guides/cli-existing-projects

Use this command to initialize UploadKit in an existing project using yarn.

```bash
yarn dlx uploadkit init
```

--------------------------------

### Navigate and Run Project

Source: https://docs.uploadkit.dev/docs/guides/cli

After scaffolding, change into the project directory and start the development server. Ensure your UPLOADKIT_API_KEY is set in .env.local.

```bash
cd my-app
# drop UPLOADKIT_API_KEY into .env.local
pnpm dev
```

--------------------------------

### Get Install Command

Source: https://docs.uploadkit.dev/docs/sdk/mcp

Retrieves the correct installation command for UploadKit packages based on the specified package manager. Defaults to pnpm and core packages if not specified.

```javascript
await mcp.get_install_command({
  packageManager: 'npm',
  packages: ['@uploadkitdev/react']
})
```

--------------------------------

### Example Authenticated Request

Source: https://docs.uploadkit.dev/docs/api-reference/authentication

An example of how to make an authenticated GET request to the files endpoint using a Bearer token.

```APIDOC
## Example: Authenticated Request

```
curl -X GET "https://api.uploadkit.dev/api/v1/files?limit=10" \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json"
```

For the security model behind key hashing and presigned URLs, see Security.
```

--------------------------------

### Install UploadKit Packages

Source: https://docs.uploadkit.dev/docs/getting-started/nextjs

Install the necessary server-side and client-side packages for UploadKit using pnpm, npm, or yarn.

```bash
pnpm add @uploadkitdev/next @uploadkitdev/react
```

```bash
npm install @uploadkitdev/next @uploadkitdev/react
```

```bash
yarn add @uploadkitdev/next @uploadkitdev/react
```

--------------------------------

### Install UploadKit with pnpm

Source: https://docs.uploadkit.dev/docs/guides/cli-existing-projects

Use this command to initialize UploadKit in an existing project using pnpm.

```bash
pnpm dlx uploadkit init
```

--------------------------------

### Install UploadKit Packages (pnpm)

Source: https://docs.uploadkit.dev/docs/getting-started/quickstart

Install the necessary server-side and UI packages for UploadKit using pnpm.

```bash
pnpm add @uploadkitdev/next @uploadkitdev/react
```

--------------------------------

### Install UploadKit MCP Server

Source: https://docs.uploadkit.dev/docs/getting-started/quickstart

Install the UploadKit MCP server to enable AI-assistant IDEs with first-class knowledge of UploadKit components for easier integration.

```bash
npx -y @uploadkitdev/mcp

```

--------------------------------

### Basic Middleware Example

Source: https://docs.uploadkit.dev/docs/sdk/next/middleware

A fundamental example demonstrating how to authenticate a user and return metadata. This middleware checks for a userId and returns it for use in onUploadComplete.

```typescript
const fileRouter = {
  avatarUploader: {
    maxFileSize: '2MB',
    middleware: async ({ req }) => {
      // 1. Authenticate
      const userId = await getUserFromRequest(req);
      if (!userId) throw new Error('Unauthorized');

      // 2. Return metadata
      return { userId };
    },
    onUploadComplete: async ({ file, metadata }) => {
      // metadata is typed as { userId: string }
      await db.users.update({ id: metadata.userId, avatar: file.url });
    },
  },
} satisfies FileRouter;
```

--------------------------------

### Install @uploadkitdev/core with npm

Source: https://docs.uploadkit.dev/docs/sdk/core/installation

Use this command to add the core SDK to your project if you are using npm.

```bash
npm install @uploadkitdev/core
```

--------------------------------

### Basic UploadDropzoneBrutal Usage

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-dropzone-brutal

Demonstrates the fundamental setup for the UploadDropzoneBrutal component. Ensure you have a route named 'galleryUploader' configured in your file router. This example accepts any image file and logs the URLs of uploaded files.

```jsx
import { UploadDropzoneBrutal } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadDropzoneBrutal
      route="galleryUploader"
      accept={['image/*']}
      maxFiles={10}
      onUploadComplete={(results) => {
        console.log('Uploaded:', results.map((r) => r.url));
      }}
    >
      DROP IT
    </UploadDropzoneBrutal>
  );
}
```

--------------------------------

### Install @uploadkitdev/core with yarn

Source: https://docs.uploadkit.dev/docs/sdk/core/installation

Use this command to add the core SDK to your project if you are using yarn.

```bash
yarn add @uploadkitdev/core
```

--------------------------------

### Set UploadKit API Key

Source: https://docs.uploadkit.dev/docs/guides/cli-existing-projects

After initialization, set your API key in the .env.local file to start uploading.

```bash
UPLOADKIT_API_KEY=uk_live_...
```

--------------------------------

### List Projects Response

Source: https://docs.uploadkit.dev/docs/api-reference/projects

Example response when listing projects. It contains an array of project objects.

```json
{
  "projects": [
    {
      "_id": "65f1a2b3c4d5e6f7a8b9c0d1",
      "name": "My Application",
      "slug": "my-application-a1b2c3",
      "userId": "65f0...",
      "createdAt": "2026-04-08T12:00:00.000Z"
    }
  ]
}
```

--------------------------------

### Basic UploadDropzoneTerminal Usage

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-dropzone-terminal

This snippet shows the basic setup for UploadDropzoneTerminal. Ensure you have the '@uploadkitdev/react' SDK installed. Configure the `route`, `accept` types, and `maxSize` according to your needs. The `onUploadComplete` callback is used to handle successful uploads.

```jsx
import { UploadDropzoneTerminal } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadDropzoneTerminal
      route="logUploader"
      accept={['text/plain', 'application/json']}
      maxSize={5 * 1024 * 1024}
      onUploadComplete={(results) => {
        console.log('Uploaded:', results.map((r) => r.key));
      }}
    >
      drop files to upload
    </UploadDropzoneTerminal>
  );
}
```

--------------------------------

### Paginated List Response Example (Files)

Source: https://docs.uploadkit.dev/docs/api-reference/rest-api

Example of a JSON response for a paginated list of files, including the list of files, the cursor for the next page, and a flag indicating if more pages exist.

```json
{
  "files": [...],
  "nextCursor": "65f1a2b3c4d5e6f7a8b9c0d1",
  "hasMore": true
}
```

--------------------------------

### Install @uploadkitdev/core with pnpm

Source: https://docs.uploadkit.dev/docs/sdk/core/installation

Use this command to add the core SDK to your project if you are using pnpm.

```bash
pnpm add @uploadkitdev/core
```

--------------------------------

### Single File Response Example

Source: https://docs.uploadkit.dev/docs/api-reference/rest-api

Example of a successful JSON response for a single file, including its ID, key, name, size, type, URL, status, metadata, and creation timestamp.

```json
{
  "file": {
    "id": "65f1a2b3c4d5e6f7a8b9c0d1",
    "key": "65f0.../imageUploader/abc123.../photo.jpg",
    "name": "photo.jpg",
    "size": 204800,
    "type": "image/jpeg",
    "url": "https://cdn.uploadkit.dev/65f0.../imageUploader/abc123.../photo.jpg",
    "status": "UPLOADED",
    "metadata": { "userId": "user_123" },
    "createdAt": "2026-04-08T12:00:00.000Z"
  }
}
```

--------------------------------

### Custom Upload Form Example

Source: https://docs.uploadkit.dev/docs/sdk/react/use-uploadkit

An example demonstrating how to use the useUploadKit hook to build a fully custom upload form with state management for progress, errors, and results.

```APIDOC
## Full example — custom upload form

```jsx
'use client';

import { useRef } from 'react';
import { useUploadKit } from '@uploadkitdev/react';

export function CustomUploadForm() {
  const { upload, abort, reset, status, progress, error, result, isUploading } = 
    useUploadKit('documentUploader');
  const inputRef = useRef<HTMLInputElement>(null);

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    await upload(file, { source: 'custom-form' });
    e.target.value = '';
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="file"
        hidden
        onChange={handleFileChange}
      />

      {status === 'idle' && (
        <button onClick={() => inputRef.current?.click()}>
          Choose file to upload
        </button>
      )}

      {status === 'uploading' && (
        <div>
          <div style={{ width: '100%', height: 4, background: '#eee' }}>
            <div style={{ width: `${progress}%`, height: '100%', background: '#0070f3' }} />
          </div>
          <p>Uploading... {progress}%</p>
          <button onClick={abort}>Cancel</button>
        </div>
      )}

      {status === 'success' && result && (
        <div>
          <p>Uploaded: <a href={result.url}>{result.name}</a></p>
          <button onClick={reset}>Upload another</button>
        </div>
      )}

      {status === 'error' && (
        <div>
          <p style={{ color: 'red' }}>{error?.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    </div>
  );
}
```
```

--------------------------------

### Custom Upload Form Example

Source: https://docs.uploadkit.dev/docs/sdk/react/use-uploadkit

A full example demonstrating how to build a custom upload form using the useUploadKit hook. It handles file selection, upload progress, cancellation, success, and error states.

```javascript
'use client';

import { useRef } from 'react';
import { useUploadKit } from '@uploadkitdev/react';

export function CustomUploadForm() {
  const { upload, abort, reset, status, progress, error, result, isUploading } =
    useUploadKit('documentUploader');
  const inputRef = useRef<HTMLInputElement>(null);

  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    await upload(file, { source: 'custom-form' });
    e.target.value = '';
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="file"
        hidden
        onChange={handleFileChange}
      />

      {status === 'idle' && (
        <button onClick={() => inputRef.current?.click()}>
          Choose file to upload
        </button>
      )}

      {status === 'uploading' && (
        <div>
          <div style={{ width: '100%', height: 4, background: '#eee' }}>
            <div style={{ width: `${progress}%`, height: '100%', background: '#0070f3' }} />
          </div>
          <p>Uploading... {progress}%</p>
          <button onClick={abort}>Cancel</button>
        </div>
      )}

      {status === 'success' && result && (
        <div>
          <p>Uploaded: <a href={result.url}>{result.name}</a></p>
          <button onClick={reset}>Upload another</button>
        </div>
      )}

      {status === 'error' && (
        <div>
          <p style={{ color: 'red' }}>{error?.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### UploadKit Server-Side BYOS Configuration (R2)

Source: https://docs.uploadkit.dev/docs/guides/migration-from-uploadthing

Example of configuring UploadKit for Bring-Your-Own-Storage (BYOS) using Cloudflare R2.

```typescript
export const { GET, POST } = createUploadKitHandler({
  router,
  storage: {
    provider: 'r2',
    accountId: process.env.CF_ACCOUNT_ID!,
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
    bucket: process.env.R2_BUCKET_NAME!,
    publicUrl: process.env.R2_PUBLIC_URL!,
  },
});
```

--------------------------------

### Authentication Example

Source: https://docs.uploadkit.dev/docs/api-reference/rest-api

All requests require an API key passed as a Bearer token in the Authorization header.

```APIDOC
## Authentication Example

All requests require an API key passed as a Bearer token in the `Authorization` header:

```
curl https://api.uploadkit.dev/api/v1/files \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx"
```

API keys come in two forms:

Prefix| Purpose  
---|---
`uk_live_`| Production — creates real files, counts against quota  
`uk_test_`| Test mode — isolated sandbox, no quota impact  

See Authentication for full details on key types and security.
```

--------------------------------

### Using generateReactHelpers

Source: https://docs.uploadkit.dev/docs/sdk/react/api-reference

Example of how to import and use the generateReactHelpers factory to get type-safe UploadKit components and hooks.

```typescript
import { generateReactHelpers } from '@uploadkitdev/react';
import type { AppFileRouter } from '@/app/api/uploadkit/[...uploadkit]/route';

export const { UploadButton, UploadDropzone, UploadModal, useUploadKit } = 
  generateReactHelpers<AppFileRouter>();
```

--------------------------------

### Get UploadKit SDK Version

Source: https://docs.uploadkit.dev/docs/sdk/core/api-reference

Import and access the VERSION constant to check the installed SDK version.

```javascript
import { VERSION } from '@uploadkitdev/core';
// '0.2.1'
```

--------------------------------

### Get UploadKit Version

Source: https://docs.uploadkit.dev/docs/sdk/react/api-reference

Import and access the VERSION constant to check the installed version of the UploadKit React package.

```javascript
import { VERSION } from '@uploadkitdev/react';
// '0.1.0'
```

--------------------------------

### Basic Usage of UploadButtonPulse

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-button-pulse

Demonstrates the fundamental implementation of the UploadButtonPulse component. Ensure you have the '@uploadkitdev/react' SDK installed. This example configures the button to accept image files up to 5MB and logs the uploaded URL upon completion.

```jsx
import { UploadButtonPulse } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadButtonPulse
      route="imageUploader"
      accept={['image/*']}
      maxSize={5 * 1024 * 1024}
      onUploadComplete={(result) => {
        console.log('Uploaded:', result.url);
      }}
    />
  );
}
```

--------------------------------

### Basic UploadStepWizard Usage

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-step-wizard

This snippet shows the basic setup for the UploadStepWizard component. Ensure you have the '@uploadkitdev/react' package installed. The 'route' prop is required and must match a route name in your file router. You can specify accepted file types and maximum file size.

```jsx
import { UploadStepWizard } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadStepWizard
      route="documentUploader"
      accept={['application/pdf']}
      maxSize={20 * 1024 * 1024}
      onUploadComplete={(result) => {
        console.log('Uploaded:', result.url);
      }}
    />
  );
}
```

--------------------------------

### Create Project

Source: https://docs.uploadkit.dev/docs/api-reference/projects

Creates a new project. A default file router is automatically generated.

```APIDOC
## POST /api/v1/projects

### Description
Create a new project. A default file router (slug: `default`) is created automatically so the project is ready to accept uploads.

### Method
POST

### Endpoint
/api/v1/projects

### Parameters
#### Request Body
- **name** (string) - Yes - Human-readable project name (1–100 characters)

### Request Example
```bash
curl -X POST https://api.uploadkit.dev/api/v1/projects \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "My New Application"
  }'
```

### Response
#### Success Response (201 Created)
- **project** (object) - The created project object.

#### Response Example
`{ "project": { ... } }`

### Error cases:
- `TIER_LIMIT_EXCEEDED` (403): Project limit for your tier has been reached.
```

--------------------------------

### Error Response Example

Source: https://docs.uploadkit.dev/docs/api-reference/rest-api

Example of a JSON error response, detailing the error type, code, message, and a suggestion for resolution.

```json
{
  "error": {
    "type": "invalid_request",
    "code": "TIER_LIMIT_EXCEEDED",
    "message": "You have exceeded your file size limit",
    "suggestion": "Upgrade your plan at app.uploadkit.dev/billing"
  }
}
```

--------------------------------

### File Size Format Examples

Source: https://docs.uploadkit.dev/docs/sdk/next/file-router

Illustrates the string format for specifying file sizes in kilobytes (KB), megabytes (MB), and gigabytes (GB).

```plaintext
'500KB'  // 512,000 bytes
'4MB'    // 4,194,304 bytes
'1GB'    // 1,073,741,824 bytes
'1.5MB'  // 1,572,864 bytes

```

--------------------------------

### UploadKit Global Theming Example

Source: https://docs.uploadkit.dev/docs/guides/migration-from-uploadthing

Example of overriding UploadKit's default theme using CSS custom properties in a global stylesheet.

```css
:root {
  --uk-accent: #6366f1;
  --uk-radius: 8px;
}
```

--------------------------------

### Handling Errors in Code Example

Source: https://docs.uploadkit.dev/docs/api-reference/errors

An example demonstrating how to handle API errors in JavaScript by checking the response status and switching on the error code.

```APIDOC
## Handling Errors in Code

### Description
This example shows how to handle API errors in a JavaScript fetch request.

### Code Example
```javascript
const response = await fetch('https://api.uploadkit.dev/api/v1/upload/request', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.UPLOADKIT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ fileName, fileSize, contentType, routeSlug }),
});

if (!response.ok) {
  const { error } = await response.json();

  switch (error.code) {
    case 'VALIDATION_ERROR':
      throw new Error(`Invalid request: ${JSON.stringify(error.details)}`);
    case 'INVALID_FILE_TYPE':
      throw new Error('This file type is not supported.');
    case 'TIER_LIMIT_EXCEEDED':
      throw new Error('Quota reached — upgrade your plan.');
    case 'RATE_LIMITED':
      throw new Error('Too many requests. Try again shortly.');
    case 'UNAUTHORIZED':
      throw new Error('API key missing or invalid.');
    default:
      throw new Error(error.message);
  }
}
```

### SDK Error Handling
When using the `@uploadkitdev/core` or `@uploadkitdev/react` SDK, errors are surfaced via the `onError` callback with the same `code` values. Retryable failures (`429`, `5xx`) are automatically retried with exponential backoff up to `maxRetries`.
```

--------------------------------

### Initialize Multipart Upload

Source: https://docs.uploadkit.dev/docs/api-reference/upload

Use this endpoint to start a multipart upload for files over 10 MB. It returns presigned URLs for uploading file parts. Part URLs are valid for 1 hour.

```bash
curl -X POST https://api.uploadkit.dev/api/v1/upload/multipart/init \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -d '{ \
    "fileName": "large-video.mp4", \
    "fileSize": 104857600, \
    "contentType": "video/mp4", \
    "routeSlug": "videoUploader" \
  }'
```

--------------------------------

### Hono Backend Adapter Setup

Source: https://docs.uploadkit.dev/docs/sdk/next/backend-adapters

Configure the Hono adapter for your backend. This snippet shows how to create a Hono app and attach the UploadKit handler to a route.

```typescript
import { Hono } from 'hono';
import { createHonoHandler } from '@uploadkitdev/next/hono';
import { ourFileRouter } from './file-router';

const app = new Hono();

app.all(
  '/api/uploadkit/*',
  createHonoHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);
```

--------------------------------

### Example CDN URL

Source: https://docs.uploadkit.dev/docs/dashboard/files

This is an example of a permanent CDN URL for a file served via Cloudflare. This URL should be stored in your database and referenced in your application.

```plaintext
https://cdn.uploadkit.dev/uploads/abc123/photo.jpg
```

--------------------------------

### List All Projects

Source: https://docs.uploadkit.dev/docs/api-reference/projects

Use this endpoint to retrieve a list of all projects associated with the authenticated account. Ensure your API key is included in the Authorization header.

```bash
curl https://api.uploadkit.dev/api/v1/projects \
  -H "Authorization: Bearer uk_live_xxxxxxxxxxxxxxxxxxxxx"
```

--------------------------------

### UploadStepWizard Component

Source: https://docs.uploadkit.dev/docs/sdk/react/api-reference

A 5-stage single-file upload wizard guiding users through selection, preview, confirmation, upload, and completion. Suitable for guided, multi-step upload processes.

```typescript
const UploadStepWizard: React.ForwardRefExoticComponent<UploadStepWizardProps & React.RefAttributes<HTMLDivElement>>
```

--------------------------------

### Create UploadKit App with bun

Source: https://docs.uploadkit.dev/docs/guides/cli

Use this command to scaffold a new UploadKit project using the bun package manager.

```bash
bun create uploadkit-app my-app
```

--------------------------------

### Rate Limit Exceeded Response Example

Source: https://docs.uploadkit.dev/docs/api-reference/rest-api

Example of a JSON response when the API rate limit is exceeded, including the error type, code, message, and recommended retry delay.

```json
{
  "error": {
    "type": "rate_limit_error",
    "code": "RATE_LIMITED",
    "message": "Rate limit exceeded. Retry after 23 seconds"
  }
}
```

--------------------------------

### Per-file Progress and Video Uploads

Source: https://docs.uploadkit.dev/docs/sdk/react/upload-dropzone

This example demonstrates how each file displays an inline progress bar during upload. It's configured to accept video files up to 500MB.

```jsx
<UploadDropzone
  route="videoUploader"
  accept={['video/mp4', 'video/webm']}
  maxSize={500 * 1024 * 1024} // 500 MB
  onUploadComplete={(results) => {
    setVideos(results.map((r) => r.url));
  }}
/>
```

--------------------------------

### get_component

Source: https://docs.uploadkit.dev/docs/sdk/mcp

Fetches full metadata and a usage example for a specific UploadKit component by its name.

```APIDOC
## get_component

### Description
Fetch full metadata and a ready-to-paste TSX usage example for one component.

### Input:
#### Parameters
- **name** (string) - Required - Exact PascalCase component name. Case-sensitive.

### Returns:
- **name** (string) - The name of the component.
- **category** (string) - The category the component belongs to.
- **description** (string) - A brief description of the component.
- **inspiration** (string) - Design inspiration for the component.
- **usage** (string) - A TSX code snippet for using the component.

*Note: Returns a not-found message with the 5 closest matches if the component is not found.*
```

--------------------------------

### FileList with Delete Handling

Source: https://docs.uploadkit.dev/docs/sdk/react/file-list

Demonstrates how to handle file deletion by wiring the `onDelete` prop to an API call and updating the local state. The delete button is rendered because `onDelete` is provided.

```javascript
'use client';

import { useState } from 'react';
import { FileList } from '@uploadkitdev/react';
import type { UploadResult } from '@uploadkitdev/react';

export default function FilesPage() {
  const [files, setFiles] = useState<UploadResult[]>(initialFiles);

  async function handleDelete(key: string) {
    // Call your API to delete the file from storage
    await fetch('/api/files', {
      method: 'DELETE',
      body: JSON.stringify({ key }),
      headers: { 'Content-Type': 'application/json' },
    });

    // Remove from local state
    setFiles((prev) => prev.filter((f) => f.key !== key));
  }

  return (
    <FileList
      files={files}
      onDelete={handleDelete}
    />
  );
}
```

--------------------------------

### UploadKit Component Usage

Source: https://docs.uploadkit.dev/docs/guides/migration-from-uploadthing

Example of using the UploadButton component with the 'route' prop in UploadKit.

```jsx
<UploadButton route="imageUploader" />
```

--------------------------------

### Create UploadKit App with npm

Source: https://docs.uploadkit.dev/docs/guides/cli

Use this command to scaffold a new UploadKit project using the npm package manager.

```bash
npm create uploadkit-app@latest my-app
```
Tokens:
Raw