File Upload Components

Components for handling file uploads with drag-and-drop support and progress tracking.

FileUpload

Generic file upload component with drag-and-drop support.

📁

Drop file here or click to browseMax size: 25MB

import { FileUpload } from '@/components/files'

<FileUpload
  accept="image/*"
  maxSize={25 * 1024 * 1024}  // 25MB
  parentType="EventSite"
  parentId="evt_123"
  onSuccess={(fileId, downloadUrl) => {
    console.log('Uploaded:', fileId)
  }}
  onError={(error) => {
    console.error('Failed:', error)
  }}
/>

Props

Prop	Type	Default	Description
`accept`	string	"/"	Accepted file types (e.g., "image/*", ".pdf")
`maxSize`	number	-	Maximum file size in bytes
`parentType`	string	-	Parent asset type for permission inheritance
`parentId`	string	-	Parent asset ID
`onSuccess`	function	-	Called with (fileId, downloadUrl) on success
`onError`	function	-	Called with error message on failure
`disabled`	boolean	false	Disable the upload area

ProfileImageUpload

Specialized component for profile picture uploads with circular crop and overlay.

Without image

With image

Small (80px)

import { ProfileImageUpload } from '@/components/files'

<ProfileImageUpload
  currentImageUrl={user.image}
  individualId={user.individualId}
  size={120}
  onImageChange={(newUrl) => {
    // Called when image changes
  }}
/>

Props

Prop	Type	Default	Description
`currentImageUrl`	string \| null	null	URL of current profile image
`individualId`	string	required	Individual ID for API calls
`size`	number	120	Size in pixels
`onImageChange`	function	-	Called with new image URL or null
`disabled`	boolean	false	Disable upload/remove functionality

useFileUpload Hook

React hook for custom file upload implementations.

import { useFileUpload } from '@/hooks/useFileUpload'

function MyComponent() {
  const {
    status,    // 'idle' | 'preparing' | 'uploading' | 'confirming' | 'success' | 'error'
    progress,  // 0-100
    file,      // Selected File object
    fileId,    // Uploaded file ID
    error,     // Error message if failed
    upload,    // (file: File) => Promise
    reset,     // () => void
  } = useFileUpload({
    parentType: 'Individual',
    parentId: 'ind_123',
    onSuccess: (fileId, downloadUrl) => { ... },
    onError: (error) => { ... },
  })

  return (
    <input
      type="file"
      onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])}
    />
  )
}