@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
180 lines (179 loc) • 9.31 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @angular-eslint/component-selector */
import { Input, Component, ViewChildren, QueryList, HostBinding } from '@angular/core';
import { Keys } from '@progress/kendo-angular-common';
import { FileState } from '../types';
import { FileTemplateDirective } from '../templates/file-template.directive';
import { FileListItemDirective } from './file-list-item';
import { NavigationService } from '../navigation.service';
import { UploadService } from '../upload.service';
import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
import { FileListMultipleItemsComponent } from './file-list-multiple-items.component';
import { FileListSingleItemComponent } from './file-list-single-item.component';
import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../upload.service";
import * as i2 from "../navigation.service";
/**
* @hidden
*/
export class FileListComponent {
uploadService;
navigation;
disabled;
fileList;
fileTemplate;
fileInfoTemplate;
fileListItems;
fileListRole = 'list';
focusSubscription;
actionSubscription;
constructor(uploadService, navigation) {
this.uploadService = uploadService;
this.navigation = navigation;
this.onItemFocus();
this.onItemAction();
}
onItemFocus() {
this.focusSubscription = this.navigation.onFileFocus.subscribe((index) => {
this.fileListItems.toArray()[index].focus();
});
}
onItemAction() {
this.actionSubscription = this.navigation.onFileAction.subscribe((key) => {
this.itemActionHandler(key);
});
}
itemActionHandler(key) {
const index = this.navigation.focusedIndex;
const filesArray = this.fileListItems.toArray();
const numberOfFiles = filesArray.length;
const item = filesArray[index];
const uid = item.uidAttribute;
const files = this.uploadService.files.get(uid);
if (key === Keys.Escape && files[0].state === FileState.Uploading) {
this.uploadService.cancelFiles(uid);
this.navigation.focusSelectButton();
return;
}
if (key === Keys.Enter && files[0].state === FileState.Failed) {
this.uploadService.retryFiles(uid);
return;
}
if (key === Keys.Delete) {
if (files[0].state === FileState.Uploading) {
this.uploadService.cancelFiles(uid);
}
else if (this.hasDelete(item)) {
this.uploadService.removeFiles(uid);
}
if (index < numberOfFiles - 1) {
filesArray[index + 1].focus();
}
else if (numberOfFiles === 1) {
this.navigation.focusSelectButton();
}
else if (index === numberOfFiles - 1) {
this.navigation.focusedIndex = this.navigation.focusedFileIndex = index - 1;
filesArray[index - 1].focus();
}
}
const isUploadChunk = this.uploadService.async.chunk;
const canTogglePauseResume = key === Keys.Space && files[0].state !== FileState.Uploaded;
if (canTogglePauseResume && isUploadChunk) {
if (files[0].state === FileState.Paused) {
this.uploadService.resumeFile(uid);
}
else {
this.uploadService.pauseFile(uid);
}
}
}
hasDelete(item) {
return item.element.nativeElement.getElementsByClassName('k-svg-i-x').length > 0;
}
ngOnDestroy() {
this.focusSubscription.unsubscribe();
this.actionSubscription.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListComponent, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileListComponent, isStandalone: true, selector: "[kendo-upload-file-list]", inputs: { disabled: "disabled", fileList: "fileList", fileTemplate: "fileTemplate", fileInfoTemplate: "fileInfoTemplate" }, host: { properties: { "attr.role": "this.fileListRole" } }, viewQueries: [{ propertyName: "fileListItems", predicate: FileListItemDirective, descendants: true }], ngImport: i0, template: `
<ng-template ngFor
[ngForOf]="fileList"
let-files
let-index="index">
<li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
<kendo-upload-file-list-single-item
class='k-file-single'
*ngIf='files.length === 1 && !fileTemplate'
[disabled]='disabled'
[file]='files[0]'
[fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-single-item>
<kendo-upload-file-list-multiple-items
class='k-file-multiple'
*ngIf='files.length > 1 && !fileTemplate'
[disabled]='disabled'
[files]='files'
[fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-multiple-items>
<ng-container
*ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
templateRef: fileTemplate.templateRef,
state: files[0].state,
$implicit: files
}"></ng-container>
</li>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { kind: "component", type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileListComponent, decorators: [{
type: Component,
args: [{
selector: '[kendo-upload-file-list]',
template: `
<ng-template ngFor
[ngForOf]="fileList"
let-files
let-index="index">
<li kendoUploadFileListItem [files]='files' [index]='index' role="listitem">
<kendo-upload-file-list-single-item
class='k-file-single'
*ngIf='files.length === 1 && !fileTemplate'
[disabled]='disabled'
[file]='files[0]'
[fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-single-item>
<kendo-upload-file-list-multiple-items
class='k-file-multiple'
*ngIf='files.length > 1 && !fileTemplate'
[disabled]='disabled'
[files]='files'
[fileInfoTemplate]="fileInfoTemplate"></kendo-upload-file-list-multiple-items>
<ng-container
*ngIf="fileTemplate" [ngTemplateOutlet]="fileTemplate.templateRef" [ngTemplateOutletContext]="{
templateRef: fileTemplate.templateRef,
state: files[0].state,
$implicit: files
}"></ng-container>
</li>
</ng-template>
`,
standalone: true,
imports: [NgFor, FileListItemDirective, NgIf, FileListSingleItemComponent, FileListMultipleItemsComponent, NgTemplateOutlet]
}]
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }]; }, propDecorators: { disabled: [{
type: Input
}], fileList: [{
type: Input
}], fileTemplate: [{
type: Input
}], fileInfoTemplate: [{
type: Input
}], fileListItems: [{
type: ViewChildren,
args: [FileListItemDirective]
}], fileListRole: [{
type: HostBinding,
args: ['attr.role']
}] } });