core/drop-area/drop-area.component.ts
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>
OnInit
ControlValueAccessor
| providers |
{ provide: NG_VALUE_ACCESSOR, useExisting: DropAreaComponent, multi: true }
|
| selector | c8y-drop-area |
| standalone | true |
| imports |
CommonModule
C8yTranslatePipe
NgIf
NgClass
IconDirective
|
| templateUrl | ./drop-area.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostListeners |
constructor(cd: ChangeDetectorRef, filesService: FilesService, translate: TranslateService, bytes: BytesPipe, ref: ElementRef)
|
||||||||||||||||||
|
Parameters :
|
| accept |
Type : string
|
|
Specifies a filter for what file types the user can pick from the file input dialog box. Specify file types by extensions: Example :Specify file types by extensions and generic types GENERIC_FILE_TYPE: Example :Specify file types by generic types GENERIC_FILE_TYPE: Example : |
| alwaysShow |
Type : boolean
|
Default value : false
|
|
Affects displaying both the drop zone and the list of dropped files. |
| clickToOpen |
Type : boolean
|
Default value : true
|
| files |
Type : FileList
|
| 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
|
| maxFileSizeInMegaBytes |
Type : number
|
| 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')
|
| dropped |
Type : EventEmitter<DroppedFile[]>
|
| keyup |
Arguments : '$event'
|
keyup(event: KeyboardEvent)
|
| ngAfterViewChecked |
ngAfterViewChecked()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onDelete |
onDelete()
|
|
Delete files already dropped files.
Returns :
void
|
| onDrop | ||||
onDrop($event)
|
||||
|
Handle file when it is dropped into drop-area.
Parameters :
Returns :
void
|
| onkeyup | ||||||
onkeyup(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('keyup', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| onOver |
onOver()
|
|
Triggered when file is on over drop area, but not dropped.
Returns :
void
|
| onPick | ||||
onPick($event)
|
||||
|
Triggered when file is dropped.
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| shouldShowFilesList |
shouldShowFilesList()
|
|
Checks condition what should be displayed: drop-area zone or list of dropped files.
Returns :
boolean
|
| showPicker | ||||
showPicker($event?)
|
||||
|
Shows computer browser with files to drop into drop-area zone.
Parameters :
Returns :
void
|
| stopDragging |
stopDragging()
|
|
Triggered when file is picked over web application.
Returns :
void
|
| toggle |
toggle()
|
|
Toggles the style of the drop zone element when a file is dragged over the component.
Returns :
void
|
| writeValue | ||||||
writeValue(value: any)
|
||||||
|
Parameters :
Returns :
void
|
| acceptedExts |
Type : string[]
|
| area |
Type : ElementRef
|
Decorators :
@ViewChild('area', {static: true})
|
| disabled |
Default value : false
|
| errorMessage |
Type : string
|
| errors |
Default value : false
|
| filesNameString |
Type : string
|
| hasDropAreaSmallClass |
Type : boolean
|
| isOver |
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})
|
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:
<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"
[style.pointerEvents]="loading ? 'none' : 'auto'"
[style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
tabindex="0"
*ngIf="!shouldShowFilesList()"
[ngClass]="{ 'has-errors': errors, disabled: formControl?.disabled || disabled }"
#zone
(dragleave)="stopDragging()"
(drop)="onDrop($event)"
(dragover)="onOver()"
(click)="showPicker($event)"
>
<div
class="file-placeholder"
data-cy="c8y-file-placeholder--drop-zone"
[ngClass]="{ 'drag-over': isOver }"
>
<div
class="d-flex d-col p-4 flex-center"
*ngIf="loading"
>
<div
class="progress progress-striped active m-0"
style="min-width: 50%"
*ngIf="progress !== -1"
>
<div
class="progress-bar"
[style.width]="progress + '%'"
[attr.aria-label]="progress + '%'"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
role="progressbar"
></div>
</div>
<div
class="spinner-snake"
*ngIf="progress === -1"
></div>
<p
class="m-t-auto m-b-auto m-r-8"
*ngIf="!hasDropAreaSmallClass"
>
{{ loadingMessage | translate }}
</p>
</div>
<div
class="hint-placeholder pointer"
*ngIf="!loading"
data-cy="drop-zone--hint-placeholder"
>
<i class="dlt-c8y-icon-{{ icon }}"></i>
<p
class="text-truncate"
title="{{ message | translate }}"
*ngIf="!errors"
>
<b>{{ message | translate }}</b>
<br />
<span
*ngIf="alwaysShow && clickToOpen"
translate
></span>
</p>
<div
class="has-errors"
*ngIf="errors"
>
<p class="form-control-feedback-message">
{{ errorMessage | translate }}
</p>
</div>
</div>
</div>
</div>
<div
class="drop-zone"
[style.display]="isOver || alwaysShow || loading ? 'block' : 'none'"
tabindex="0"
*ngIf="shouldShowFilesList()"
>
<div
class="p-absolute p-4 fit-w fit-h d-flex d-col j-c-center a-i-center"
*ngIf="loading"
>
<div
class="progress progress-striped active m-0"
style="min-width: 80%"
*ngIf="progress !== -1"
>
<div
class="progress-bar"
[style.width]="progress + '%'"
[attr.aria-label]="progress + '%'"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
role="progressbar"
></div>
</div>
<div *ngIf="progress === -1">
<c8y-loading></c8y-loading>
</div>
<p
class="m-b-8"
*ngIf="!hasDropAreaSmallClass"
>
<strong>
{{ loadingMessage | translate }}
</strong>
</p>
</div>
<div
class="file-placeholder p-4"
*ngIf="!loading"
>
<div class="d-flex p-4 a-i-center">
<i
class="icon-20 m-r-8"
c8yIcon="file-o"
></i>
<span
class="text-truncate"
title="{{ filesNameString }}"
>
{{ filesNameString }}
</span>
<button
class="btn btn-dot btn-dot--danger showOnHover m-l-auto"
title="{{ 'Remove' | translate }}"
[attr.aria-label]="'Remove' | translate"
type="button"
>
<i
c8yIcon="minus-circle"
(click)="onDelete()"
></i>
</button>
</div>
</div>
</div>
<label
class="sr-only"
for="file"
>
{{ 'Select file' | translate }}
</label>
<input
class="hidden"
id="file"
type="file"
#picker
*ngIf="clickToOpen"
(change)="onPick($event)"
(click)="picker.focus()"
(blur)="onTouched()"
[accept]="acceptedExts"
[multiple]="maxAllowedFiles > 1"
[disabled]="formControl?.disabled || disabled"
/>
<div
#area
[hidden]="isOver || loading"
(dragover)="toggle()"
>
<ng-content></ng-content>
</div>