### File

`packages/components/eui-file-upload/eui-file-upload.component.ts`

### Description

`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

Example :

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

### With form control

Example :

    fileControl = new FormControl([]);

Example :

    <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

### Implements

`ControlValueAccessor` `OnInit` `AfterViewInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `EuiFileUploadComponent`
selector | `eui-file-upload`
imports | `NgTemplateOutlet` `TranslateModule` `EuiFilePreviewComponent` `EuiFileUploadProgressComponent` `EuiFileSizePipe` `EUI_BUTTON`
styleUrls | `./eui-file-upload.scss`
templateUrl | `./eui-file-upload.component.html`

### Index

###### Properties

- Public browseButtonTemplate
- Public dragEntered
- fileInputs
- Public files
- Public filesTotalSize
- Public progressBarTemplate
- Public randomNumberId
- Public resetButtonTemplate
- templates
- Public uploadedFiles
- Public uploadedFileTemplate

###### Methods

- emitFiles
- onDragEnter
- onDragLeave
- Public onItemClick
- Public openBrowseWindow
- registerOnChange
- registerOnTouched
- Public removeFromList
- Public removeFromUploadedList
- Public resetList
- writeValue

###### Inputs

- accept
- e2eAttr
- hasDragArea
- hasPreview
- hasPreviewAsIcon
- hasPreviewAsImage
- hasProgressBar
- hasResetButton
- hasTotalSizeDisplayed
- isItemsClickable
- isMultiple
- maxFiles
- progress

###### Outputs

- fileDrop
- itemClick

###### HostBindings

- class

###### HostListeners

- change

###### Accessors

- cssClasses
- showResetBtn
- isDropAreaDisabled

### Inputs

accept
Type : `string`
Default value : `'*'`
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
Type : `string`
Default value : `'eui-file-upload'`
Data attribute used for end-to-end testing identification.

hasDragArea
Type : `boolean`
Default value : `false`
Enables drag-and-drop functionality for file selection. Displays a drop zone area where users can drag files from their file system.

hasPreview
Type : `boolean`
Default value : `true`
Displays a visual preview for each file in the upload list. Preview type is controlled by hasPreviewAsImage and hasPreviewAsIcon properties.

hasPreviewAsIcon
Type : `boolean`
Default value : `false`
Renders file previews as file format icons instead of image thumbnails. When enabled, automatically sets hasPreviewAsImage to false.

hasPreviewAsImage
Type : `boolean`
Default value : `true`
Renders file previews as thumbnail images for supported image file types. Automatically disabled when hasPreviewAsIcon is true.

hasProgressBar
Type : `boolean`
Default value : `true`
Displays a progress bar indicating upload completion percentage. Progress value must be provided via the progress input property.

hasResetButton
Type : `boolean`
Default value : `true`
Displays a button to clear all files from the upload queue. Only visible when isMultiple is true and files are present.

hasTotalSizeDisplayed
Type : `boolean`
Default value : `true`
Shows the total combined size of all files in the upload queue. Provides users with visibility into total upload size.

isItemsClickable
Type : `boolean`
Default value : `false`
Makes files in the upload list clickable, emitting itemClick events on interaction. Useful for implementing file preview or detail views.

isMultiple
Type : `boolean`
Default value : `true`
Enables selection of multiple files in a single upload operation. When false, only one file can be selected at a time.

maxFiles
Type : `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
Type : `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
Type : `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
Type : `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.

### HostBindings

class
Type : `string`
Sets the `class` attribute for the host element.

### HostListeners

change
Arguments : `'$any($event.target).files'`
`change(fileList: FileList)`

Drag and drop area listener.

Parameters :

Name | Optional | Description
fileList | No | `FileList` containing dropped file and initial file.

### Methods

emitFiles
`emitFiles(fileList: FileList)`
Decorators : `@HostListener('change', ['$any($event.target).files'])`

Drag and drop area listener.

Parameters :

Name | Type | Optional | Description
fileList | `FileList` | No | `FileList` containing dropped file and initial file.

Returns : `void`

onDragEnter
`onDragEnter()`
Returns : `void`

onDragLeave
`onDragLeave()`
Returns : `void`

Public onItemClick
`onItemClick(e: Blob | EuiUploadedFileInterface | any)`

Click item handler.

Parameters :

Name | Type | Optional | Description
e | `Blob | EuiUploadedFileInterface | any` | No | The item clicked. Will be a `Blob` for a file to be uploaded, `EuiUploadedFileInterface` for an initial file.

Returns : `void`

Public openBrowseWindow
`openBrowseWindow()`
Returns : `void`

registerOnChange
`registerOnChange(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public removeFromList
`removeFromList(index: number)`

Remove a file from the array of files choosen by the user.

Parameters :

Name | Type | Optional | Description
index | `number` | No | Index of the file to remove in the array.

Returns : `void`

Public removeFromUploadedList
`removeFromUploadedList(index: number)`

Remove a file from the array of files provided to the component as existing values.

Parameters :

Name | Type | Optional | Description
index | `number` | No | Index of the file to remove in the array.

Returns : `void`

Public resetList
`resetList()`
Reset the list of files in the component. Returns : `void`

writeValue
`writeValue(value: any)`

Parameters :

Name | Type | Optional
value | `any` | No

Returns : `void`

### Properties

Public browseButtonTemplate
Type : `TemplateRef<HTMLElement>`

Public dragEntered
Type : `unknown`
Default value : `false`

fileInputs
Type : `QueryList<ElementRef<HTMLInputElement>>`
Decorators : `@ViewChildren('input')`

Public files
Type : `File[]`
Default value : `[]`

Public filesTotalSize
Type : `number`
Default value : `0`

Public progressBarTemplate
Type : `TemplateRef<literal type>`

Public randomNumberId
Type : `unknown`
Default value : `Math.floor(Math.random() * 10000)`
Random number generated to give an unique id to the field.

Public resetButtonTemplate
Type : `TemplateRef<HTMLElement>`

templates
Type : `QueryList<EuiTemplateDirective>`
Decorators : `@ContentChildren(EuiTemplateDirective)`
List of templates passed to the component.

Public uploadedFiles
Type : `EuiUploadedFileInterface[]`
Default value : `[]`
List of existing files to display in the component.

Public uploadedFileTemplate
Type : `TemplateRef<literal type>`

### Accessors

cssClasses
get `cssClasses()`
Sets the `class` attribute for the host element. Returns : `string`

showResetBtn
get `showResetBtn()`
Determines whether the reset button should be displayed. Returns : `boolean`

isDropAreaDisabled
get `isDropAreaDisabled()`
Determines whether the drop area should be disabled. Returns : `boolean`

# results matching ""

# No results matching ""