eui documentation
  1. Directives
  2. EclFileUploadDirective

File

packages/ecl/components/ecl-file-upload/ecl-file-upload.directive.ts

Description

Directive that enhances a native input[type=file] with ECL-compliant styling and behavior. Supports multiple file selection, dynamic file list rendering, translations and validation state.

Extends

ECLBaseDirective

Implements

OnInit OnDestroy DoCheck

Metadata

Selector [eclFileUpload]

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

disabled
Type : boolean

Whether the component is disabled.
id
Type : string

ID attribute applied to the native file input.
isInvalid
Type : boolean
Default value : false

Marks the component as invalid (if not using Angular form validation).
multiple
Type : boolean

Allows selecting multiple files.
variant
Type : string
Default value : 'default'

Variant of the component's appearance. Currently unused. Default: 'default'.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

filesSelected
Type : EventEmitter

Event emitted when files are selected.

HostBindings

attr.type
Type : string
Default value : 'file'

Host binding to define input type as 'file'.
class
Type : string

Applies the base ecl-file-upload class to the host element.
class.ecl-file-upload--invalid
Type : boolean

Returns true if component should be displayed as invalid. Prioritizes Angular form control status over isInvalid input.

HostListeners

change
Arguments : '$event'

Handles file selection and emits a structured file selection event.

Parameters :
Name Optional Description
evt No

Change event from input.
click
Arguments : '$event'

Prevents file dialog from opening when component is disabled.

Parameters :
Name Optional Description
evt No

Click event on the input element.

Methods

onClick
onClick(evt: Event)
Decorators :
@HostListener('click', ['$event'])

Prevents file dialog from opening when component is disabled.

Parameters :
Name Type Optional Description
evt Event No

Click event on the input element.
Returns : void
onFilesSelected
onFilesSelected(evt: Event)
Decorators :
@HostListener('change', ['$event'])

Handles file selection and emits a structured file selection event.

Parameters :
Name Type Optional Description
evt Event No

Change event from input.
Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

type
Type : string
Default value : 'file'
Decorators :
@HostBinding('attr.type')

Host binding to define input type as 'file'.

Accessors

cssClasses
getcssClasses()

Applies the base ecl-file-upload class to the host element.

Returns : string
invalidState
getinvalidState()

Returns true if component should be displayed as invalid. Prioritizes Angular form control status over isInvalid input.

Returns : boolean

results matching ""

    No results matching ""