Upload Button
A button that opens the file dialog and also accepts files dropped onto it.
It takes the same props as the shadcn/ui Button. Several buttons can feed the same UploaderProvider, so you can pair them with a FileList or build your own list with useUploader.
Installation
Use the shadcn CLI to add the component to your project.
npx shadcn@latest add https://edgestore.dev/r/upload-button.jsonUsage
Install or copy the component from Installation before using this example.
'use client';
import { UploadErrors } from '@/components/upload/dropzone';
import { FileList } from '@/components/upload/multi-file';
import { UploadButton } from '@/components/upload/upload-button';
import {
UploaderProvider,
type UploadFn,
} from '@/components/upload/uploader-provider';
import { useEdgeStore } from '@/lib/edgestore';
import { UploadIcon } from 'lucide-react';
import * as React from 'react';
export function UploadButtonUsage() {
const [errors, setErrors] = React.useState<string[]>([]);
const { edgestore } = useEdgeStore();
const uploadFn: UploadFn = React.useCallback(
async ({ file, onProgressChange, signal }) => {
const res = await edgestore.publicFiles.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>
<UploadButton
maxSize={1024 * 1024 * 1} // 1 MB
onRejected={setErrors}
>
<UploadIcon /> Upload files
</UploadButton>
<UploadErrors errors={errors} onDismiss={() => setErrors([])} />
<FileList />
</UploaderProvider>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxFiles | number | Maximum number of files in total. | |
multiple | boolean | true | Whether more than one file can be picked at once. |
onRejected | (messages: string[]) => void | Called with messages about files that were not added. | |
maxSize | number | Maximum file size in bytes. | |
accept | Accept | all types | Accepted file types, in react-dropzone's format. |
typesLabel | string | Human-readable list of accepted types, shown in the hint and in error messages. | |
disabled | boolean | false | Disables the component. |
variant, size, ... | Any other Button prop. |