# AttachmentFilesField

A comprehensive file attachment component for managing file uploads and displays. Features file type detection, upload progress tracking, file preview, and removal confirmation.

## Features

- **File Upload**: Upload files with custom handlers and progress tracking
- **File Type Detection**: Automatic detection of images, PDFs, Office documents, audio, video
- **File Preview**: Display uploaded files with type-specific icons
- **Removal Confirmation**: Optional confirmation dialog before removing files
- **Display Modes**: Edit and View modes
- **Compact Layout**: Space-saving compact mode
- **Focus Management**: Built-in focus/blur event handling

## Installation

```bash
npm install @ticatec/uniface-element
```

```typescript
import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
```

## Basic Usage

```svelte
<script>
  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';

  let files = [];

  const uploadFile = async (file, progressUpdate, onUploaded, errorHandler) => {
    try {
      const formData = new FormData();
      formData.append('file', file);

      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });

      const result = await response.json();
      onUploaded(result.url, result.thumbnail);

      return { cancel: async () => true };
    } catch (error) {
      errorHandler(error);
      throw error;
    }
  };
</script>

<AttachmentFilesField bind:files {uploadFile} />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `files` | `Array<AttachmentFile>` | `[]` | Array of attachment files |
| `uploadFile` | `FileUpload` | Required | File upload handler |
| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual variant |
| `disabled` | `boolean` | `false` | Disable the field |
| `readonly` | `boolean` | `false` | Read-only mode |
| `compact` | `boolean` | `false` | Compact layout |
| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
| `removeFileConfirm` | `RemoveConfirm \| null` | `null` | Removal confirmation |
| `style` | `string` | `''` | Custom styles |
| `onfocus` | `() => void \| null` | `null` | Focus callback |
| `onblur` | `() => void \| null` | `null` | Blur callback |
| `onchange` | `(files: Array<AttachmentFile>) => void \| null` | `null` | Change callback |

## Type Definitions

```typescript
interface AttachmentFile {
  name: string;      // File name
  type: FileType;    // File type enum
  uri: string;       // File URI/path
}

enum FileType {
  IMAGE = 'img',     // Images (jpg, png, gif, etc.)
  PDF = 'pdf',       // PDF documents
  DOC = 'doc',       // Word (doc, docx)
  XLS = 'xml',       // Excel (xls, xlsx, csv)
  PPT = 'ppt',       // PowerPoint (ppt, pptx)
  AUDIO = 'wav',     // Audio (mp3, wav, aac, etc.)
  VIDEO = 'mov',     // Video (mp4, avi, mkv, etc.)
  OTHER = 'dat'      // Other files
}
```

## Examples

### Basic Upload

```svelte
<script>
  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';

  let files = [];

  const uploadFile = async (file, progressUpdate, onUploaded) => {
    // Your upload logic
    onUploaded(`/uploads/${file.name}`);
    return { cancel: async () => true };
  };
</script>

<AttachmentFilesField bind:files {uploadFile} />
```

### Read-only Mode

```svelte
<script>
  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';

  let files = [
    { name: 'report.pdf', uri: '/files/report.pdf', type: 'pdf' }
  ];
</script>

<AttachmentFilesField bind:files readonly />
```

### With Removal Confirmation

```svelte
<script>
  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';

  let files = [];

  const uploadFile = async (file, progressUpdate, onUploaded) => {
    onUploaded(`/uploads/${file.name}`);
    return { cancel: async () => true };
  };

  const removeFileConfirm = async (file) => {
    return confirm(`Remove ${file.name}?`);
  };
</script>

<AttachmentFilesField bind:files {uploadFile} {removeFileConfirm} />
```

## Best Practices

1. **Server Validation**: Always validate files on the server
2. **File Size Limits**: Enforce size limits to prevent issues
3. **Error Handling**: Implement proper error handling
4. **Progress Updates**: Show upload progress to users
5. **Security**: Validate file types on the server
6. **Cleanup**: Properly cancel uploads when needed

## Browser Support

- Modern browsers with File API support
- Touch-friendly interface
- Requires server-side upload implementation

## Notes

- Maximum 10 files can be uploaded at once
- File types are detected by extension
- Component automatically detects and displays file type icons