@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
277 lines (276 loc) • 8.9 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 { ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, NgZone, Output, ViewChild } from "@angular/core";
import { guid, isControlRequired } from "@progress/kendo-angular-common";
import { FileTemplateDirective } from "../templates/file-template.directive";
import { FileInfoTemplateDirective } from "../templates/file-info-template.directive";
import { UploadService } from "../upload.service";
import { NgControl } from "@angular/forms";
import { NavigationService } from "../navigation.service";
import * as i0 from "@angular/core";
import * as i1 from "../upload.service";
import * as i2 from "../navigation.service";
/**
* @hidden
*/
export class UploadFileSelectBase {
uploadService;
navigation;
cdr;
injector;
zone;
/**
* @hidden
*/
fileTemplate;
/**
* @hidden
*/
fileInfoTemplate;
/**
* @hidden
*/
fileSelectButton;
/**
* Sets the `accept` attribute of the internal `input` element of the component.
*/
accept;
/**
* Disables the component.
*
* @default false
*/
disabled = false;
/**
* Enables the selection of multiple files
* If set to `false`, only one file can be selected at a time.
* @default true
*/
multiple = true;
/**
* Toggles the visibility of the file list.
* @default true
*/
showFileList = true;
/**
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
* @default 0
*/
tabindex = 0;
/**
* Sets the restrictions for selected files.
*/
set restrictions(restrictions) {
const parsedRestrictions = Object.assign({}, this.restrictions, restrictions);
this._restrictions = parsedRestrictions;
}
get restrictions() {
return this._restrictions;
}
/**
* Specifies the id of the external drop zone to associate with the component.
*/
zoneId;
/**
* @hidden
*/
focusableId = `k-${guid()}`;
/**
* @hidden
*/
hostDefaultClasses = true;
/**
* @hidden
*/
get hostDisabledClass() {
return this.disabled;
}
/**
* Fires when the user navigates outside the component.
*/
onBlur = new EventEmitter();
/**
* Fires when the component is focused.
*/
onFocus = new EventEmitter();
/**
* Fires when files are selected. If prevented, the selected files will not be added to the list.
*/
select = new EventEmitter();
/**
* Fires when a file is about to be removed. If prevented, the file will remain in the list.
*/
remove = new EventEmitter();
/**
* @hidden
*/
_restrictions = {
allowedExtensions: [],
maxFileSize: 0,
minFileSize: 0
};
/**
* @hidden
*/
fileList;
constructor(uploadService, navigation, cdr, injector, zone) {
this.uploadService = uploadService;
this.navigation = navigation;
this.cdr = cdr;
this.injector = injector;
this.zone = zone;
this.fileList = this.uploadService.files;
}
/**
* @hidden
*/
get formControl() {
const ngControl = this.injector.get(NgControl, null);
return ngControl?.control || null;
}
/**
* @hidden
*/
get isControlRequired() {
return isControlRequired(this.formControl);
}
/**
* @hidden
*/
get hasFileList() {
const hasFileList = this.showFileList && this.fileList.count > 0;
this.navigation.fileListVisible = hasFileList;
return hasFileList;
}
/**
* @hidden
*/
writeValue(newValue, validation, callback) {
let isValid = true;
if (newValue instanceof Array) {
newValue.forEach((file) => {
if (!validation(file)) {
isValid = false;
}
});
if (isValid) {
this.uploadService[callback](newValue);
}
}
if (newValue === null) {
this.fileList.clear();
}
this.cdr.markForCheck();
}
onTouchedCallback = (_) => { };
onChangeCallback = (_) => { };
/**
* @hidden
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/**
* @hidden
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
/**
* @hidden
*/
onFileSelectButtonFocus() {
if (!this.navigation.focused) {
this.navigation.focusedIndex = -1;
}
}
/**
* Focuses the component's `Select files` button.
*/
focus() {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.fileSelectButton.nativeElement.focus();
this.navigation.focused = true;
});
});
}
/**
* @hidden
* @deprecated
*/
focusComponent() {
this.focus();
}
/**
* Blurs the component if it was previously focused.
*/
blur() {
if (this.navigation.focused) {
this.navigation.focused = false;
document.activeElement.blur();
}
}
/**
* @hidden
* @deprecated
*/
blurComponent() {
this.blur();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UploadFileSelectBase, inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass" } }, queries: [{ propertyName: "fileTemplate", first: true, predicate: FileTemplateDirective, descendants: true }, { propertyName: "fileInfoTemplate", first: true, predicate: FileInfoTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "fileSelectButton", first: true, predicate: ["fileSelectButton"], descendants: true, read: ElementRef, static: true }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadFileSelectBase, decorators: [{
type: Directive,
args: [{}]
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.NgZone }]; }, propDecorators: { fileTemplate: [{
type: ContentChild,
args: [FileTemplateDirective]
}], fileInfoTemplate: [{
type: ContentChild,
args: [FileInfoTemplateDirective]
}], fileSelectButton: [{
type: ViewChild,
args: ['fileSelectButton', { static: true, read: ElementRef }]
}], accept: [{
type: Input
}], disabled: [{
type: Input
}], multiple: [{
type: Input
}], showFileList: [{
type: Input
}], tabindex: [{
type: Input
}], restrictions: [{
type: Input
}], zoneId: [{
type: Input
}], focusableId: [{
type: Input
}], hostDefaultClasses: [{
type: HostBinding,
args: ['class.k-upload']
}], hostDisabledClass: [{
type: HostBinding,
args: ['class.k-disabled']
}], onBlur: [{
type: Output,
args: ['blur']
}], onFocus: [{
type: Output,
args: ['focus']
}], select: [{
type: Output
}], remove: [{
type: Output
}] } });