Components
Loading preview...
A sleek file upload button for React, built with shadcn/ui. Supports click and drag-and-drop, with file type/size validation, image previews, and file management. Customizable via onFileSelect, maxSize, allowedTypes, className, and disabled props.
npx shadcn@latest add https://21st.dev/r/bankkroll/file-upload-buttonimport { FileUploadButton } from "@/components/ui/file-upload-button";
import { useState } from "react";
export default function FileUploadDemo() {
const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null);
const handleFileSelect = async (file: File) => {
// Simulate async upload (e.g., to a server)
await new Promise((resolve) => setTimeout(resolve, 1000));
setFileInfo({ name: file.name, size: file.size });
console.log("Uploaded file:", file.name);
};
const formatFileSize = (bytes: number) => {
const sizes = ["Bytes", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
};
return (
<div className="w-[200px]">
<FileUploadButton
onFileSelect={handleFileSelect}
maxSize={5 * 1024 * 1024} // 5MB limit
allowedTypes={["image/png", "image/jpeg", "application/pdf"]}
className="border-none"
/>
{fileInfo && (
<div className="mt-2 text-sm text-foreground">
<p className="font-medium">Uploaded File:</p>
<p className="truncate">{fileInfo.name}</p>
<p className="text-muted-foreground">{formatFileSize(fileInfo.size)}</p>
</div>
)}
</div>
);
}