Multi-image
A gallery uploader for multiple images with thumbnails and progress indicators.
Click to upload or drag and drop
PNG, JPG, WEBP or GIF · up to 2 MB each · 6 max
When empty, it is a large dropzone. Once images are added, it shows a thumbnail grid that still accepts drops, plus an Add tile. If a drop has more images than there is room for, it keeps what fits and says how many were skipped.
Installation
Use the shadcn CLI to add the component to your project.
npx shadcn@latest add https://edgestore.dev/r/image-uploader.jsonUsage
Install or copy the component from Installation before using this example.
'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={6}
maxSize={1024 * 1024 * 1} // 1 MB
/>
</UploaderProvider>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxFiles | number | Maximum number of images in total. | |
maxSize | number | Maximum file size in bytes. | |
accept | Accept | PNG, JPG, WEBP, GIF | Accepted file types, in react-dropzone's format. |
typesLabel | string | "PNG, JPG, WEBP or GIF" | Human-readable list of accepted types, shown in the hint and in error messages. |
disabled | boolean | false | Disables the component. |