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 free
Get your free storage and start building. No credit card required.
Effortless Integration
Use our type-safe npm package to seamlessly integrate Edge Store 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
constpublicImages =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 ;// check if user is allowed to upload herereturn 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 Edge Store provider component. This will enable you to access Edge Store methods anywhere in your app.
tsx
constres = awaitedgestore .publicImages .upload ({file ,onProgressChange : (progress ) => {// you can use this to show a progress barconsole .log (progress );},});// you can run some server action or api here// to add the necessary data to your databaseconsole .log (res );
Step 3 - Start uploading
Use the useEdgeStore hook to upload files to Edge Store. 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, Edge Store 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.)