Components
Loading preview...
upload file
npx shadcn@latest add https://21st.dev/r/flower0wine/file-uploadimport { useState } from "react"
import FileUpload, { DropZone, FileError, FileList, FileInfo, FileProgress } from "@/components/ui/file-upload";
const DemoOne = () => {
const [uploadFiles, setUploadFiles] = useState([]);
const onFileSelectChange = (files: FileInfo[]) => {
setUploadFiles(files)
}
const onRemove = (fileId: string) => {
setUploadFiles(uploadFiles.filter(file => file.id !== fileId))
}
return (
<div>
<FileUpload
files={uploadFiles}
onFileSelectChange={onFileSelectChange}
multiple={true}
accept=".pdf,.docx,.doc,.png,.jpg,.jpeg"
maxSize={10}
maxCount={3}
className="mt-2"
disabled={false}
>
<div className="space-y-4">
<DropZone prompt="click or drop, 3 file to upload" />
<FileError />
<FileProgress />
<FileList onClear={()=>{
setUploadFiles([])
}} onRemove={onRemove} canResume={true}/>
</div>
</FileUpload>
</div>
);
};
export { DemoOne };