documentation / get started
Introduction
Uploadfile stores and serves the files your users upload. Your server decides who may upload, and the browser sends the bytes straight to storage.
Your application defines upload routes in a file router. Each route lists the file types, sizes, and counts it accepts, and runs your middleware to check who is uploading.
When someone picks files, the browser asks your route handler for permission. Your server checks the user and asks Uploadfile to open an upload session for each file. Uploadfile checks the application's plan and remaining capacity, then returns signed storage URLs.
The browser sends the bytes straight to Amazon S3. Uploadfile verifies the parts, publishes the file, and calls your onUploadComplete handler with the file's key and URL.
All packages are on npm at version 0.1.0 and share one version number. Install the same version of @uploadfile/core and your framework package.
| Package | Contents |
|---|---|
@uploadfile/core | File routers, route handlers for Next.js, Express, Fastify, H3, Remix, and any Fetch server, the UFApi server client, and the Tailwind plugin |
@uploadfile/react | UploadButton, UploadDropzone, and the useUploadfile hook |
@uploadfile/vue | Vue components and useUploadfile |
@uploadfile/nuxt | A Nuxt module that registers the route and components |
@uploadfile/svelte | Svelte components and createUploadfile |
@uploadfile/solid | Solid components and createUploadfile |
@uploadfile/expo | Image and document picker hooks for Expo |
| Concept | What it holds |
|---|---|
| Organization | People, roles, billing details, and the shared Free pool |
| Application | Files, server API keys, storage region, plan, and limits |
| File router | Your typed upload routes and their authorization |
| Upload session | Reserved capacity, signed part URLs, and completion state |
| File | A stable key, an optional custom ID, visibility, and lifecycle state |
- Sign up at uploadfile.dev and verify your email address. Uploads and API keys stay locked until you verify it.
- Create an application. Its region is where its files are stored. Sydney (
ap-southeast-2) is the only region open today. - Open the application's API keys page and choose Create API key. Copy the key from the dialog. It is the value for
UPLOADFILE_TOKEN, and if you lose it you create a new key. - Follow the Next.js quickstart, or pick your framework in Framework guides.
- Two-factor authentication and passkeys are optional. Turn one on for accounts that own organizations or manage billing.