eui documentation
  1. Components
  2. EuiFileUploadComponent

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
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
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
isBrowseButtonDisabled
getisBrowseButtonDisabled()

results matching ""

    No results matching ""