packages/eui/packages/components/eui-file-upload/eui-file-upload.component.ts
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.
ControlValueAccessor
OnInit
AfterViewInit
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 |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
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 |
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. |
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 |
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. |
class |
Type : string
|
Sets the |
change | ||||||
Arguments : '$event.target.files'
|
||||||
change(fileList: FileList)
|
||||||
Drag and drop area listener.
Parameters :
|
emitFiles | ||||||||
emitFiles(fileList: FileList)
|
||||||||
Decorators :
@HostListener('change', ['$event.target.files'])
|
||||||||
Drag and drop area listener.
Parameters :
Returns :
void
|
onDragEnter |
onDragEnter()
|
Returns :
void
|
onDragLeave |
onDragLeave()
|
Returns :
void
|
Public onItemClick | ||||||||
onItemClick(e: Blob | EuiUploadedFileInterface | any)
|
||||||||
Click item handler.
Parameters :
Returns :
void
|
Public openBrowseWindow |
openBrowseWindow()
|
Returns :
void
|
registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
Parameters :
Returns :
void
|
registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
Parameters :
Returns :
void
|
Public removeFromList | ||||||||
removeFromList(index: number)
|
||||||||
Remove a file from the array of files choosen by the user.
Parameters :
Returns :
void
|
Public removeFromUploadedList | ||||||||
removeFromUploadedList(index: number)
|
||||||||
Remove a file from the array of files provided to the component as existing values.
Parameters :
Returns :
void
|
Public resetList |
resetList()
|
Reset the list of files in the component.
Returns :
void
|
writeValue | ||||||
writeValue(value: any)
|
||||||
Parameters :
Returns :
void
|
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>
|
cssClasses |
getcssClasses()
|
Sets the
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
|