Skip to main content

Implementing file uploads
should be easy.

Storage, CDN and a super easy to use type-safe library.
Created by a developer, for developers.

Start for freeLearn more

Start for free

Get your free storage and start building. No credit card required.

Effortless Integration

Use our type-safe npm package to seamlessly integrate EdgeStore into your app.

Easy-to-Use Dashboard

Monitor, manage, and delete files with ease.

Fast CDN

All your files are served from the edge for a great performance anywhere in the world.

Large file support

Automatically uses multipart uploads for bigger files.

Protected Files

Ensure your files are safe with custom edge validations.

Automatic Thumbnail Generation

Images ready to use, without the extra effort.

Customizable Components

Just copy one of our sample components and customize it to your needs.

And More...

Temporary files, parallel uploads, and much more. Handle all scenarios with finesse.

ts
const publicImages = es
  .imageBucket()
  .input(
    z.object({
      type: z.enum(['profile', 'post']),
    }),
  )
  .path(({ ctx, input }) => [{ author: ctx.userId }, { type: input.type }])
  .beforeUpload((params) => {
    const { ctx, input, fileInfo } = params;
                  
const input: {
    type: "profile" | "post";
}
    // check if user is allowed to upload here
    return true;
  });

Step 1 - Server

Use our completely type-safe package to configure your storage. You can configure who can upload and access files and even add metadata that can be used for access control or search filtering.

You can also leverage the lifecycle hooks to run custom code when a file is uploaded or deleted. Which can be used to sync data with your database if needed.

tsx
<html lang="en">
  <body>
    <EdgeStoreProvider>{children}</EdgeStoreProvider>
  </body>
</html>

Step 2 - Client

Wrap your app with the EdgeStore provider component. This will enable you to access EdgeStore methods anywhere in your app.

tsx
const res = await edgestore.publicImages.upload({
  file,
  onProgressChange: (progress) => {
    // you can use this to show a progress bar
    console.log(progress);
  },
});
// you can run some server action or api here
// to add the necessary data to your database
console.log(res);
            
const res: {
    url: string;
    thumbnailUrl: string | null;
    size: number;
    uploadedAt: Date;
    metadata: Record<string, never>;
    path: Record<string, never>;
    pathOrder: string[];
}

Step 3 - Start uploading

Use the useEdgeStore hook to upload files to EdgeStore. You can also use the onProgressChange callback to easily show a progress bar for your uploads.

If it is a storage for images and the image is large, EdgeStore will automatically create a thumbnail for you. And return the url for the thumbnail in the response. (Thumbnail images are not counted towards your storage quota.)

Start for free