### File

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

### Description

`eui-file-upload` allows the user to upload a file to a server. It can be use in the classic simple file way or with a drag and drop feature.

### Implements

`ControlValueAccessor` `OnInit` `AfterViewInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: EuiFileUploadComponent, multi: true, }`
selector | `eui-file-upload`
imports | `NgTemplateOutlet` `TranslateModule` `EuiFilePreviewComponent` `EuiFileUploadProgressComponent` `EuiFileSizePipe` `EUI_BUTTON` `EUI_ICON`
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
- isBrowseButtonDisabled

### Inputs

accept
Type : `string`
Default value : `'*'`
A comma separated list of extension allowed to be uploaded by the user.

e2eAttr
Type : `string`
Default value : `'eui-file-upload'`
Sets the `data-e2e` attribute for the host element.

hasDragArea
Type : `boolean`
Default value : `false`
Wheter files can be drag and dropped in the component.

hasPreview
Type : `boolean`
Default value : `true`
Wheter a preview, image or icon, is displayed for a file to upload.

hasPreviewAsIcon
Type : `boolean`
Default value : `false`
Wheter a preview is displayed as a file format icon.

hasPreviewAsImage
Type : `boolean`
Default value : `true`
Wheter a preview is displayed as image.

hasProgressBar
Type : `boolean`
Default value : `true`
Wheter a progress bar is displayed to indicate the upload progress.

hasResetButton
Type : `boolean`
Default value : `true`
Wheter a reset list button is displayed.

hasTotalSizeDisplayed
Type : `boolean`
Default value : `true`
Wheter the total size that will be uploaded is displayed.

isItemsClickable
Type : `boolean`
Default value : `false`
Wheter items can be clicked. `itemClick` event is emitted.

isMultiple
Type : `boolean`
Default value : `true`
Wheter multiple files can be choosen.

maxFiles
Type : `number`
The maximum number of file the user is allowed to upload

progress
Type : `number`
In combination with `hasProgressBar`. Sets the progress of upload to be displayed by the progress bar.

### Outputs

fileDrop
Type : `EventEmitter`
Event emitted when a file is drag and dropped in the component.

itemClick
Type : `EventEmitter`
Event emitted when a choosen file to upload is clicked.

### HostBindings

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

### HostListeners

change
Arguments : `'$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', ['$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
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
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`

isBrowseButtonDisabled
get `isBrowseButtonDisabled()`

# results matching ""

# No results matching ""