Temporary files
With hosted storage, unconfirmed uploads are deleted after 24 hours. Confirm files when the user saves.
- Automatic cleanup
- Confirm on save
Your app.
Your uploads.
Your rules.
Type-safe file uploads for TypeScript and React. Customizable components with hosted storage or your own provider.
No credit card required.
Add uploads with your agent
Copy this prompt into your coding agent.
Read https://edgestore.dev/SKILL.md and add file uploads to this application.
End-to-end type safety
Server routerserver.ts
import { initEdgeStore } from '@edgestore/server';
import { z } from 'zod';
const es = initEdgeStore.create();
export const router = es.router({
projectFiles: es.fileBucket({
maxSize: 10 * 1024 * 1024,
accept: ['image/*', 'application/pdf'],
})
.input(z.object({ projectId: z.string() }))
.path(({ input }) => [{ project: input.projectId }]),
});
export type EdgeStoreRouter = typeof router;React clientUpload.tsx
const { edgestore } = useEdgeStore();
const result = await edgestore.projectFiles.upload({
file,
input: { projectId: 'launch' },
onProgressChange: setProgress,
});
// Inferred from your server router.
result.url;
result.path.project;Bucket names, upload input, and returned paths are inferred. No duplicate interfaces.
Validation, permissions, and upload controls
Browse upload componentsFile validation
Set file size and type limits per bucket. Validate application input with Zod, Valibot, or another Standard Schema library.
- File types
- Size limits
- Validated input
Access control
Use your existing authentication to decide who can upload or delete files. Add protected reads with hosted EdgeStore storage.
- Your authentication
- Upload and delete hooks
- Protected files
Upload controls
Show progress, cancel a transfer, and control parallel uploads. Customize our React components or use your own UI.
- Progress
- Cancellation
- Concurrency
File paths and metadata
Build file paths and metadata from typed input and user context. Work with files from your backend as well as the browser.
- Project folders
- Typed metadata
- Backend operations
React upload components
Add a dropzone with shadcn, then customize the code in your app.
npx shadcn@latest add https://edgestore.dev/r/single-image-dropzone.jsonHosted or bring your own storage
Use EdgeStore’s hosted storage, connect your own cloud account, or build a provider for another service.
EdgeStore hosted storage
File hosting, a management dashboard, protected access, and image thumbnails.
Use hosted storageView plans and limitsSupported frameworks
Choose your framework to get started. React-only apps can connect to any supported backend.
From developers using EdgeStore
“Just used this for file uploads in my new service. Really great documentation and examples. Took very little effort to integrate and test.”
@whiterabbit6768“Edgestore is a terrific solution. Many configuration choices covering a wide range of use-cases have been offered which make it super easy to use.”
@harshalranjhani“I have implemented a starter boilerplate with NextAuth, Resend and EdgeStore already set-up. Makes starting a new project a whole lot painless.”
@MarcelGateteFrequently asked questions
Can I use EdgeStore for free?
Yes. Hosted storage has a free plan, with no credit card required. See plans and limits.
What file types and sizes are supported?
Set allowed file types and maximum file sizes per bucket with accept and maxSize. See the file validation options.
Can I use my own storage?
Yes. Connect S3-compatible storage, Azure Blob Storage, or a custom provider.
Do I have to use the upload components?
No. Use the React client with your own UI, or copy and customize our upload components.
Can I use my existing authentication?
Yes. Pass your user context to EdgeStore and use it in your upload and delete rules. Hosted storage also supports protected file access.
Add file uploads to your app
Start for free. No credit card required.