### 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
type
###### Methods
onClick onFilesSelected getCssClasses
###### Inputs
disabled id isInvalid multiple variant class e2eAttr tabindex
###### Outputs
filesSelected
###### HostBindings
attr.type class class.ecl-file-upload--invalid
###### HostListeners
change click
###### Accessors
cssClasses invalidState

### Constructor

`constructor(ngControl: NgControl, el: ElementRef, translate: TranslateService, renderer: Renderer2, platformId: object)`
Parameters :
Name | Type | Optional
ngControl | `NgControl` | No
el | `ElementRef` | No
translate | `TranslateService` | No
renderer | `Renderer2` | No
platformId | `object` | No

### 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
get `cssClasses()`
Applies the base `ecl-file-upload` class to the host element. Returns : `string`

invalidState
get `invalidState()`
Returns `true` if component should be displayed as invalid. Prioritizes Angular form control status over `isInvalid` input. Returns : `boolean`

# results matching ""

# No results matching ""