File
Description
A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
Example:
<div>
<c8y-drop-area
(dropped)="uploadFile($event)"
[icon]="'upload'"
[accept]="'.zip,.7z,video'">
</c8y-drop-area>
</div>
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
HostListeners
|
|
|
|
accept
|
Type : string
|
Specifies a filter for what file types the user can pick from the file input dialog box.
Example:
Specify file types by extensions:
...
[accept]="'.zip,.7z'"
...
Specify file types by extensions and generic types GENERIC_FILE_TYPE:
...
[accept]="'.pdf,archive'"
...
Specify file types by generic types GENERIC_FILE_TYPE:
...
[accept]="'archive,video'"
...
|
|
alwaysShow
|
Type : boolean
|
Default value : false
|
Affects displaying both the drop zone and the list of dropped files.
|
|
clickToOpen
|
Type : boolean
|
Default value : true
|
|
forceHideList
|
Type : boolean
|
Default value : false
|
|
formControl
|
Type : AbstractControl<any | any>
|
|
icon
|
Type : string
|
Default value : 'plus-square'
|
|
loading
|
Type : boolean
|
Default value : false
|
|
loadingMessage
|
Type : any
|
Default value : gettext('Uploading…')
|
|
maxAllowedFiles
|
Type : any
|
Default value : Infinity
|
|
message
|
Type : any
|
Default value : gettext('Drop file here')
|
|
progress
|
Type : number
|
Default value : -1
|
Current progress of the upload as a percentage. If not given a spinner will be displayed.
|
|
title
|
Type : any
|
Default value : gettext('Upload file')
|
HostListeners
|
keyup
|
Arguments : '$event'
|
keyup(event: KeyboardEvent)
|
Methods
|
onDelete
|
onDelete()
|
Delete files already dropped files.
|
|
onDrop
|
onDrop($event)
|
Handle file when it is dropped into drop-area.
|
|
onkeyup
|
onkeyup(event: KeyboardEvent)
|
Decorators :
@HostListener('keyup', ['$event'])
|
Parameters :
| Name |
Type |
Optional |
| event |
KeyboardEvent
|
No
|
|
|
onOver
|
onOver()
|
Triggered when file is on over drop area, but not dropped.
|
|
onPick
|
onPick($event)
|
Triggered when file is dropped.
|
|
registerOnChange
|
registerOnChange(fn: any)
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
registerOnTouched
|
registerOnTouched(fn: any)
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
shouldShowFilesList
|
shouldShowFilesList()
|
Checks condition what should be displayed: drop-area zone or list of dropped files.
|
|
showPicker
|
showPicker($event?)
|
Shows computer browser with files to drop into drop-area zone.
|
|
stopDragging
|
stopDragging()
|
Triggered when file is picked over web application.
|
|
toggle
|
toggle()
|
Toggles the style of the drop zone element when a file is dragged over the component.
|
|
writeValue
|
writeValue(value: any)
|
Parameters :
| Name |
Type |
Optional |
| value |
any
|
No
|
|
|
acceptedExts
|
Type : string[]
|
|
area
|
Type : ElementRef
|
Decorators :
@ViewChild('area', {static: true})
|
|
errors
|
Type : boolean
|
Default value : false
|
|
isOver
|
Type : boolean
|
Default value : false
|
|
onChange
|
Type : function
|
Default value : () => {...}
|
|
onTouched
|
Type : function
|
Default value : () => {...}
|
|
picker
|
Type : ElementRef
|
Decorators :
@ViewChild('picker', {static: false})
|
|
zone
|
Type : ElementRef
|
Decorators :
@ViewChild('zone', {static: false})
|
Drop area component
A drop-zone which is a file selector allowing users to select file(s) from their file system, either natively or by drag and drop.
Allows to select a binary for upload, or to specify uri to external resource.
Component provides drop area functionality allowing you to just drop files within specified area.
Attributes:
- class="drop-area-sm" - prevents component from occupying whole available area
- dropped-file object of droppedFiles[] type:
droppedFiles[];
element {
file {
lastModified: 168271687167,
lastModifiedDate: Tue Nov 17 2020 08:37:11 GMT+0000,
name: "Dropped File.txt,
size: 35279,
type: "",
webkitRelativePath: ""
}
}
could be handled by following function:
onFileDropped(droppedFiles: DroppedFile[]) {
this.onFilesPicked.emit({
droppedFiles
});
}
- title - display info for user, i.e. 'Drop file or click to browse'
- maxAllowedFiles - describe how many files can be dropped once, accept only numbers
- files - type FileList, it is used to check the length of dropped array of files
- $event - object of droppedFiles[] type
Usage Example:
<div>
<c8y-drop-area
class="drop-area-sm"
(dropped)="onFileDropped($event)"
[title]="'Drop file or click to browse'"
[maxAllowedFiles]="maxAllowedFiles"
[files]="droppedFiles">
</c8y-drop-area>
</div>
<c8y-drop-area>
<h4>Put file here, it's a drop area</h4>
<c8y-drop-area>
<div
class="drop-zone"
*ngIf="!shouldShowFilesList()"
[ngClass]="{ 'has-errors': errors }"
[style.pointerEvents]="loading ? 'none' : 'auto'"
#zone
(dragleave)="stopDragging()"
(drop)="onDrop($event)"
(dragover)="onOver()"
[style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
(click)="showPicker($event)"
tabindex="0"
>
<div class="file-placeholder" [ngClass]="{ 'drag-over': isOver }">
<div *ngIf="loading" class="d-flex p-4 flex-center">
<div
class="progress progress-striped active m-0"
*ngIf="progress !== -1"
style="min-width: 50%"
>
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
[style.width]="progress + '%'"
></div>
</div>
<div class="spinner-snake" *ngIf="progress === -1"></div>
<p class="flex-item-middle m-r-8">
{{ loadingMessage | translate }}
</p>
</div>
<div *ngIf="!loading" class="hint-placeholder pointer">
<i class="dlt-c8y-icon-{{ icon }}"></i>
<p *ngIf="!errors">
<b>{{ message | translate }}</b>
<br />
<span *ngIf="alwaysShow && clickToOpen" translate
>or click to browse your file system.</span
>
</p>
<div *ngIf="errors" class="has-errors">
<p class="form-control-feedback-message">
{{ errorMessage | translate }}
</p>
</div>
</div>
</div>
</div>
<div
class="drop-zone"
*ngIf="shouldShowFilesList()"
[style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
tabindex="0"
>
<div *ngIf="loading" class="p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center">
<p class="m-b-8">
<strong>
{{ loadingMessage | translate }}
</strong>
</p>
<div
class="progress progress-striped active m-0"
*ngIf="progress !== -1"
style="min-width: 80%"
>
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
[style.width]="progress + '%'"
></div>
</div>
<div class="spinner p-relative m-0" *ngIf="progress === -1">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div *ngIf="!loading" class="file-placeholder p-4">
<div class="flex-row p-4">
<i c8yIcon="file-o" class="m-r-8"></i>
<span title="{{ filesNameString }}" class="text-truncate">
{{ filesNameString }}
</span>
<button title="{{ 'Remove' | translate }}" class="btn btn-clean showOnHover flex-item-right">
<i c8yIcon="minus-circle" class="text-danger" (click)="onDelete()"></i>
</button>
</div>
</div>
</div>
<input
#picker
*ngIf="clickToOpen"
(change)="onPick($event)"
(click)="picker.focus()"
(blur)="onTouched()"
[accept]="acceptedExts"
[multiple]="maxAllowedFiles > 1"
type="file"
style="opacity: 0; filter: alpha(opacity = 0); height: 0px"
/>
<div #area [hidden]="isOver || loading" (dragover)="toggle()">
<ng-content></ng-content>
</div>