About
upload file
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FileUpload to your project and fits it to your theme.
Code
How FileUpload is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { 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 };
Dependencies
More by 花间酒
View all
ButtonGroup
3