File Upload Button

Buttons 19

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds File Upload Button to your project and fits it to your theme.

Code

How File Upload Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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>
  );
}