DOCSEARCHbyAlgolia
Submit Docs

EdgeStore Documentation

website·Indexed 33 days ago

https://edgestore.dev

A type-safe file upload solution with support for various storage providers including AWS S3, Azure Blob Storage, and its own native provider. Features dedicated adapters for Next.js, Astro, Express, Fastify, Hono, Remix, and TanStack Start, along with a suite of UI components like Dropzone, Progress Bar, and UploaderProvider.

Tokens
18.9K
Snippets
109
Records
127
Agent score
68%

What's inside EdgeStore

  1. Overview of EdgeStore capabilities

    EdgeStore is a type-safe file upload solution for React applications. It provides an API for uploading, managing, and serving files, featuring progress tracking, file validation, and automatic cleanup of temporary files. It supports multiple frameworks including Next.js (App Router and Pages Router), Astro, Express, Fastify, Hono, Remix, and TanStack Start.

  4. Manage temporary files

    Upload files that automatically expire after 24 hours by setting temporary: true in the upload options. Use confirmUpload to persist a temporary file permanently.
    // Upload as temporary
await edgestore.publicFiles.upload({
  file: fileToUpload,
  options: { temporary: true },
});

// Confirm/Persist the file
await edgestore.publicFiles.confirmUpload({
  url: urlToConfirm,
});

  7. Set up EdgeStore backend for Next.js Pages Router

    Create an API route handler for EdgeStore buckets. The EdgeStoreRouter type should be exported for frontend type-safety.
    // src/pages/api/edgestore/[...edgestore].ts
import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/pages';

const es = initEdgeStore.create();

const edgeStoreRouter = es.router({
  publicFiles: es.fileBucket(),
});

export default createEdgeStoreNextHandler({
  router: edgeStoreRouter,
});

export type EdgeStoreRouter = typeof edgeStoreRouter;

  8. Run an EdgeStore example app for local verification

    If you encounter issues with your own implementation, you can verify your environment by running one of the official example apps. This helps determine if the problem is with the EdgeStore setup or your specific application code.
    # Clone the repository
git clone https://github.com/edgestorejs/edgestore.git

# Navigate to a specific example (e.g., next-basic)
cd examples/next-basic

# Install dependencies
npm install

# Add your environment variables to examples/next-basic/.env.local

# Start the development server
npm run dev

  9. Implement the cn helper for EdgeStore components

    EdgeStore components require a cn utility function to handle Tailwind CSS class merging. Create this helper in your project (typically in src/lib/utils.ts) using clsx and tailwind-merge.
    import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

  10. Set up EdgeStore handler in Fastify

    To integrate EdgeStore into Fastify, you must register @fastify/cors (to handle cross-origin requests from the frontend) and @fastify/cookie (to parse context tokens). Use initEdgeStore to define your buckets and createEdgeStoreFastifyHandler to create the request handler. The handler must be mapped to both GET and POST routes under the /edgestore/* path.
    import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreFastifyHandler } from '@edgestore/server/adapters/fastify';
import cors from '@fastify/cors';
import cookie from '@fastify/cookie';
import fastify from 'fastify';

const app = fastify();

await app.register(cors, {
  origin: true,
  credentials: true,
});

await app.register(cookie);

const es = initEdgeStore.create();
const edgeStoreRouter = es.router({
  publicFiles: es.fileBucket(),
});

export type EdgeStoreRouter = typeof edgeStoreRouter;

const handler = createEdgeStoreFastifyHandler({
  router: edgeStoreRouter,
});

app.get('/edgestore/*', handler);
app.post('/edgestore/*', handler);

  11. Install ProgressBar component via CLI

    The ProgressBar component can be installed automatically using the shadcn CLI. Note that if you are installing other dropzone components via the CLI, this component may already be included.
    # npm
npx shadcn@latest add https://edgestore.dev/r/progress-bar.json

# pnpm
pnpm dlx shadcn@latest add https://edgestore.dev/r/progress-bar.json

# yarn
yarn dlx shadcn@latest add https://edgestore.dev/r/progress-bar.json

# bun
bun x shadcn@latest add https://edgestore.dev/r/progress-bar.json

  12. Install the Multi-image uploader via shadcn CLI

    The Multi-image uploader component can be added to your project using the shadcn CLI. This is the recommended method for quick installation.
    # Using npm
npx shadcn@latest add https://edgestore.dev/r/image-uploader.json

# Using pnpm
pnpm dlx shadcn@latest add https://edgestore.dev/r/image-uploader.json

# Using yarn
yarn dlx shadcn@latest add https://edgestore.dev/r/image-uploader.json

# Using bun
bun x shadcn@latest add https://edgestore.dev/r/image-uploader.json