@progress/kendo-angular-upload
Version:
Kendo UI Angular Upload Component
137 lines (136 loc) • 5.91 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 { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';
import { NavigationService } from './navigation.service';
import { UploadService } from './upload.service';
import { assignGuidToFiles, inputFiles } from './common/util';
import { validateFiles } from './common/validation-util';
import * as i0 from "@angular/core";
import * as i1 from "./upload.service";
import * as i2 from "./navigation.service";
/**
* @hidden
*/
export class FileSelectDirective {
uploadService;
navigation;
dir;
disabled;
multiple;
restrictions;
accept;
required;
type = "file";
autocomplete = "off";
tabIndex = -1;
ariaHidden = true;
element;
constructor(uploadService, navigation, el) {
this.uploadService = uploadService;
this.navigation = navigation;
this.element = el;
}
classNames = true;
get nameAttribute() {
return this.uploadService.async.saveField;
}
get multipleAttribute() {
return this.multiple ? "multiple" : null;
}
get dirAttribute() {
return this.dir;
}
get disabledAttribute() {
return this.disabled ? "true" : null;
}
get acceptAttribute() {
return this.accept ? this.accept : null;
}
get requiredAttribute() {
return this.required ? "" : null;
}
onInputChange(event) {
const ua = navigator.userAgent;
const webkit = /(webkit)[ \/]([\w.]+)/i;
const msBrowsers = /(windows)[ \/]([\w.]+)/i;
let selectedFiles = inputFiles(event.target);
selectedFiles = assignGuidToFiles(selectedFiles, !this.uploadService.async.batch);
validateFiles(selectedFiles, this.restrictions);
if (!this.multiple) {
this.uploadService.clearFiles();
}
this.uploadService.addFiles(selectedFiles);
/*
Chrome, IE, Edge and Safari do not trigger a `change` event
when a file with the same name is selected a number of consecutive times.
As a workaround, clear the input value after handling the file.
*/
const native = this.element.nativeElement;
if (ua.match(webkit) || ua.match(msBrowsers)) {
native.type = "";
native.type = "file";
}
setTimeout(() => {
this.navigation.focusedIndex = -1;
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectDirective, deps: [{ token: i1.UploadService }, { token: i2.NavigationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FileSelectDirective, isStandalone: true, selector: "[kendoFileSelect]", inputs: { dir: "dir", disabled: "disabled", multiple: "multiple", restrictions: "restrictions", accept: "accept", required: "required" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.type": "this.type", "attr.autocomplete": "this.autocomplete", "attr.tabindex": "this.tabIndex", "attr.aria-hidden": "this.ariaHidden", "class.k-hidden": "this.classNames", "attr.name": "this.nameAttribute", "attr.multiple": "this.multipleAttribute", "attr.dir": "this.dirAttribute", "attr.disabled": "this.disabledAttribute", "attr.accept": "this.acceptAttribute", "attr.required": "this.requiredAttribute" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoFileSelect]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.UploadService }, { type: i2.NavigationService }, { type: i0.ElementRef }]; }, propDecorators: { dir: [{
type: Input
}], disabled: [{
type: Input
}], multiple: [{
type: Input
}], restrictions: [{
type: Input
}], accept: [{
type: Input
}], required: [{
type: Input
}], type: [{
type: HostBinding,
args: ["attr.type"]
}], autocomplete: [{
type: HostBinding,
args: ["attr.autocomplete"]
}], tabIndex: [{
type: HostBinding,
args: ["attr.tabindex"]
}], ariaHidden: [{
type: HostBinding,
args: ["attr.aria-hidden"]
}], classNames: [{
type: HostBinding,
args: ["class.k-hidden"]
}], nameAttribute: [{
type: HostBinding,
args: ["attr.name"]
}], multipleAttribute: [{
type: HostBinding,
args: ["attr.multiple"]
}], dirAttribute: [{
type: HostBinding,
args: ["attr.dir"]
}], disabledAttribute: [{
type: HostBinding,
args: ["attr.disabled"]
}], acceptAttribute: [{
type: HostBinding,
args: ["attr.accept"]
}], requiredAttribute: [{
type: HostBinding,
args: ["attr.required"]
}], onInputChange: [{
type: HostListener,
args: ["change", ["$event"]]
}] } });