@progress/kendo-angular-upload 21.4.1 → 22.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/base.d.ts +1 -1
- package/dropzone-base.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-upload.mjs +89 -89
- package/localization/messages.d.ts +1 -1
- package/package.json +13 -21
- package/rendering/file-list-item-base.d.ts +1 -1
- package/schematics/ngAdd/index.js +3 -3
- package/esm2022/common/action-buttons-layout.mjs +0 -5
- package/esm2022/common/base.mjs +0 -280
- package/esm2022/common/fileselect-settings.mjs +0 -5
- package/esm2022/common/util.mjs +0 -253
- package/esm2022/common/validation-util.mjs +0 -60
- package/esm2022/directives.mjs +0 -89
- package/esm2022/dropzone-base.mjs +0 -69
- package/esm2022/dropzone-external.directive.mjs +0 -111
- package/esm2022/dropzone-internal.directive.mjs +0 -109
- package/esm2022/dropzone.component.mjs +0 -169
- package/esm2022/dropzone.service.mjs +0 -37
- package/esm2022/events/cancel-event.mjs +0 -35
- package/esm2022/events/clear-event.mjs +0 -29
- package/esm2022/events/error-event.mjs +0 -48
- package/esm2022/events/pause-event.mjs +0 -38
- package/esm2022/events/preventable-event.mjs +0 -25
- package/esm2022/events/remove-event.mjs +0 -49
- package/esm2022/events/resume-event.mjs +0 -38
- package/esm2022/events/select-event.mjs +0 -37
- package/esm2022/events/success-event.mjs +0 -49
- package/esm2022/events/upload-event.mjs +0 -49
- package/esm2022/events/upload-progress-event.mjs +0 -41
- package/esm2022/events.mjs +0 -14
- package/esm2022/file-select.directive.mjs +0 -136
- package/esm2022/fileselect.component.mjs +0 -452
- package/esm2022/fileselect.module.mjs +0 -41
- package/esm2022/index.mjs +0 -31
- package/esm2022/localization/custom-messages.component.mjs +0 -70
- package/esm2022/localization/localized-messages.directive.mjs +0 -43
- package/esm2022/localization/messages.mjs +0 -185
- package/esm2022/navigation.service.mjs +0 -151
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-upload.mjs +0 -8
- package/esm2022/rendering/file-list-item-action-button.component.mjs +0 -230
- package/esm2022/rendering/file-list-item-base.mjs +0 -52
- package/esm2022/rendering/file-list-item.mjs +0 -115
- package/esm2022/rendering/file-list-multiple-items.component.mjs +0 -201
- package/esm2022/rendering/file-list-single-item.component.mjs +0 -181
- package/esm2022/rendering/file-list.component.mjs +0 -189
- package/esm2022/rendering/upload-action-buttons.component.mjs +0 -126
- package/esm2022/rendering/upload-status-total.component.mjs +0 -97
- package/esm2022/templates/file-info-template.directive.mjs +0 -39
- package/esm2022/templates/file-template.directive.mjs +0 -39
- package/esm2022/types/async-settings.mjs +0 -5
- package/esm2022/types/chunk-info.mjs +0 -5
- package/esm2022/types/chunk-map.mjs +0 -35
- package/esm2022/types/chunk-metadata.mjs +0 -5
- package/esm2022/types/chunk-settings.mjs +0 -5
- package/esm2022/types/direction.mjs +0 -5
- package/esm2022/types/file-groups.mjs +0 -60
- package/esm2022/types/file-info.mjs +0 -5
- package/esm2022/types/file-map.mjs +0 -144
- package/esm2022/types/file-restrictions.mjs +0 -5
- package/esm2022/types/file-state.mjs +0 -34
- package/esm2022/types/operation-type.mjs +0 -5
- package/esm2022/types.mjs +0 -6
- package/esm2022/upload.component.mjs +0 -901
- package/esm2022/upload.module.mjs +0 -43
- package/esm2022/upload.service.mjs +0 -431
- package/esm2022/uploads.module.mjs +0 -66
package/esm2022/directives.mjs
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { UploadDropZoneDirective } from "./dropzone-external.directive";
|
|
6
|
-
import { UploadDropZoneComponent } from "./dropzone.component";
|
|
7
|
-
import { FileSelectComponent } from "./fileselect.component";
|
|
8
|
-
import { CustomMessagesComponent } from "./localization/custom-messages.component";
|
|
9
|
-
import { UploadActionButtonsComponent } from "./rendering/upload-action-buttons.component";
|
|
10
|
-
import { UploadStatusTotalComponent } from "./rendering/upload-status-total.component";
|
|
11
|
-
import { FileInfoTemplateDirective } from "./templates/file-info-template.directive";
|
|
12
|
-
import { FileTemplateDirective } from "./templates/file-template.directive";
|
|
13
|
-
import { UploadComponent } from "./upload.component";
|
|
14
|
-
/**
|
|
15
|
-
* Use the `KENDO_FILESELECT` utility array to add all FileSelect-related components and directives to a standalone Angular component.
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```typescript
|
|
19
|
-
* import { Component } from '@angular/core';
|
|
20
|
-
* import { KENDO_FILESELECT } from '@progress/kendo-angular-upload';
|
|
21
|
-
*
|
|
22
|
-
* @Component({
|
|
23
|
-
* selector: 'my-app',
|
|
24
|
-
* standalone: true,
|
|
25
|
-
* imports: [KENDO_FILESELECT],
|
|
26
|
-
* template: `<kendo-fileselect></kendo-fileselect>`
|
|
27
|
-
* })
|
|
28
|
-
* export class AppComponent {}
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export const KENDO_FILESELECT = [
|
|
32
|
-
FileSelectComponent,
|
|
33
|
-
FileTemplateDirective,
|
|
34
|
-
FileInfoTemplateDirective,
|
|
35
|
-
CustomMessagesComponent,
|
|
36
|
-
UploadDropZoneDirective,
|
|
37
|
-
UploadDropZoneComponent
|
|
38
|
-
];
|
|
39
|
-
/**
|
|
40
|
-
* Use the `KENDO_UPLOAD` utility array to add all Upload-related components and directives to a standalone Angular component.
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```typescript
|
|
44
|
-
* import { Component } from '@angular/core';
|
|
45
|
-
* import { KENDO_UPLOAD } from '@progress/kendo-angular-upload';
|
|
46
|
-
*
|
|
47
|
-
* @Component({
|
|
48
|
-
* selector: 'my-app',
|
|
49
|
-
* standalone: true,
|
|
50
|
-
* imports: [KENDO_UPLOAD],
|
|
51
|
-
* template: `<kendo-upload></kendo-upload>`
|
|
52
|
-
* })
|
|
53
|
-
* export class AppComponent {}
|
|
54
|
-
* ```
|
|
55
|
-
*/
|
|
56
|
-
export const KENDO_UPLOAD = [
|
|
57
|
-
UploadComponent,
|
|
58
|
-
UploadActionButtonsComponent,
|
|
59
|
-
UploadStatusTotalComponent,
|
|
60
|
-
FileTemplateDirective,
|
|
61
|
-
FileInfoTemplateDirective,
|
|
62
|
-
CustomMessagesComponent,
|
|
63
|
-
UploadDropZoneDirective,
|
|
64
|
-
UploadDropZoneComponent
|
|
65
|
-
];
|
|
66
|
-
/**
|
|
67
|
-
* Use the `KENDO_UPLOADS` utility array to add all `@progress/kendo-angular-upload`-related components and directives to a standalone Angular component.
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```typescript
|
|
71
|
-
* import { Component } from '@angular/core';
|
|
72
|
-
* import { KENDO_UPLOADS } from '@progress/kendo-angular-upload';
|
|
73
|
-
*
|
|
74
|
-
* @Component({
|
|
75
|
-
* selector: 'my-app',
|
|
76
|
-
* standalone: true,
|
|
77
|
-
* imports: [KENDO_UPLOADS],
|
|
78
|
-
* template: `
|
|
79
|
-
* <kendo-upload></kendo-upload>
|
|
80
|
-
* <kendo-fileselect></kendo-fileselect>
|
|
81
|
-
* `
|
|
82
|
-
* })
|
|
83
|
-
* export class AppComponent {}
|
|
84
|
-
* ```
|
|
85
|
-
*/
|
|
86
|
-
export const KENDO_UPLOADS = [
|
|
87
|
-
...KENDO_FILESELECT,
|
|
88
|
-
...KENDO_UPLOAD
|
|
89
|
-
];
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ElementRef, Renderer2, HostListener, Inject, Directive } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* @hidden
|
|
9
|
-
*/
|
|
10
|
-
export class DropZoneBase {
|
|
11
|
-
element;
|
|
12
|
-
renderer;
|
|
13
|
-
hoverClass;
|
|
14
|
-
lastDragElement;
|
|
15
|
-
hideIntervalElement = null;
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
onElementDragEnterListener() {
|
|
20
|
-
this.addClass(this.hoverClass);
|
|
21
|
-
this.lastDragElement = new Date();
|
|
22
|
-
if (!this.hideIntervalElement) {
|
|
23
|
-
this.hideIntervalElement = setInterval(() => {
|
|
24
|
-
if (this.calculateTimeDiff(this.lastDragElement) < 100) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
this.removeClass(this.hoverClass);
|
|
28
|
-
clearInterval(this.hideIntervalElement);
|
|
29
|
-
this.hideIntervalElement = null;
|
|
30
|
-
}, 100);
|
|
31
|
-
}
|
|
32
|
-
return false;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* @hidden
|
|
36
|
-
*/
|
|
37
|
-
onElementDragOverListener() {
|
|
38
|
-
this.lastDragElement = new Date();
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
constructor(element, renderer, cssClass) {
|
|
42
|
-
this.element = element;
|
|
43
|
-
this.renderer = renderer;
|
|
44
|
-
this.hoverClass = cssClass;
|
|
45
|
-
}
|
|
46
|
-
calculateTimeDiff(prevEvent) {
|
|
47
|
-
return new Date().getTime() - prevEvent.getTime();
|
|
48
|
-
}
|
|
49
|
-
addClass(className) {
|
|
50
|
-
this.renderer.addClass(this.element.nativeElement, className);
|
|
51
|
-
}
|
|
52
|
-
removeClass(className) {
|
|
53
|
-
this.renderer.removeClass(this.element.nativeElement, className);
|
|
54
|
-
}
|
|
55
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'hoverClass' }], target: i0.ɵɵFactoryTarget.Directive });
|
|
56
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropZoneBase, host: { listeners: { "dragenter": "onElementDragEnterListener()", "dragover": "onElementDragOverListener()" } }, ngImport: i0 });
|
|
57
|
-
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneBase, decorators: [{
|
|
59
|
-
type: Directive
|
|
60
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
61
|
-
type: Inject,
|
|
62
|
-
args: ['hoverClass']
|
|
63
|
-
}] }], propDecorators: { onElementDragEnterListener: [{
|
|
64
|
-
type: HostListener,
|
|
65
|
-
args: ['dragenter']
|
|
66
|
-
}], onElementDragOverListener: [{
|
|
67
|
-
type: HostListener,
|
|
68
|
-
args: ['dragover']
|
|
69
|
-
}] } });
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, HostListener, Input } from '@angular/core';
|
|
6
|
-
import { assignGuidToFiles, getAllFileInfo, isPresent } from './common/util';
|
|
7
|
-
import { validateFiles } from './common/validation-util';
|
|
8
|
-
import { DropZoneService } from './dropzone.service';
|
|
9
|
-
import { UploadComponent } from './upload.component';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./dropzone.service";
|
|
12
|
-
/**
|
|
13
|
-
* Represents the [Kendo UI UploadDropZone directive for Angular]({% slug overview_upload %}).
|
|
14
|
-
* Use this directive to create external drop zones for Upload and FileSelect components.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```html
|
|
18
|
-
* <div kendoUploadDropZone="upload1">Drop files here</div>
|
|
19
|
-
* <kendo-upload [saveUrl]="uploadSaveUrl" zoneId="upload1"></kendo-upload>
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
export class UploadDropZoneDirective {
|
|
23
|
-
dropZoneService;
|
|
24
|
-
/**
|
|
25
|
-
* The id of the drop zone to associate with an existing Upload component.
|
|
26
|
-
*/
|
|
27
|
-
zoneId;
|
|
28
|
-
/**
|
|
29
|
-
* The id of the drop zone to associate with an existing FileSelect component.
|
|
30
|
-
*/
|
|
31
|
-
fileSelectZoneId;
|
|
32
|
-
constructor(dropZoneService) {
|
|
33
|
-
this.dropZoneService = dropZoneService;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* @hidden
|
|
37
|
-
*/
|
|
38
|
-
onElementDragEnter() {
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* @hidden
|
|
43
|
-
*/
|
|
44
|
-
onElementDragOver() {
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* @hidden
|
|
49
|
-
*/
|
|
50
|
-
onDropListener(event) {
|
|
51
|
-
const components = this.componentInstance;
|
|
52
|
-
if (!isPresent(components)) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
components.forEach((component) => {
|
|
56
|
-
const droppedFiles = event.dataTransfer.files;
|
|
57
|
-
if (droppedFiles.length > 0 && !component.disabled) {
|
|
58
|
-
let files = getAllFileInfo(droppedFiles);
|
|
59
|
-
if (component instanceof UploadComponent) {
|
|
60
|
-
files = assignGuidToFiles(files, !component.batch);
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
files = assignGuidToFiles(files, true);
|
|
64
|
-
}
|
|
65
|
-
if (!component.multiple) {
|
|
66
|
-
files.splice(1, files.length - 1);
|
|
67
|
-
component.clearFiles();
|
|
68
|
-
}
|
|
69
|
-
validateFiles(files, component.restrictions);
|
|
70
|
-
component.addFiles(files);
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
return false;
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* @hidden
|
|
77
|
-
*/
|
|
78
|
-
get componentInstance() {
|
|
79
|
-
const id = this.zoneId || this.fileSelectZoneId;
|
|
80
|
-
return this.dropZoneService.getComponents(id);
|
|
81
|
-
}
|
|
82
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDropZoneDirective, deps: [{ token: i1.DropZoneService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
83
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: UploadDropZoneDirective, isStandalone: true, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: { zoneId: ["kendoUploadDropZone", "zoneId"], fileSelectZoneId: ["kendoFileSelectDropZone", "fileSelectZoneId"] }, host: { listeners: { "dragenter": "onElementDragEnter()", "dragover": "onElementDragOver()", "drop": "onDropListener($event)" } }, providers: [
|
|
84
|
-
DropZoneService
|
|
85
|
-
], ngImport: i0 });
|
|
86
|
-
}
|
|
87
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDropZoneDirective, decorators: [{
|
|
88
|
-
type: Directive,
|
|
89
|
-
args: [{
|
|
90
|
-
providers: [
|
|
91
|
-
DropZoneService
|
|
92
|
-
],
|
|
93
|
-
selector: '[kendoUploadDropZone], [kendoFileSelectDropZone]',
|
|
94
|
-
standalone: true
|
|
95
|
-
}]
|
|
96
|
-
}], ctorParameters: () => [{ type: i1.DropZoneService }], propDecorators: { zoneId: [{
|
|
97
|
-
type: Input,
|
|
98
|
-
args: ['kendoUploadDropZone']
|
|
99
|
-
}], fileSelectZoneId: [{
|
|
100
|
-
type: Input,
|
|
101
|
-
args: ['kendoFileSelectDropZone']
|
|
102
|
-
}], onElementDragEnter: [{
|
|
103
|
-
type: HostListener,
|
|
104
|
-
args: ['dragenter']
|
|
105
|
-
}], onElementDragOver: [{
|
|
106
|
-
type: HostListener,
|
|
107
|
-
args: ['dragover']
|
|
108
|
-
}], onDropListener: [{
|
|
109
|
-
type: HostListener,
|
|
110
|
-
args: ['drop', ['$event']]
|
|
111
|
-
}] } });
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2, NgZone } from '@angular/core';
|
|
6
|
-
import { assignGuidToFiles, getAllFileInfo } from './common/util';
|
|
7
|
-
import { validateFiles } from './common/validation-util';
|
|
8
|
-
import { DropZoneBase } from './dropzone-base';
|
|
9
|
-
import { UploadService } from './upload.service';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./upload.service";
|
|
12
|
-
/**
|
|
13
|
-
* @hidden
|
|
14
|
-
*/
|
|
15
|
-
export class DropZoneInternalDirective extends DropZoneBase {
|
|
16
|
-
ngZone;
|
|
17
|
-
uploadService;
|
|
18
|
-
disabled;
|
|
19
|
-
multiple;
|
|
20
|
-
restrictions;
|
|
21
|
-
initialClassName = true;
|
|
22
|
-
unsubscribeDocumentDragEnter;
|
|
23
|
-
unsubscribeDocumentDragOver;
|
|
24
|
-
lastDragDocument;
|
|
25
|
-
hideIntervalDocument = null;
|
|
26
|
-
activeClass = 'k-dropzone-active';
|
|
27
|
-
constructor(element, renderer, ngZone, uploadService) {
|
|
28
|
-
super(element, renderer, 'k-hover');
|
|
29
|
-
this.ngZone = ngZone;
|
|
30
|
-
this.uploadService = uploadService;
|
|
31
|
-
this.ngZone.runOutsideAngular(() => {
|
|
32
|
-
this.unsubscribeDocumentDragEnter = this.renderer.listen('document', 'dragenter', () => this.onDocumentDragEnter());
|
|
33
|
-
this.unsubscribeDocumentDragOver = this.renderer.listen('document', 'dragover', () => this.onDocumentDragOver());
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
ngOnDestroy() {
|
|
37
|
-
this.ngZone.runOutsideAngular(() => {
|
|
38
|
-
if (this.unsubscribeDocumentDragEnter) {
|
|
39
|
-
this.unsubscribeDocumentDragEnter();
|
|
40
|
-
}
|
|
41
|
-
if (this.unsubscribeDocumentDragOver) {
|
|
42
|
-
this.unsubscribeDocumentDragOver();
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
onDocumentDragEnter() {
|
|
47
|
-
this.addClass(this.activeClass);
|
|
48
|
-
this.lastDragDocument = new Date();
|
|
49
|
-
if (!this.hideIntervalDocument) {
|
|
50
|
-
this.hideIntervalDocument = setInterval(() => {
|
|
51
|
-
if (this.calculateTimeDiff(this.lastDragDocument) < 100) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
this.removeClass(this.activeClass);
|
|
55
|
-
clearInterval(this.hideIntervalDocument);
|
|
56
|
-
this.hideIntervalDocument = null;
|
|
57
|
-
}, 100);
|
|
58
|
-
}
|
|
59
|
-
return false;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* @hidden
|
|
63
|
-
*/
|
|
64
|
-
onDocumentDragOver() {
|
|
65
|
-
this.lastDragDocument = new Date();
|
|
66
|
-
return false;
|
|
67
|
-
}
|
|
68
|
-
onDropListener(event) {
|
|
69
|
-
const droppedFiles = event.dataTransfer.files;
|
|
70
|
-
if (droppedFiles.length > 0 && !this.disabled) {
|
|
71
|
-
let files = getAllFileInfo(droppedFiles);
|
|
72
|
-
files = assignGuidToFiles(files, !this.uploadService.async.batch);
|
|
73
|
-
if (!this.multiple) {
|
|
74
|
-
files.splice(1, files.length - 1);
|
|
75
|
-
this.uploadService.clearFiles();
|
|
76
|
-
}
|
|
77
|
-
validateFiles(files, this.restrictions);
|
|
78
|
-
this.uploadService.addFiles(files);
|
|
79
|
-
}
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneInternalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.UploadService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
83
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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 });
|
|
84
|
-
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneInternalDirective, decorators: [{
|
|
86
|
-
type: Directive,
|
|
87
|
-
args: [{
|
|
88
|
-
selector: `
|
|
89
|
-
[kendoUploadInternalDropZone],
|
|
90
|
-
[kendoFileSelectInternalDropZone]
|
|
91
|
-
`,
|
|
92
|
-
standalone: true
|
|
93
|
-
}]
|
|
94
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.UploadService }], propDecorators: { disabled: [{
|
|
95
|
-
type: Input
|
|
96
|
-
}], multiple: [{
|
|
97
|
-
type: Input
|
|
98
|
-
}], restrictions: [{
|
|
99
|
-
type: Input
|
|
100
|
-
}], initialClassName: [{
|
|
101
|
-
type: HostBinding,
|
|
102
|
-
args: ['class.k-dropzone']
|
|
103
|
-
}, {
|
|
104
|
-
type: HostBinding,
|
|
105
|
-
args: ['class.k-upload-dropzone']
|
|
106
|
-
}], onDropListener: [{
|
|
107
|
-
type: HostListener,
|
|
108
|
-
args: ['drop', ['$event']]
|
|
109
|
-
}] } });
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ElementRef, HostBinding, Input, isDevMode, Renderer2 } from '@angular/core';
|
|
6
|
-
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { DropZoneBase } from './dropzone-base';
|
|
8
|
-
import { uploadIcon } from '@progress/kendo-svg-icons';
|
|
9
|
-
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
10
|
-
import { UploadDropZoneDirective } from './dropzone-external.directive';
|
|
11
|
-
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
|
|
12
|
-
import * as i0 from "@angular/core";
|
|
13
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
14
|
-
/**
|
|
15
|
-
* Represents the [Kendo UI UploadDropZone component for Angular]({% slug overview_upload %}).
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```html
|
|
19
|
-
* <kendo-uploaddropzone zoneId="upload1">
|
|
20
|
-
* Drop files here to upload
|
|
21
|
-
* </kendo-uploaddropzone>
|
|
22
|
-
* <kendo-upload [saveUrl]="uploadSaveUrl" zoneId="upload1"></kendo-upload>
|
|
23
|
-
* ```
|
|
24
|
-
*
|
|
25
|
-
* @remarks
|
|
26
|
-
* Supported children components are: {@link CustomMessagesComponent}
|
|
27
|
-
*/
|
|
28
|
-
export class UploadDropZoneComponent extends DropZoneBase {
|
|
29
|
-
localization;
|
|
30
|
-
hostClass = true;
|
|
31
|
-
get dirAttribute() {
|
|
32
|
-
return this.direction;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Specifies the id of the component.
|
|
36
|
-
* Use this id to associate the DropZone with an existing Upload or FileSelect component.
|
|
37
|
-
*/
|
|
38
|
-
zoneId;
|
|
39
|
-
/**
|
|
40
|
-
* Specifies the name for an existing icon in a Kendo UI theme.
|
|
41
|
-
* The icon renders inside the DropZone.
|
|
42
|
-
*/
|
|
43
|
-
icon;
|
|
44
|
-
/**
|
|
45
|
-
* Specifies a CSS class or multiple classes separated by spaces which apply to a span element.
|
|
46
|
-
* Use this property to apply custom icons.
|
|
47
|
-
*/
|
|
48
|
-
iconClass;
|
|
49
|
-
/**
|
|
50
|
-
* Specifies an SVGIcon to render inside the DropZone.
|
|
51
|
-
* The input accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
|
52
|
-
*/
|
|
53
|
-
set svgIcon(icon) {
|
|
54
|
-
if (isDevMode() && icon && this.icon && this.iconClass) {
|
|
55
|
-
throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
|
|
56
|
-
}
|
|
57
|
-
this._svgIcon = icon;
|
|
58
|
-
}
|
|
59
|
-
get svgIcon() {
|
|
60
|
-
return this._svgIcon;
|
|
61
|
-
}
|
|
62
|
-
direction;
|
|
63
|
-
localizationChangeSubscription;
|
|
64
|
-
_svgIcon = uploadIcon;
|
|
65
|
-
constructor(element, renderer, localization) {
|
|
66
|
-
super(element, renderer, 'k-external-dropzone-hover');
|
|
67
|
-
this.localization = localization;
|
|
68
|
-
this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
69
|
-
this.direction = rtl ? 'rtl' : 'ltr';
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* @hidden
|
|
74
|
-
*/
|
|
75
|
-
textFor(key) {
|
|
76
|
-
return this.localization.get(key);
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* @hidden
|
|
80
|
-
*/
|
|
81
|
-
get iconClasses() {
|
|
82
|
-
if (this.icon) {
|
|
83
|
-
return `${this.icon}`;
|
|
84
|
-
}
|
|
85
|
-
if (!this.icon && !this.iconClass) {
|
|
86
|
-
return 'upload';
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
ngOnDestroy() {
|
|
90
|
-
if (this.localizationChangeSubscription) {
|
|
91
|
-
this.localizationChangeSubscription.unsubscribe();
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
95
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UploadDropZoneComponent, isStandalone: true, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
|
|
96
|
-
LocalizationService,
|
|
97
|
-
{
|
|
98
|
-
provide: L10N_PREFIX,
|
|
99
|
-
useValue: 'kendo.uploaddropzone'
|
|
100
|
-
}
|
|
101
|
-
], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
|
|
102
|
-
<ng-container kendoUploadDropZoneLocalizedMessages
|
|
103
|
-
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
|
|
104
|
-
externalDropFilesHere='Drag and drop files here to upload'>
|
|
105
|
-
</ng-container>
|
|
106
|
-
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
|
|
107
|
-
<kendo-icon-wrapper
|
|
108
|
-
size="xxxlarge"
|
|
109
|
-
innerCssClass="k-dropzone-icon"
|
|
110
|
-
[name]="iconClasses"
|
|
111
|
-
[customFontClass]="iconClass"
|
|
112
|
-
[svgIcon]="svgIcon"
|
|
113
|
-
></kendo-icon-wrapper>
|
|
114
|
-
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
|
|
115
|
-
<span class="k-dropzone-note">
|
|
116
|
-
<ng-content></ng-content>
|
|
117
|
-
</span>
|
|
118
|
-
</div>
|
|
119
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoUploadLocalizedMessages],\n [kendoFileSelectLocalizedMessages],\n [kendoUploadDropZoneLocalizedMessages]\n " }, { kind: "directive", type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone", "kendoFileSelectDropZone"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
120
|
-
}
|
|
121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
|
|
122
|
-
type: Component,
|
|
123
|
-
args: [{
|
|
124
|
-
exportAs: 'kendoUploadDropZone',
|
|
125
|
-
providers: [
|
|
126
|
-
LocalizationService,
|
|
127
|
-
{
|
|
128
|
-
provide: L10N_PREFIX,
|
|
129
|
-
useValue: 'kendo.uploaddropzone'
|
|
130
|
-
}
|
|
131
|
-
],
|
|
132
|
-
selector: 'kendo-uploaddropzone',
|
|
133
|
-
template: `
|
|
134
|
-
<ng-container kendoUploadDropZoneLocalizedMessages
|
|
135
|
-
i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
|
|
136
|
-
externalDropFilesHere='Drag and drop files here to upload'>
|
|
137
|
-
</ng-container>
|
|
138
|
-
<div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
|
|
139
|
-
<kendo-icon-wrapper
|
|
140
|
-
size="xxxlarge"
|
|
141
|
-
innerCssClass="k-dropzone-icon"
|
|
142
|
-
[name]="iconClasses"
|
|
143
|
-
[customFontClass]="iconClass"
|
|
144
|
-
[svgIcon]="svgIcon"
|
|
145
|
-
></kendo-icon-wrapper>
|
|
146
|
-
<span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
|
|
147
|
-
<span class="k-dropzone-note">
|
|
148
|
-
<ng-content></ng-content>
|
|
149
|
-
</span>
|
|
150
|
-
</div>
|
|
151
|
-
`,
|
|
152
|
-
standalone: true,
|
|
153
|
-
imports: [LocalizedMessagesDirective, UploadDropZoneDirective, IconWrapperComponent]
|
|
154
|
-
}]
|
|
155
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
156
|
-
type: HostBinding,
|
|
157
|
-
args: ['class.k-external-dropzone']
|
|
158
|
-
}], dirAttribute: [{
|
|
159
|
-
type: HostBinding,
|
|
160
|
-
args: ['attr.dir']
|
|
161
|
-
}], zoneId: [{
|
|
162
|
-
type: Input
|
|
163
|
-
}], icon: [{
|
|
164
|
-
type: Input
|
|
165
|
-
}], iconClass: [{
|
|
166
|
-
type: Input
|
|
167
|
-
}], svgIcon: [{
|
|
168
|
-
type: Input
|
|
169
|
-
}] } });
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Injectable } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
const components = {};
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
export class DropZoneService {
|
|
12
|
-
addComponent(component, zoneId) {
|
|
13
|
-
if (this.has(zoneId)) {
|
|
14
|
-
components[zoneId].push(component);
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
components[zoneId] = [component];
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
clearComponent(component, zoneId) {
|
|
21
|
-
if (this.has(zoneId)) {
|
|
22
|
-
const componentIdx = components[zoneId].indexOf(component);
|
|
23
|
-
components[zoneId].splice(componentIdx, 1);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
getComponents(zoneId) {
|
|
27
|
-
return components[zoneId];
|
|
28
|
-
}
|
|
29
|
-
has(id) {
|
|
30
|
-
return id in components;
|
|
31
|
-
}
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
33
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneService });
|
|
34
|
-
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneService, decorators: [{
|
|
36
|
-
type: Injectable
|
|
37
|
-
}] });
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Arguments for the `cancel` event. The `cancel` event fires when
|
|
7
|
-
* you cancel the upload of a file or batch of files.
|
|
8
|
-
*
|
|
9
|
-
* ```typescript
|
|
10
|
-
* @Component({
|
|
11
|
-
* template: `
|
|
12
|
-
* <kendo-upload (cancel)="cancelEventHandler($event)"></kendo-upload>
|
|
13
|
-
* `
|
|
14
|
-
* })
|
|
15
|
-
* export class UploadComponent {
|
|
16
|
-
* public cancelEventHandler(e: CancelEvent) {
|
|
17
|
-
* console.log('Canceling file upload', e.files);
|
|
18
|
-
* }
|
|
19
|
-
* }
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
export class CancelEvent {
|
|
23
|
-
/**
|
|
24
|
-
* The files that you canceled during the upload process.
|
|
25
|
-
*/
|
|
26
|
-
files;
|
|
27
|
-
/**
|
|
28
|
-
* @hidden
|
|
29
|
-
* Constructs the event arguments for the `cancel` event.
|
|
30
|
-
* @param files - The list of the files that were going to be uploaded.
|
|
31
|
-
*/
|
|
32
|
-
constructor(files) {
|
|
33
|
-
this.files = files;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { PreventableEvent } from './preventable-event';
|
|
6
|
-
/**
|
|
7
|
-
* Arguments for the `clear` event. The `clear` event fires when
|
|
8
|
-
* the **Clear** button is clicked and selected files are about to be cleared.
|
|
9
|
-
*
|
|
10
|
-
* ```typescript
|
|
11
|
-
* @Component({
|
|
12
|
-
* template: `
|
|
13
|
-
* <kendo-upload (clear)="clearEventHandler($event)"></kendo-upload>
|
|
14
|
-
* `
|
|
15
|
-
* })
|
|
16
|
-
* export class UploadComponent {
|
|
17
|
-
* public clearEventHandler(e: ClearEvent) {
|
|
18
|
-
* console.log('Clearing the file upload');
|
|
19
|
-
* }
|
|
20
|
-
* }
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export class ClearEvent extends PreventableEvent {
|
|
24
|
-
/**
|
|
25
|
-
* @hidden
|
|
26
|
-
* Constructs the event arguments for the `clear` event.
|
|
27
|
-
*/
|
|
28
|
-
constructor() { super(); }
|
|
29
|
-
}
|