### 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 ""