Skip to main content
A modern file upload component with drag-and-drop support, animated uploading states, and comprehensive file validation. Features a visually appealing upload animation with progress tracking.

​
Installation

npx shadcn@latest add @kokonutui/file-upload

​
Usage

import FileUpload from "@/components/kokonutui/file-upload";

export default function UploadPage() {
  const handleUploadSuccess = (file: File) => {
    console.log("Upload successful:", file.name);
  };

  const handleUploadError = (error: { message: string; code: string }) => {
    console.error("Upload failed:", error.message);
  };

  return (
    <FileUpload
      onUploadSuccess={handleUploadSuccess}
      onUploadError={handleUploadError}
      acceptedFileTypes={["image/png", "image/jpeg", "image/svg+xml"]}
      maxFileSize={5 * 1024 * 1024}
      uploadDelay={2000}
    />
  );
}

​
Props

​
onUploadSuccess
(file: File) => void
Callback fired when file upload completes successfully
​
onUploadError
(error: FileError) => void
Callback fired when file upload fails validation or encounters an error
​
acceptedFileTypes
string[]
Array of accepted MIME types (e.g., ["image/png", "image/jpeg"])
​
maxFileSize
number
default:"5242880"
Maximum file size in bytes. Defaults to 5MB (5 * 1024 * 1024)
​
currentFile
File | null
Currently selected file for controlled component usage
​
onFileRemove
() => void
Callback fired when user removes the selected file
​
uploadDelay
number
default:"2000"
Duration in milliseconds for the upload simulation. Set to 0 to disable simulation
​
validateFile
(file: File) => FileError | null
Custom validation function. Return a FileError object to reject the file
​
className
string
Additional CSS classes to apply to the component container

​
Features

  • Drag and Drop: Full drag-and-drop support with visual feedback
  • File Validation: Built-in validation for file type and size with custom validation support
  • Animated States: Smooth animations for idle, dragging, uploading, and error states
  • Progress Tracking: Visual progress indicator during upload simulation
  • Error Handling: Clear error messages with auto-dismiss after 3 seconds
  • Accessible: ARIA labels and semantic HTML for screen readers

​
Custom Validation

You can provide custom validation logic using the validateFile prop: 
const customValidation = (file: File) => {
  if (file.name.includes("temp")) {
    return {
      message: "Temporary files are not allowed",
      code: "INVALID_FILENAME",
    };
  }
  return null;
};

<FileUpload validateFile={customValidation} />

​
Dependencies

  • lucide-react - Icon components
  • motion (Framer Motion) - Animation library
  • react - Core React library

Build docs developers (and LLMs) love

Get started for freeTalk to us