@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
110 lines (109 loc) • 5.04 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2, NgZone } from '@angular/core';
import { assignGuidToFiles, getAllFileInfo } from './common/util';
import { validateFiles } from './common/validation-util';
import { DropZoneBase } from './dropzone-base';
import { UploadService } from './upload.service';
import * as i0 from "@angular/core";
import * as i1 from "./upload.service";
/**
* @hidden
*/
export class DropZoneInternalDirective extends DropZoneBase {
ngZone;
uploadService;
disabled;
multiple;
restrictions;
initialClassName = true;
unsubscribeDocumentDragEnter;
unsubscribeDocumentDragOver;
lastDragDocument;
hideIntervalDocument = null;
activeClass = 'k-dropzone-active';
constructor(element, renderer, ngZone, uploadService) {
super(element, renderer, 'k-hover');
this.ngZone = ngZone;
this.uploadService = uploadService;
this.ngZone.runOutsideAngular(() => {
this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
});
}
ngOnDestroy() {
this.ngZone.runOutsideAngular(() => {
if (this.unsubscribeDocumentDragEnter) {
this.unsubscribeDocumentDragEnter();
}
if (this.unsubscribeDocumentDragOver) {
this.unsubscribeDocumentDragOver();
}
});
}
onDocumentDragEnter() {
this.addClass(this.activeClass);
this.lastDragDocument = new Date();
if (!this.hideIntervalDocument) {
this.hideIntervalDocument = setInterval(() => {
if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
return;
}
this.removeClass(this.activeClass);
clearInterval(this.hideIntervalDocument);
this.hideIntervalDocument = null;
}, 100);
}
return false;
}
/**
* @hidden
*/
onDocumentDragOver() {
this.lastDragDocument = new Date();
return false;
}
onDropListener(event) {
const droppedFiles = event.dataTransfer.files;
if (droppedFiles.length > 0 && !this.disabled) {
let files = getAllFileInfo(droppedFiles);
files = assignGuidToFiles(files, !this.uploadService.async.batch);
if (!this.multiple) {
files.splice(1, files.length - 1);
this.uploadService.clearFiles();
}
validateFiles(files, this.restrictions);
this.uploadService.addFiles(files);
}
return false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropZoneInternalDirective, isStandalone: true, selector: "\n [kendoUploadInternalDropZone],\n [kendoFileSelectInternalDropZone]\n ", inputs: { disabled: "disabled", multiple: "multiple", restrictions: "restrictions" }, host: { listeners: { "drop": "onDropListener($event)" }, properties: { "class.k-dropzone": "this.initialClassName", "class.k-upload-dropzone": "this.initialClassName" } }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
type: Directive,
args: [{
selector: `
[kendoUploadInternalDropZone],
[kendoFileSelectInternalDropZone]
`,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.UploadService }]; }, propDecorators: { disabled: [{
type: Input
}], multiple: [{
type: Input
}], restrictions: [{
type: Input
}], initialClassName: [{
type: HostBinding,
args: ['class.k-dropzone']
}, {
type: HostBinding,
args: ['class.k-upload-dropzone']
}], onDropListener: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });