# EuiFileUploadComponent

**Type:** component



`eui-file-upload` component supporting both traditional file selection and drag-and-drop functionality.
Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms.
`eui-file-upload` provides file preview, upload progress tracking, file type filtering, and multiple file management.
`eui-file-upload` displays uploaded files with customizable templates for previews, buttons, and progress indicators.

### Basic file upload
```html
<eui-file-upload
  [isMultiple]="true"
  accept=".pdf,.doc,.docx"
  [maxFiles]="5">
</eui-file-upload>
```

### With form control
```typescript
fileControl = new FormControl([]);
```
```html
<eui-file-upload
  [formControl]="fileControl"
  [hasDragArea]="true"
  [progress]="uploadProgress">
</eui-file-upload>
```

### Accessibility
- Native file input is keyboard accessible
- Drag-and-drop area announces state changes to screen readers
- File list items are navigable and removable via keyboard

### Notes
- Use `accept` to filter file types (e.g., "image/*", ".pdf")
- Progress tracking requires external upload logic to update `progress` input
- Customize UI with templates: uploadedFile, browseButton, resetButton, progressBar
- Set `maxFiles` to limit simultaneous uploads


**Selector:** `eui-file-upload`

## Inputs
- **accept**: `string` - Comma-separated list of allowed file extensions for upload filtering. Files not matching the specified extensions will be rejected. Use '*' to allow all file types.
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.
- **hasDragArea**: `boolean` - Enables drag-and-drop functionality for file selection. Displays a drop zone area where users can drag files from their file system.
- **hasPreview**: `boolean` - Displays a visual preview for each file in the upload list. Preview type is controlled by hasPreviewAsImage and hasPreviewAsIcon properties.
- **hasPreviewAsIcon**: `boolean` - Renders file previews as file format icons instead of image thumbnails. When enabled, automatically sets hasPreviewAsImage to false.
- **hasPreviewAsImage**: `boolean` - Renders file previews as thumbnail images for supported image file types. Automatically disabled when hasPreviewAsIcon is true.
- **hasProgressBar**: `boolean` - Displays a progress bar indicating upload completion percentage. Progress value must be provided via the progress input property.
- **hasResetButton**: `boolean` - Displays a button to clear all files from the upload queue. Only visible when isMultiple is true and files are present.
- **hasTotalSizeDisplayed**: `boolean` - Shows the total combined size of all files in the upload queue. Provides users with visibility into total upload size.
- **isItemsClickable**: `boolean` - Makes files in the upload list clickable, emitting itemClick events on interaction. Useful for implementing file preview or detail views.
- **isMultiple**: `boolean` - Enables selection of multiple files in a single upload operation. When false, only one file can be selected at a time.
- **maxFiles**: `number` - Maximum number of files that can be uploaded simultaneously. When limit is reached, additional file selection is disabled. Set to null or undefined for unlimited files.
- **progress**: `number` - Current upload progress percentage displayed in the progress bar. Only effective when hasProgressBar is true. Value should be between 0 and 100. Must be updated externally to reflect actual upload progress.

## Outputs
- **fileDrop**: `EventEmitter` - Emitted when files are dropped into the drag-and-drop area. Triggered after files are processed and added to the upload queue. No payload is emitted.
- **itemClick**: `EventEmitter` - Emitted when a file in the upload list is clicked. Only triggers when isItemsClickable is true. Payload: Blob, EuiUploadedFileInterface, or any file object representing the clicked item.