@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
202 lines (201 loc) • 9.69 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 { Input, Component } from '@angular/core';
import { FileState } from '../types';
import { FileListItemBase } from './file-list-item-base';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { UploadService } from '../upload.service';
import { isPresent } from '../common/util';
import { FileInfoTemplateDirective } from '../templates/file-info-template.directive';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { copyIcon } from '@progress/kendo-svg-icons';
import { FileListItemActionButtonComponent } from './file-list-item-action-button.component';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "../upload.service";
/**
* @hidden
*/
export class FileListMultipleItemsComponent extends FileListItemBase {
localization;
disabled;
files;
fileInfoTemplate;
filesHaveErrors;
copySVGIcon = copyIcon;
constructor(localization, uploadService) {
super(uploadService);
this.localization = localization;
this.subscribeUploadProgress((args) => {
if (args.files[0].uid === this.files[0].uid) {
this.progressComplete = args.percentComplete;
}
});
}
get showProgress() {
const showProgress = this.files[0].state === FileState.Uploading || this.files[0].state === FileState.Paused;
return showProgress ? 'active' : 'inactive';
}
ngOnInit() {
this.filesHaveErrors = super.filesHaveValidationErrors(this.files);
}
fileStatusText(file) {
const errors = file.validationErrors;
if (!isPresent(errors)) {
return this.getTotalFilesSizeMessage([file]);
}
return this.getFileValidationMessage(file);
}
get batchStatusText() {
const state = this.files[0].state;
const fileCount = this.files.length;
if (state === FileState.Uploaded) {
return `${fileCount} ${this.textFor('filesBatchStatusUploaded')}`;
}
if (state === FileState.Failed) {
return `${fileCount} ${this.textFor('filesBatchStatusFailed')}`;
}
return `${fileCount} ${this.textFor('filesBatchStatus')}`;
}
get isUploadSuccessful() {
return this.files[0].state === FileState.Uploaded;
}
get isUploadFailed() {
return this.files[0].state === FileState.Failed;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListMultipleItemsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.UploadService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FileListMultipleItemsComponent, isStandalone: true, selector: "kendo-upload-file-list-multiple-items", inputs: { disabled: "disabled", files: "files", fileInfoTemplate: "fileInfoTemplate" }, usesInheritance: true, ngImport: i0, template: `
<kendo-progressbar
[@progressState]="showProgress"
[value]="progressComplete"
[label]="{ visible: false }"
>
</kendo-progressbar>
<span class="k-file-icon-wrapper">
<kendo-icon-wrapper
name="copy"
size="xxlarge"
[svgIcon]="copySVGIcon"
innerCssClass="k-file-icon"
>
</kendo-icon-wrapper>
</span>
<span class="k-multiple-files-wrapper">
@if (!fileInfoTemplate) {
@for (file of files; track file) {
<span class="k-file-info">
<span [title]="file.name" class="k-file-name">
{{file.name}}
</span>
<span [attr.aria-live]="'polite'" [ngClass]="{
'k-file-validation-message': file.validationErrors,
'k-file-size': !file.validationErrors
}"
>{{fileStatusText(file)}}</span>
</span>
}
<span class="k-file-summary"
>{{batchStatusText}}</span>
}
@if (fileInfoTemplate) {
<ng-container
[ngTemplateOutlet]="fileInfoTemplate.templateRef"
[ngTemplateOutletContext]="{
templateRef: fileInfoTemplate.templateRef,
state: files[0].state,
$implicit: files
}"></ng-container>
}
</span>
<kendo-upload-file-list-item-action-button
[file]='files[0]'
[disabled]='disabled'
[progress]='progressComplete'>
</kendo-upload-file-list-item-action-button>
`, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], animations: [
trigger('progressState', [
state('active', style({ opacity: 1 })),
state('inactive', style({ opacity: 0 })),
transition('void => active', style({ opacity: 0 })),
transition('inactive => active', style({ opacity: 1 })),
transition('active => inactive', animate('1s 2s ease-out'))
])
] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListMultipleItemsComponent, decorators: [{
type: Component,
args: [{
animations: [
trigger('progressState', [
state('active', style({ opacity: 1 })),
state('inactive', style({ opacity: 0 })),
transition('void => active', style({ opacity: 0 })),
transition('inactive => active', style({ opacity: 1 })),
transition('active => inactive', animate('1s 2s ease-out'))
])
],
selector: 'kendo-upload-file-list-multiple-items',
template: `
<kendo-progressbar
[@progressState]="showProgress"
[value]="progressComplete"
[label]="{ visible: false }"
>
</kendo-progressbar>
<span class="k-file-icon-wrapper">
<kendo-icon-wrapper
name="copy"
size="xxlarge"
[svgIcon]="copySVGIcon"
innerCssClass="k-file-icon"
>
</kendo-icon-wrapper>
</span>
<span class="k-multiple-files-wrapper">
@if (!fileInfoTemplate) {
@for (file of files; track file) {
<span class="k-file-info">
<span [title]="file.name" class="k-file-name">
{{file.name}}
</span>
<span [attr.aria-live]="'polite'" [ngClass]="{
'k-file-validation-message': file.validationErrors,
'k-file-size': !file.validationErrors
}"
>{{fileStatusText(file)}}</span>
</span>
}
<span class="k-file-summary"
>{{batchStatusText}}</span>
}
@if (fileInfoTemplate) {
<ng-container
[ngTemplateOutlet]="fileInfoTemplate.templateRef"
[ngTemplateOutletContext]="{
templateRef: fileInfoTemplate.templateRef,
state: files[0].state,
$implicit: files
}"></ng-container>
}
</span>
<kendo-upload-file-list-item-action-button
[file]='files[0]'
[disabled]='disabled'
[progress]='progressComplete'>
</kendo-upload-file-list-item-action-button>
`,
standalone: true,
imports: [ProgressBarComponent, IconWrapperComponent, NgClass, NgTemplateOutlet, FileListItemActionButtonComponent]
}]
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.UploadService }], propDecorators: { disabled: [{
type: Input
}], files: [{
type: Input
}], fileInfoTemplate: [{
type: Input
}] } });