form-preview-df/src/df-form-controls/df-form-file-upload/README.md

Resusable Form Preview Components

# DfFormFileUpload Component

A comprehensive file upload component for the Digital Forms system with drag-and-drop functionality, file preview, and validation.

## Features

- **Drag & Drop Support**: Users can drag files directly onto the upload area
- **File Preview**: Shows image previews for image files and appropriate icons for other file types
- **Multiple File Support**: Can handle single or multiple file uploads
- **File Validation**: Supports file type, size, and count validation
- **Accessibility**: Full keyboard navigation and screen reader support
- **Theme Support**: Works with both light and dark themes
- **Responsive Design**: Adapts to different screen sizes

## Usage

```tsx
import { DfFormFileUpload } from './df-form-file-upload';

const fileUploadComponent = {
  id: 'file-upload-1',
  name: 'file-upload',
  basic: {
    label: 'Upload Documents',
    placeholder: 'Drop your files here or click to browse',
    description: 'Upload PDF, DOC, or image files'
  },
  validation: {
    required: true,
    multiple: true,
    maxFiles: 5,
    maxSize: 10 * 1024 * 1024, // 10MB
    allowedTypes: ['.pdf', '.doc', '.docx', '.jpg', '.png', 'image/*']
  },
  styles: {
    labelAlignment: 'top'
  }
};

<DfFormFileUpload
  id="file-upload-1"
  properties={fileUploadComponent}
  onValueChange={(change) => console.log('Files changed:', change)}
  mode="test"
/>
```

## Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | Unique identifier for the component |
| `properties` | `IFileUploadComponent` | Component configuration |
| `formValue` | `File[] \| FileList \| null` | Current file values |
| `validationErrors` | `IFormValidationErrors` | Validation error messages |
| `readonly` | `boolean` | Whether the component is readonly |
| `disabled` | `boolean` | Whether the component is disabled |
| `mode` | `'edit' \| 'preview' \| 'test'` | Component mode |
| `onValueChange` | `(change: IFormControlChange) => void` | Callback when files change |
| `onBlur` | `() => void` | Callback when component loses focus |
| `onFocus` | `() => void` | Callback when component gains focus |

## Validation Options

The component supports various validation options through the `validation` property:

- `required`: Whether file upload is required
- `multiple`: Allow multiple file selection
- `maxFiles`: Maximum number of files allowed
- `maxSize`: Maximum file size in bytes
- `allowedTypes`: Array of allowed file types (extensions or MIME types)
- `accept`: HTML accept attribute for file input

## File Type Support

The component automatically detects file types and shows appropriate icons:

- **Images**: 🖼️ (with preview)
- **Videos**: 🎥
- **Audio**: 🎵
- **PDFs**: 📄
- **Documents**: 📝
- **Spreadsheets**: 📊
- **Archives**: 📦
- **Other**: 📁

## Styling

The component uses CSS classes that can be customized:

- `.file-upload-area`: Main upload area
- `.file-upload-wrapper`: Wrapper container
- `.file-item`: Individual file item
- `.file-preview`: File preview/icon area
- `.file-info`: File information (name, size)
- `.file-remove`: Remove file button

## Accessibility

- Full keyboard navigation support
- Screen reader announcements for file operations
- ARIA labels and descriptions
- Focus management
- High contrast support

## Browser Support

- Modern browsers with File API support
- Drag and drop functionality
- File preview for supported image types
- Responsive design for mobile devices