Multi-image
A component for uploading multiple images with preview grid and progress indicators.
drag & drop images here, or click to select
Up to 6 files, Max size: 2 MB
Installation
Use the shadcn CLI to add the component to your project.
npx shadcn@latest add https://edgestore.dev/r/image-uploader.jsonUsage
'use client';
import { ImageUploader } from '@/components/upload/multi-image';
import {
UploaderProvider,
type UploadFn,
} from '@/components/upload/uploader-provider';
import { useEdgeStore } from '@/lib/edgestore';
import * as React from 'react';
export function MultiImageDropzoneUsage() {
const { edgestore } = useEdgeStore();
const uploadFn: UploadFn = React.useCallback(
async ({ file, onProgressChange, signal }) => {
const res = await edgestore.publicImages.upload({
file,
signal,
onProgressChange,
});
// you can run some server action or api here
// to add the necessary data to your database
console.log(res);
return res;
},
[edgestore],
);
return (
<UploaderProvider uploadFn={uploadFn} autoUpload>
<ImageUploader
maxFiles={10}
maxSize={1024 * 1024 * 1} // 1 MB
/>
</UploaderProvider>
);
}