File Upload Modal

File upload interface modal with drag-and-drop and progress tracking. Perfect for document uploads, image uploads, and file management.

Features

Drag and drop file upload
File type and size validation
Upload progress tracking
Multiple file support
File preview and removal
Error handling and validation messages

Example

Upload Files

Click the button below to open the file upload modal. You can drag and drop files or click to browse.

Usage

import { FileUploadModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleUpload = (files: UploadedFile[]) => {
    console.log('Files uploaded:', files)
    // Process files
    setIsOpen(false)
  }
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Upload Files
      </Button>
      
      <FileUploadModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onUpload={handleUpload}
        acceptedTypes={['image/*', '.pdf', '.doc', '.docx']}
        maxSize={10 * 1024 * 1024} // 10MB
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onUpload	(files) => void	-	Callback with uploaded files
acceptedTypes	string[]	-	Accepted file MIME types or extensions
maxSize	number	-	Maximum file size in bytes
multiple	boolean	true	Allow multiple file selection