Info

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

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

getcssClasses()

Sets the class attribute for the host element.

Returns : string

showResetBtn

getshowResetBtn()

Determines whether the reset button should be displayed.

Returns : boolean

isDropAreaDisabled

getisDropAreaDisabled()

Determines whether the drop area should be disabled.

Returns : boolean

File

Description

Basic file upload

With form control

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Accessors

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

Accessors

results matching ""

No results matching ""