@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
893 lines (854 loc) • 36.1 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 @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { HttpHeaders } from '@angular/common/http';
import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, isDevMode, ChangeDetectorRef, Injector } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { isDocumentAvailable, KendoInput, Keys, isChanged } from '@progress/kendo-angular-common';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { fromEvent, merge } from 'rxjs';
import { filter } from 'rxjs/operators';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from './package-metadata';
import { FileState } from './types';
import { NavigationService } from './navigation.service';
import { UploadService } from './upload.service';
import { hasClasses, IGNORE_TARGET_CLASSES, isFocusable, UPLOAD_CLASSES, validateInitialFileInfo } from './common/util';
import { DropZoneService } from './dropzone.service';
import { UploadFileSelectBase } from './common/base';
import { UploadActionButtonsComponent } from './rendering/upload-action-buttons.component';
import { FileListComponent } from './rendering/file-list.component';
import { UploadStatusTotalComponent } from './rendering/upload-status-total.component';
import { NgIf } from '@angular/common';
import { FileSelectDirective } from './file-select.directive';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { DropZoneInternalDirective } from './dropzone-internal.directive';
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "./upload.service";
import * as i2 from "@progress/kendo-angular-l10n";
import * as i3 from "./navigation.service";
import * as i4 from "./dropzone.service";
/**
* @hidden
*/
export const UPLOAD_VALUE_ACCESSOR = {
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => UploadComponent)
};
let idx = 0;
/**
* Represents the [Kendo UI Upload component for Angular]({% slug overview_upload %}).
*
* @example
* ```html
* <kendo-upload
* [saveUrl]="uploadSaveUrl"
* [removeUrl]="uploadRemoveUrl">
* </kendo-upload>
* ```
*
* @remarks
* Supported children components are: {@link CustomMessagesComponent}
*/
export class UploadComponent extends UploadFileSelectBase {
uploadService;
localization;
navigation;
dropZoneService;
zone;
renderer;
cdr;
injector;
/**
* Specifies whether selected files upload automatically
* ([see example]({% slug fileprocessing_upload %}#toc-automatic-upload-of-files)).
* Set `autoUpload` to `false` to change this behavior.
*
* @default true
*/
set autoUpload(autoUpload) {
this.uploadService.async.autoUpload = autoUpload;
}
get autoUpload() {
return this.uploadService.async.autoUpload;
}
/**
* Specifies whether all files in the selection upload in a single request
* ([see example]({% slug fileprocessing_upload %}#toc-upload-of-batches-of-files)).
* Files selected one after the other upload in separate requests.
*
* @default false
*/
set batch(batch) {
this.uploadService.async.batch = batch;
}
get batch() {
return this.uploadService.async.batch;
}
/**
* Specifies whether credentials (cookies, headers) are sent for cross-site requests
* ([see example]({% slug credentials_upload %}#toc-attaching-credentials-to-requests)).
* Set `withCredentials` has no effect on same-site requests.
* Use the `saveHeaders` or `removeHeaders` property to add credentials to the request.
* You can also use the [`upload`]({% slug api_upload_uploadevent %}) event.
*
* @default true
*/
set withCredentials(withCredentials) {
this.uploadService.async.withCredentials = withCredentials;
}
get withCredentials() {
return this.uploadService.async.withCredentials;
}
/**
* Specifies the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key which contains the files submitted to `saveUrl`.
*
*/
set saveField(saveField) {
this.uploadService.async.saveField = saveField;
}
get saveField() {
return this.uploadService.async.saveField;
}
/**
* Specifies the [`HttpHeaders`](https://angular.io/api/common/http/HttpHeaders) attached to each upload request.
*/
set saveHeaders(saveHeaders) {
this.uploadService.async.saveHeaders = saveHeaders;
}
get saveHeaders() {
return this.uploadService.async.saveHeaders;
}
/**
* Specifies the [`RequestMethod`](https://angular.io/api/http/RequestMethod) of the upload request.
*
*/
set saveMethod(saveMethod) {
this.uploadService.async.saveMethod = saveMethod;
}
get saveMethod() {
return this.uploadService.async.saveMethod;
}
/**
* Specifies the URL of the endpoint for the upload request.
* The request [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key uses the name from the `saveField` property.
* This key contains the list of files to be uploaded.
*/
set saveUrl(saveUrl) {
this.uploadService.async.saveUrl = saveUrl;
}
get saveUrl() {
return this.uploadService.async.saveUrl;
}
/**
* Specifies the expected [`response type`](https://angular.io/api/common/http/HttpRequest#responseType) of the server.
* The response type determines how the response is parsed.
*
* @default 'json'
*/
set responseType(responseType) {
this.uploadService.async.responseType = responseType;
}
get responseType() {
return this.uploadService.async.responseType;
}
/**
* Specifies the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) key which contains the list of file names submitted to `removeUrl`.
*
*/
set removeField(removeField) { this.uploadService.async.removeField = removeField; }
get removeField() { return this.uploadService.async.removeField; }
/**
* Specifies the [`HttpHeaders`](https://angular.io/api/common/http/HttpHeaders) attached to each `remove` request.
*/
set removeHeaders(removeHeaders) {
this.uploadService.async.removeHeaders = removeHeaders;
}
get removeHeaders() {
return this.uploadService.async.removeHeaders;
}
/**
* Specifies the [`RequestMethod`](https://angular.io/api/http/RequestMethod) of the `remove` request.
*
*/
set removeMethod(removeMethod) {
this.uploadService.async.removeMethod = removeMethod;
}
get removeMethod() {
return this.uploadService.async.removeMethod;
}
/**
* Specifies the URL of the endpoint for the `remove` request.
* The [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) request key uses the name from the `removeField` property.
* This key contains the list of file names to be removed.
*/
set removeUrl(removeUrl) {
this.uploadService.async.removeUrl = removeUrl;
}
get removeUrl() {
return this.uploadService.async.removeUrl;
}
/**
* Specifies whether the chunk functionality of the Upload is enabled.
*
* @default false
*/
chunkable = false;
/**
* Specifies whether selected files upload simultaneously or one by one.
*
* @default true
*/
set concurrent(concurrent) {
this.uploadService.async.concurrent = concurrent;
}
get concurrent() {
return this.uploadService.async.concurrent;
}
/**
* Specifies whether the file list is visible.
*
* @default true
*/
showFileList = true;
/**
* @hidden
*/
set tabIndex(tabIndex) {
this.tabindex = tabIndex;
}
get tabIndex() {
return this.tabindex;
}
/**
* Specifies the layout of the action buttons.
*
* @default 'end'
*/
actionsLayout = 'end';
fileSelectInput;
/**
* Fires when the upload is canceled while in progress.
*/
cancel = new EventEmitter();
/**
* Fires when the file list is about to be cleared.
* Prevent this event to keep the files in the list.
*/
clear = new EventEmitter();
/**
* Fires when all active uploads complete successfully or with errors.
*/
complete = new EventEmitter();
/**
* Fires when an `upload` or `remove` operation fails.
*/
error = new EventEmitter();
/**
* Fires when the upload of a file is paused.
*/
pause = new EventEmitter();
/**
* Fires when the upload of a file is resumed.
*/
resume = new EventEmitter();
/**
* Fires when an `upload` or `remove` operation completes successfully.
*/
success = new EventEmitter();
/**
* Fires when one or more files are about to be uploaded.
* Prevent this event to stop the files from uploading and being added to the file list.
*/
upload = new EventEmitter();
/**
* Fires when one or more files are uploading.
*/
uploadProgress = new EventEmitter();
/**
* Fires when the component value changes after a successful `upload`, `remove`, or `clear` operation.
*/
valueChange = new EventEmitter();
get dir() {
return this.direction;
}
direction;
wrapper;
fileListId;
documentClick; // eslint-disable-line @typescript-eslint/ban-types
blurSubscription;
wrapperFocusSubscription;
selectButtonFocusSubscription;
localizationChangeSubscription;
subs;
constructor(uploadService, localization, navigation, dropZoneService, zone, renderer, cdr, wrapper, injector) {
super(uploadService, navigation, cdr, injector, zone);
this.uploadService = uploadService;
this.localization = localization;
this.navigation = navigation;
this.dropZoneService = dropZoneService;
this.zone = zone;
this.renderer = renderer;
this.cdr = cdr;
this.injector = injector;
validatePackage(packageMetadata);
this.fileList = this.uploadService.files;
this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
});
this.direction = localization.rtl ? 'rtl' : 'ltr';
this.navigation.computeKeys();
this.wrapper = wrapper.nativeElement;
this.subscribeBlur();
this.subscribeFocus();
this.attachEventHandlers();
}
ngOnInit() {
this.verifySettings();
const { buttonId, fileListId } = this.getIds();
this.focusableId = buttonId;
this.fileListId = fileListId;
this.uploadService.setChunkSettings(this.chunkable);
if (this.zoneId) {
this.dropZoneService.addComponent(this, this.zoneId);
}
this.zone.runOutsideAngular(() => {
this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
});
}
ngOnChanges(changes) {
if (isChanged("chunkable", changes)) {
const newChunkable = changes.chunkable.currentValue;
if (typeof newChunkable === 'boolean') {
this.uploadService.async.chunk = newChunkable;
}
if (typeof newChunkable === "object" && newChunkable !== null) {
this.uploadService.async.chunk = true;
this.uploadService.chunk = Object.assign({}, this.uploadService.chunk, newChunkable);
}
}
}
ngOnDestroy() {
this.fileList.clear();
if (this.zoneId) {
this.dropZoneService.clearComponent(this, this.zoneId);
}
if (this.blurSubscription) {
this.blurSubscription.unsubscribe();
}
if (this.wrapperFocusSubscription) {
this.wrapperFocusSubscription.unsubscribe();
}
if (this.selectButtonFocusSubscription) {
this.selectButtonFocusSubscription.unsubscribe();
}
if (this.localizationChangeSubscription) {
this.localizationChangeSubscription.unsubscribe();
}
if (this.subs) {
this.subs.unsubscribe();
}
}
/**
* @hidden
*/
writeValue(newValue) {
super.writeValue(newValue, validateInitialFileInfo, 'addInitialFiles');
}
/**
* @hidden
*/
get showActionButtons() {
let areVisible = false;
if (!this.autoUpload) {
const hasFilesToUpload = this.fileList.filesToUpload.length > 0;
const uploadingFiles = this.fileList.hasFileWithState([FileState.Uploading]);
if (this.concurrent && hasFilesToUpload) {
areVisible = true;
}
if (!this.concurrent && hasFilesToUpload && !uploadingFiles) {
areVisible = true;
}
}
this.navigation.actionButtonsVisible = areVisible;
return areVisible;
}
/**
* @hidden
*/
get showTotalStatus() {
const states = [
FileState.Uploaded,
FileState.Uploading,
FileState.Failed,
FileState.Paused
];
if (this.fileList.hasFileWithState(states)) {
return true;
}
return false;
}
/**
* @hidden
*/
textFor(key) {
return this.localization.get(key);
}
/**
* @hidden
*/
getIds() {
const id = ++idx;
const buttonId = `k-upload-button-${id}`;
const fileListId = `k-upload-file-list-${id}`;
return { buttonId, fileListId };
}
/**
* Pauses the upload process of a file that is currently uploading.
* This method requires the `chunkable` option of the Upload to be enabled.
*
* @param uid The `uid` of the file that will be paused.
*/
pauseFileByUid(uid) {
this.uploadService.pauseFile(uid);
}
/**
* Resumes the upload process for a file that was previously paused.
* This method requires the `chunkable` option of the Upload to be enabled.
*
* @param uid The `uid` of the file that will be resumed.
*/
resumeFileByUid(uid) {
this.uploadService.resumeFile(uid);
}
/**
* Removes a file or a batch of files.
*
* @param uid The `uid` of the file or a batch of files that will be removed.
*/
removeFilesByUid(uid) {
this.uploadService.removeFiles(uid);
}
/**
* Retries the upload of a file or batch of files that failed to upload.
*
* @param uid The `uid` of the file or a batch of files to be retried.
*/
retryUploadByUid(uid) {
this.uploadService.retryFiles(uid);
}
/**
* Cancels the upload of a file or a batch of files.
*
* @param uid The `uid` of the file or a batch of files that will be canceled.
*/
cancelUploadByUid(uid) {
this.uploadService.cancelFiles(uid);
}
/**
* Uploads the currently selected files that pass the set restrictions.
*/
uploadFiles() {
if (this.fileList.filesToUpload.length) {
this.uploadService.uploadFiles();
}
}
/**
* Clears all files from the UI without sending requests to the remove handler.
*/
clearFiles() {
this.uploadService.clearFiles();
}
/**
* @hidden
* Used by the external dropzone to add files to the Upload
*/
addFiles(files) {
this.uploadService.addFiles(files);
}
/**
* @hidden
* Used to determine if the component is empty.
*/
isEmpty() {
return false;
}
verifySettings() {
if (isDevMode()) {
if (this.batch && this.chunkable !== false) {
throw new Error('The file chunking functionality requires the batch setting to be disabled.');
}
}
}
subscribeBlur() {
if (!isDocumentAvailable()) {
return;
}
this.zone.runOutsideAngular(() => {
this.documentClick = fromEvent(document, 'click').pipe(filter((event) => {
return !(this.wrapper !== event.target && this.wrapper.contains(event.target));
}));
this.blurSubscription = merge(this.documentClick, this.navigation.onTabOut).subscribe(() => {
if (this.navigation.focused) {
this.zone.run(() => {
this.navigation.focused = false;
this.onTouchedCallback();
this.onBlur.emit();
});
}
});
});
}
handleKeydown(event) {
if (this.disabled) {
return;
}
if (event.target === this.fileSelectButton.nativeElement && (event.keyCode === Keys.Enter || event.keyCode === Keys.Space)) {
event.preventDefault();
this.fileSelectInput.nativeElement.click();
return;
}
if (hasClasses(event.target, UPLOAD_CLASSES) ||
(!isFocusable(event.target) && !hasClasses(event.target, IGNORE_TARGET_CLASSES))) {
this.navigation.process(event);
}
}
subscribeFocus() {
this.wrapperFocusSubscription = this.navigation.onWrapperFocus.subscribe(() => {
this.onFocus.emit();
});
this.selectButtonFocusSubscription = this.navigation.onSelectButtonFocus.subscribe(() => {
this.fileSelectButton.nativeElement.focus();
});
}
attachEventHandlers() {
this.subs = this.uploadService.cancelEvent.subscribe((args) => {
this.cancel.emit(args);
});
this.subs.add(this.uploadService.changeEvent.subscribe((files) => {
this.onChangeCallback(files);
this.valueChange.emit(files);
}));
this.subs.add(this.uploadService.clearEvent.subscribe((args) => {
this.clear.emit(args);
}));
this.subs.add(this.uploadService.completeEvent.subscribe(() => {
this.complete.emit();
}));
this.subs.add(this.uploadService.errorEvent.subscribe((args) => {
this.error.emit(args);
}));
this.subs.add(this.uploadService.pauseEvent.subscribe((args) => {
this.pause.emit(args);
}));
this.subs.add(this.uploadService.removeEvent.subscribe((args) => {
this.remove.emit(args);
}));
this.subs.add(this.uploadService.resumeEvent.subscribe((args) => {
this.resume.emit(args);
}));
this.subs.add(this.uploadService.selectEvent.subscribe((args) => {
this.select.emit(args);
}));
this.subs.add(this.uploadService.successEvent.subscribe((args) => {
this.success.emit(args);
}));
this.subs.add(this.uploadService.uploadEvent.subscribe((args) => {
this.upload.emit(args);
}));
this.subs.add(this.uploadService.uploadProgressEvent.subscribe((args) => {
this.uploadProgress.emit(args);
}));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadComponent, isStandalone: true, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", showFileList: "showFileList", tabIndex: "tabIndex", actionsLayout: "actionsLayout" }, outputs: { cancel: "cancel", clear: "clear", complete: "complete", error: "error", pause: "pause", resume: "resume", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.dir" } }, providers: [
LocalizationService,
NavigationService,
UploadService,
DropZoneService,
UPLOAD_VALUE_ACCESSOR,
{
provide: L10N_PREFIX,
useValue: 'kendo.upload'
},
{
provide: KendoInput,
useExisting: forwardRef(() => UploadComponent)
}
], viewQueries: [{ propertyName: "fileSelectInput", first: true, predicate: ["fileSelectInput"], descendants: true, static: true }], exportAs: ["kendoUpload"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<ng-container kendoUploadLocalizedMessages
i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
cancel="Cancel"
i18n-clearSelectedFiles="kendo.upload.clearSelectedFiles|The text for the Clear button"
clearSelectedFiles="Clear"
i18n-dropFilesHere="kendo.upload.dropFilesHere|The drop zone hint"
dropFilesHere="Drop files here to upload"
i18n-filesBatchStatus="kendo.upload.filesBatchStatus|The status message for a batch of files"
filesBatchStatus="files"
i18n-filesBatchStatusFailed="kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload"
filesBatchStatusFailed="files failed to upload."
i18n-filesBatchStatusUploaded="kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload"
filesBatchStatusUploaded="files successfully uploaded."
i18n-fileStatusFailed="kendo.upload.fileStatusFailed|The file status message after failed upload"
fileStatusFailed="File failed to upload."
i18n-fileStatusUploaded="kendo.upload.fileStatusUploaded|The file status message after successful upload"
fileStatusUploaded="File successfully uploaded."
i18n-headerStatusPaused="kendo.upload.headerStatusPaused|The header status message when the file upload is paused"
headerStatusPaused="Paused"
i18n-headerStatusUploaded="kendo.upload.headerStatusUploaded|The header status message after file upload completion"
headerStatusUploaded="Done"
i18n-headerStatusUploading="kendo.upload.headerStatusUploading|The header status message during file upload"
headerStatusUploading="Uploading..."
i18n-invalidFileExtension="kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message"
invalidFileExtension="File type not allowed."
i18n-invalidMaxFileSize="kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message"
invalidMaxFileSize="File size too large."
i18n-invalidMinFileSize="kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message"
invalidMinFileSize="File size too small."
i18n-pause="kendo.upload.pause|The text for the Pause button"
pause="Pause"
i18n-remove="kendo.upload.remove|The text for the Remove button"
remove="Remove"
i18n-resume="kendo.upload.resume|The text for the Resume button"
resume="Resume"
i18n-retry="kendo.upload.retry|The text for the Retry button"
retry="Retry"
i18n-select="kendo.upload.select|The text for the Select button"
select="Select files..."
i18n-uploadSelectedFiles="kendo.upload.uploadSelectedFiles|The text for the Upload files button"
uploadSelectedFiles="Upload"
>
</ng-container>
<div kendoUploadInternalDropZone
[restrictions]="restrictions"
[multiple]="multiple"
[disabled]="disabled"
>
<div class="k-upload-button-wrap">
<button
kendoButton
#fileSelectButton
class="k-upload-button"
type="button"
(click)="fileSelectInput.click()"
(focus)="onFileSelectButtonFocus()"
[id]="focusableId"
[attr.aria-label]="textFor('select')"
[attr.tabindex]="tabindex"
[attr.aria-expanded]="hasFileList"
[attr.aria-controls]="hasFileList ? fileListId : undefined"
>
{{textFor('select')}}
</button>
<input kendoFileSelect #fileSelectInput
[dir]="direction"
[accept]="accept"
[restrictions]="restrictions"
[multiple]="multiple"
[disabled]="disabled"
[required]="isControlRequired" />
</div>
<kendo-upload-status-total *ngIf="showTotalStatus"
class="k-upload-status"
[fileList]="fileList">
</kendo-upload-status-total>
<div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
</div>
<ul kendo-upload-file-list *ngIf="hasFileList"
class="k-upload-files k-reset"
[disabled]="disabled"
[fileList]="fileList.files"
[fileTemplate]="fileTemplate"
[fileInfoTemplate]="fileInfoTemplate"
[id]="fileListId">
</ul>
<kendo-upload-action-buttons
*ngIf="showActionButtons"
[disabled]="disabled"
[actionsLayout]="actionsLayout">
</kendo-upload-action-buttons>
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoUploadLocalizedMessages],\n [kendoFileSelectLocalizedMessages],\n [kendoUploadDropZoneLocalizedMessages]\n " }, { kind: "directive", type: DropZoneInternalDirective, selector: "\n [kendoUploadInternalDropZone],\n [kendoFileSelectInternalDropZone]\n ", inputs: ["disabled", "multiple", "restrictions"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions", "accept", "required"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { kind: "component", type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { kind: "component", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoUpload',
providers: [
LocalizationService,
NavigationService,
UploadService,
DropZoneService,
UPLOAD_VALUE_ACCESSOR,
{
provide: L10N_PREFIX,
useValue: 'kendo.upload'
},
{
provide: KendoInput,
useExisting: forwardRef(() => UploadComponent)
}
],
selector: 'kendo-upload',
template: `
<ng-container kendoUploadLocalizedMessages
i18n-cancel="kendo.upload.cancel|The text for the Cancel button"
cancel="Cancel"
i18n-clearSelectedFiles="kendo.upload.clearSelectedFiles|The text for the Clear button"
clearSelectedFiles="Clear"
i18n-dropFilesHere="kendo.upload.dropFilesHere|The drop zone hint"
dropFilesHere="Drop files here to upload"
i18n-filesBatchStatus="kendo.upload.filesBatchStatus|The status message for a batch of files"
filesBatchStatus="files"
i18n-filesBatchStatusFailed="kendo.upload.filesBatchStatusFailed|The status message for a batch of files after failed upload"
filesBatchStatusFailed="files failed to upload."
i18n-filesBatchStatusUploaded="kendo.upload.filesBatchStatusUploaded|The status message for a batch of files after successful upload"
filesBatchStatusUploaded="files successfully uploaded."
i18n-fileStatusFailed="kendo.upload.fileStatusFailed|The file status message after failed upload"
fileStatusFailed="File failed to upload."
i18n-fileStatusUploaded="kendo.upload.fileStatusUploaded|The file status message after successful upload"
fileStatusUploaded="File successfully uploaded."
i18n-headerStatusPaused="kendo.upload.headerStatusPaused|The header status message when the file upload is paused"
headerStatusPaused="Paused"
i18n-headerStatusUploaded="kendo.upload.headerStatusUploaded|The header status message after file upload completion"
headerStatusUploaded="Done"
i18n-headerStatusUploading="kendo.upload.headerStatusUploading|The header status message during file upload"
headerStatusUploading="Uploading..."
i18n-invalidFileExtension="kendo.upload.invalidFileExtension|The text for the invalid allowed extensions restriction message"
invalidFileExtension="File type not allowed."
i18n-invalidMaxFileSize="kendo.upload.invalidMaxFileSize|The text for the invalid max file size restriction message"
invalidMaxFileSize="File size too large."
i18n-invalidMinFileSize="kendo.upload.invalidMinFileSize|The text for the invalid min file size restriction message"
invalidMinFileSize="File size too small."
i18n-pause="kendo.upload.pause|The text for the Pause button"
pause="Pause"
i18n-remove="kendo.upload.remove|The text for the Remove button"
remove="Remove"
i18n-resume="kendo.upload.resume|The text for the Resume button"
resume="Resume"
i18n-retry="kendo.upload.retry|The text for the Retry button"
retry="Retry"
i18n-select="kendo.upload.select|The text for the Select button"
select="Select files..."
i18n-uploadSelectedFiles="kendo.upload.uploadSelectedFiles|The text for the Upload files button"
uploadSelectedFiles="Upload"
>
</ng-container>
<div kendoUploadInternalDropZone
[restrictions]="restrictions"
[multiple]="multiple"
[disabled]="disabled"
>
<div class="k-upload-button-wrap">
<button
kendoButton
#fileSelectButton
class="k-upload-button"
type="button"
(click)="fileSelectInput.click()"
(focus)="onFileSelectButtonFocus()"
[id]="focusableId"
[attr.aria-label]="textFor('select')"
[attr.tabindex]="tabindex"
[attr.aria-expanded]="hasFileList"
[attr.aria-controls]="hasFileList ? fileListId : undefined"
>
{{textFor('select')}}
</button>
<input kendoFileSelect #fileSelectInput
[dir]="direction"
[accept]="accept"
[restrictions]="restrictions"
[multiple]="multiple"
[disabled]="disabled"
[required]="isControlRequired" />
</div>
<kendo-upload-status-total *ngIf="showTotalStatus"
class="k-upload-status"
[fileList]="fileList">
</kendo-upload-status-total>
<div class="k-dropzone-hint">{{textFor('dropFilesHere')}}</div>
</div>
<ul kendo-upload-file-list *ngIf="hasFileList"
class="k-upload-files k-reset"
[disabled]="disabled"
[fileList]="fileList.files"
[fileTemplate]="fileTemplate"
[fileInfoTemplate]="fileInfoTemplate"
[id]="fileListId">
</ul>
<kendo-upload-action-buttons
*ngIf="showActionButtons"
[disabled]="disabled"
[actionsLayout]="actionsLayout">
</kendo-upload-action-buttons>
`,
standalone: true,
imports: [LocalizedMessagesDirective, DropZoneInternalDirective, ButtonComponent, FileSelectDirective, NgIf, UploadStatusTotalComponent, FileListComponent, UploadActionButtonsComponent]
}]
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.LocalizationService }, { type: i3.NavigationService }, { type: i4.DropZoneService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { autoUpload: [{
type: Input
}], batch: [{
type: Input
}], withCredentials: [{
type: Input
}], saveField: [{
type: Input
}], saveHeaders: [{
type: Input
}], saveMethod: [{
type: Input
}], saveUrl: [{
type: Input
}], responseType: [{
type: Input
}], removeField: [{
type: Input
}], removeHeaders: [{
type: Input
}], removeMethod: [{
type: Input
}], removeUrl: [{
type: Input
}], chunkable: [{
type: Input
}], concurrent: [{
type: Input
}], showFileList: [{
type: Input
}], tabIndex: [{
type: Input,
args: ['tabIndex']
}], actionsLayout: [{
type: Input
}], fileSelectInput: [{
type: ViewChild,
args: ['fileSelectInput', { static: true }]
}], cancel: [{
type: Output
}], clear: [{
type: Output
}], complete: [{
type: Output
}], error: [{
type: Output
}], pause: [{
type: Output
}], resume: [{
type: Output
}], success: [{
type: Output
}], upload: [{
type: Output
}], uploadProgress: [{
type: Output
}], valueChange: [{
type: Output
}], dir: [{
type: HostBinding,
args: ['attr.dir']
}] } });