@syncfusion/ej2-inputs
Version:
A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.
1,139 lines • 161 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, Property, Event, EventHandler, L10n, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, detach, append, Animation } from '@syncfusion/ej2-base';
import { addClass, removeClass, KeyboardEvents, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';
import { Collection, Complex, Browser, Ajax, getUniqueID, closest, remove } from '@syncfusion/ej2-base';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { select, selectAll } from '@syncfusion/ej2-base';
var CONTROL_WRAPPER = 'e-upload e-control-wrapper';
var INPUT_WRAPPER = 'e-file-select';
var DROP_AREA = 'e-file-drop';
var DROP_WRAPPER = 'e-file-select-wrap';
var LIST_PARENT = 'e-upload-files';
var FILE = 'e-upload-file-list';
var STATUS = 'e-file-status';
var ACTION_BUTTONS = 'e-upload-actions';
var UPLOAD_BUTTONS = 'e-file-upload-btn e-css e-btn e-flat e-primary';
var CLEAR_BUTTONS = 'e-file-clear-btn e-css e-btn e-flat';
var FILE_NAME = 'e-file-name';
var FILE_TYPE = 'e-file-type';
var FILE_SIZE = 'e-file-size';
var REMOVE_ICON = 'e-file-remove-btn';
var DELETE_ICON = 'e-file-delete-btn';
var SPINNER_PANE = 'e-spinner-pane';
var ABORT_ICON = 'e-file-abort-btn';
var RETRY_ICON = 'e-file-reload-btn';
var DRAG_HOVER = 'e-upload-drag-hover';
var PROGRESS_WRAPPER = 'e-upload-progress-wrap';
var PROGRESSBAR = 'e-upload-progress-bar';
var PROGRESSBAR_TEXT = 'e-progress-bar-text';
var UPLOAD_INPROGRESS = 'e-upload-progress';
var UPLOAD_SUCCESS = 'e-upload-success';
var UPLOAD_FAILED = 'e-upload-fails';
var TEXT_CONTAINER = 'e-file-container';
var VALIDATION_FAILS = 'e-validation-fails';
var RTL = 'e-rtl';
var DISABLED = 'e-disabled';
var RTL_CONTAINER = 'e-rtl-container';
var ICON_FOCUSED = 'e-clear-icon-focus';
var PROGRESS_INNER_WRAPPER = 'e-progress-inner-wrap';
var PAUSE_UPLOAD = 'e-file-pause-btn';
var RESUME_UPLOAD = 'e-file-play-btn';
var RESTRICT_RETRY = 'e-restrict-retry';
var wrapperAttr = ['title', 'style', 'class'];
var FORM_UPLOAD = 'e-form-upload';
var HIDDEN_INPUT = 'e-hidden-file-input';
var INVALID_FILE = 'e-file-invalid';
var INFORMATION = 'e-file-information';
var FilesProp = /** @class */ (function (_super) {
__extends(FilesProp, _super);
function FilesProp() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], FilesProp.prototype, "name", void 0);
__decorate([
Property(null)
], FilesProp.prototype, "size", void 0);
__decorate([
Property('')
], FilesProp.prototype, "type", void 0);
return FilesProp;
}(ChildProperty));
export { FilesProp };
var ButtonsProps = /** @class */ (function (_super) {
__extends(ButtonsProps, _super);
function ButtonsProps() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Browse...')
], ButtonsProps.prototype, "browse", void 0);
__decorate([
Property('Upload')
], ButtonsProps.prototype, "upload", void 0);
__decorate([
Property('Clear')
], ButtonsProps.prototype, "clear", void 0);
return ButtonsProps;
}(ChildProperty));
export { ButtonsProps };
var AsyncSettings = /** @class */ (function (_super) {
__extends(AsyncSettings, _super);
function AsyncSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], AsyncSettings.prototype, "saveUrl", void 0);
__decorate([
Property('')
], AsyncSettings.prototype, "removeUrl", void 0);
__decorate([
Property(0)
], AsyncSettings.prototype, "chunkSize", void 0);
__decorate([
Property(3)
], AsyncSettings.prototype, "retryCount", void 0);
__decorate([
Property(500)
], AsyncSettings.prototype, "retryAfterDelay", void 0);
return AsyncSettings;
}(ChildProperty));
export { AsyncSettings };
/**
* The uploader component allows to upload images, documents, and other files from local to server.
* ```html
* <input type='file' name='images[]' id='upload'/>
* ```
* ```typescript
* <script>
* var uploadObj = new Uploader();
* uploadObj.appendTo('#upload');
* </script>
* ```
*/
var Uploader = /** @class */ (function (_super) {
__extends(Uploader, _super);
/**
* Triggers when change the Uploader value.
*
* @param {UploaderModel} options - Specifies the Uploader model.
* @param {string | HTMLInputElement} element - Specifies the element to render as component.
* @private
*/
function Uploader(options, element) {
var _this = _super.call(this, options, element) || this;
_this.initialAttr = { accept: null, multiple: false, disabled: false };
_this.uploadedFilesData = [];
_this.base64String = [];
_this.isForm = false;
_this.allTypes = false;
_this.pausedData = [];
_this.uploadMetaData = [];
_this.tabIndex = '0';
_this.btnTabIndex = '0';
_this.disableKeyboardNavigation = false;
_this.count = -1;
_this.actionCompleteCount = 0;
_this.flag = true;
_this.selectedFiles = [];
_this.uploaderName = 'UploadFiles';
_this.fileStreams = [];
_this.newFileRef = 0;
_this.isFirstFileOnSelection = false;
_this.dragCounter = 0;
/**
* Get the file item(li) which are shown in file list.
*
* @private
*/
_this.fileList = [];
/**
* Get the data of files which are shown in file list.
*
* @private
*/
_this.filesData = [];
_this.uploaderOptions = options;
return _this;
}
/**
* Calls internally if any of the property value is changed.
*
* @param {UploaderModel} newProp - Returns the dynamic property value of the component.
* @param {UploaderModel} oldProp - Returns the previous property value of the component.
* @returns {void}
* @private
*/
Uploader.prototype.onPropertyChanged = function (newProp, oldProp) {
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'allowedExtensions':
this.setExtensions(this.allowedExtensions);
this.clearAll();
break;
case 'enabled':
this.setControlStatus();
break;
case 'multiple':
this.setMultipleSelection();
break;
case 'enableRtl':
this.setRTL();
this.reRenderFileList();
break;
case 'buttons':
this.buttons.browse = isNullOrUndefined(this.buttons.browse) ? '' : this.buttons.browse;
this.buttons.clear = isNullOrUndefined(this.buttons.clear) ? '' : this.buttons.clear;
this.buttons.upload = isNullOrUndefined(this.buttons.upload) ? '' : this.buttons.upload;
this.renderButtonTemplates();
break;
case 'dropArea':
this.unBindDropEvents();
this.updateDropArea();
break;
case 'htmlAttributes':
this.updateHTMLAttrToElement();
this.updateHTMLAttrToWrapper();
this.checkHTMLAttributes(true);
break;
case 'files':
this.renderPreLoadFiles();
break;
case 'directoryUpload':
this.updateDirectoryAttributes();
break;
case 'template':
if (this.isReact) {
this.reRenderFileList();
}
else {
this.clearAll();
}
break;
case 'minFileSize':
case 'maxFileSize':
case 'autoUpload':
this.clearAll();
break;
case 'sequentialUpload':
this.clearAll();
break;
case 'locale':
this.l10n.setLocale(this.locale);
this.setLocalizedTexts();
this.preLocaleObj = getValue('currentLocale', this.l10n);
break;
case 'cssClass':
this.setCSSClass(oldProp.cssClass);
break;
}
}
};
Uploader.prototype.setLocalizedTexts = function () {
if (isNullOrUndefined(this.template)) {
if (typeof (this.buttons.browse) === 'string') {
this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?
this.localizedTexts('Browse') : this.buttons.browse;
this.browseButton.setAttribute('title', this.browseButton.innerText);
if (this.uploadWrapper && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + DROP_AREA))) {
this.uploadWrapper.querySelector('.' + DROP_AREA).innerHTML = this.localizedTexts('dropFilesHint');
}
}
this.updateFileList();
}
};
Uploader.prototype.getKeyValue = function (val) {
var keyValue;
for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {
var key = _a[_i];
if (this.preLocaleObj["" + key] === val) {
keyValue = key;
}
}
return keyValue;
};
Uploader.prototype.updateFileList = function () {
var element;
/* istanbul ignore next */
if (this.fileList.length > 0 && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + LIST_PARENT))) {
for (var i = 0; i < this.fileList.length; i++) {
element = this.fileList[i].querySelector('.e-file-status');
element.innerHTML = this.localizedTexts(this.getKeyValue(this.filesData[i].status));
this.filesData[i].status = this.localizedTexts(this.getKeyValue(this.filesData[i].status));
if (this.fileList[i].classList.contains(UPLOAD_SUCCESS)) {
this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));
}
if (this.fileList[i].querySelector('.e-file-play-btn')) {
this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('resume'));
}
if (this.fileList[i].querySelector('.e-file-remove-btn')) {
this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('remove'));
}
if (this.fileList[i].querySelector('.e-file-reload-btn')) {
this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('retry'));
}
if (!this.autoUpload) {
this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?
this.localizedTexts('Upload') : this.buttons.upload;
this.uploadButton.setAttribute('title', this.localizedTexts('Upload'));
this.clearButton.innerText = (this.buttons.clear === 'Clear') ?
this.localizedTexts('Clear') : this.buttons.clear;
this.clearButton.setAttribute('title', this.localizedTexts('Clear'));
}
}
}
};
Uploader.prototype.reRenderFileList = function () {
if (this.listParent) {
detach(this.listParent);
this.listParent = null;
this.fileList = [];
this.internalCreateFileList(this.filesData);
if (this.actionButtons) {
this.removeActionButtons();
this.renderActionButtons();
this.checkActionButtonStatus();
}
}
};
Uploader.prototype.preRender = function () {
this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload', invalidFileName: 'File Name is not allowed',
dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',
invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',
uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',
removedSuccessMessage: 'File removed successfully', removedFailedMessage: 'Unable to remove file', inProgress: 'Uploading',
readyToUploadMessage: 'Ready to upload', abort: 'Abort', remove: 'Remove', cancel: 'Cancel', delete: 'Delete file',
pauseUpload: 'File upload paused', pause: 'Pause', resume: 'Resume', retry: 'Retry',
fileUploadCancel: 'File upload canceled', invalidFileSelection: 'Invalid files selected', totalFiles: 'Total files',
size: 'Size'
};
this.l10n = new L10n('uploader', this.localeText, this.locale);
this.preLocaleObj = getValue('currentLocale', this.l10n);
this.formRendered();
this.updateHTMLAttrToElement();
this.checkHTMLAttributes(false);
var ejInstance = getValue('ej2_instances', this.element);
/* istanbul ignore next */
if (this.element.tagName === 'EJS-UPLOADER') {
var inputElement = this.createElement('input', { attrs: { type: 'file' } });
var index = 0;
for (index; index < this.element.attributes.length; index++) {
if (this.element.attributes[index].nodeName !== 'id') {
inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
}
else if (this.element.attributes[index].nodeName === 'id') {
inputElement.setAttribute(this.element.attributes[index].nodeName, getUniqueID('uploader'));
}
inputElement.innerHTML = this.element.innerHTML;
}
if (!inputElement.hasAttribute('name')) {
inputElement.setAttribute('name', 'UploadFiles');
}
this.element.appendChild(inputElement);
this.element = inputElement;
setValue('ej2_instances', ejInstance, this.element);
}
/* istanbul ignore next */
if (ejInstance[0].isPureReactComponent) {
if (!isNullOrUndefined(ejInstance[0].props.name)) {
this.element.setAttribute('name', ejInstance[0].props.name);
}
else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {
this.element.setAttribute('name', ejInstance[0].props.id);
}
else {
this.element.setAttribute('name', 'UploadFiles');
}
}
if (isNullOrUndefined(this.element.getAttribute('name'))) {
this.element.setAttribute('name', this.element.getAttribute('id'));
}
if (!this.element.hasAttribute('type')) {
this.element.setAttribute('type', 'file');
}
this.updateDirectoryAttributes();
this.keyConfigs = {
enter: 'enter'
};
if (this.element.hasAttribute('tabindex')) {
this.tabIndex = this.element.getAttribute('tabindex');
}
this.browserName = Browser.info.name;
this.uploaderName = this.element.getAttribute('name');
};
Uploader.prototype.formRendered = function () {
var parentEle = closest(this.element, 'form');
if (!isNullOrUndefined(parentEle)) {
for (; parentEle && parentEle !== document.documentElement; parentEle = parentEle.parentElement) {
if (parentEle.tagName === 'FORM') {
this.isForm = true;
this.formElement = parentEle;
parentEle.setAttribute('enctype', 'multipart/form-data');
parentEle.setAttribute('encoding', 'multipart/form-data');
}
}
}
};
Uploader.prototype.getPersistData = function () {
return this.addOnPersist(['filesData']);
};
/**
* Return the module name of the component.
*
* @returns {string} Returns the component name.
*/
Uploader.prototype.getModuleName = function () {
return 'uploader';
};
Uploader.prototype.updateDirectoryAttributes = function () {
if (this.directoryUpload) {
this.element.setAttribute('directory', 'true');
this.element.setAttribute('webkitdirectory', 'true');
}
else {
this.element.removeAttribute('directory');
this.element.removeAttribute('webkitdirectory');
}
};
/**
* To Initialize the control rendering
*
* @private
* @returns {void}
*/
Uploader.prototype.render = function () {
this.renderBrowseButton();
this.initializeUpload();
this.updateHTMLAttrToWrapper();
this.wireEvents();
this.setMultipleSelection();
this.setExtensions(this.allowedExtensions);
this.setRTL();
this.renderPreLoadFiles();
this.setControlStatus();
this.setCSSClass();
};
Uploader.prototype.renderBrowseButton = function () {
this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });
this.browseButton.setAttribute('tabindex', this.tabIndex);
if (typeof (this.buttons.browse) === 'string') {
this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?
this.localizedTexts('Browse') : this.buttons.browse;
this.browseButton.setAttribute('title', this.browseButton.innerText);
}
else {
this.browseButton.appendChild(this.buttons.browse);
}
this.element.setAttribute('aria-label', 'Uploader');
};
Uploader.prototype.renderActionButtons = function () {
this.element.setAttribute('tabindex', '-1');
this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });
this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,
attrs: { 'type': 'button', 'tabindex': this.btnTabIndex, 'aria-label': this.localizedTexts('Upload') } });
this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,
attrs: { 'type': 'button', 'tabindex': this.btnTabIndex, 'aria-label': this.localizedTexts('Clear') } });
this.actionButtons.appendChild(this.clearButton);
this.actionButtons.appendChild(this.uploadButton);
this.renderButtonTemplates();
this.uploadWrapper.appendChild(this.actionButtons);
this.browseButton.blur();
if (!this.isPreloadFiles) {
this.uploadButton.focus();
}
this.wireActionButtonEvents();
};
/* istanbul ignore next */
Uploader.prototype.serverActionButtonsEventBind = function (element) {
if (element && !this.isForm) {
this.browseButton.blur();
this.actionButtons = element;
this.uploadButton = this.actionButtons.querySelector('.e-file-upload-btn');
this.clearButton = this.actionButtons.querySelector('.e-file-clear-btn');
this.uploadButton.focus();
this.unwireActionButtonEvents();
this.wireActionButtonEvents();
this.checkActionButtonStatus();
}
};
Uploader.prototype.wireActionButtonEvents = function () {
EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);
EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);
};
Uploader.prototype.unwireActionButtonEvents = function () {
EventHandler.remove(this.uploadButton, 'click', this.uploadButtonClick);
EventHandler.remove(this.clearButton, 'click', this.clearButtonClick);
};
Uploader.prototype.removeActionButtons = function () {
if (this.actionButtons) {
this.unwireActionButtonEvents();
detach(this.actionButtons);
this.actionButtons = null;
}
};
Uploader.prototype.renderButtonTemplates = function () {
if (typeof (this.buttons.browse) === 'string') {
this.browseButton.textContent = (this.buttons.browse === 'Browse...') ?
this.localizedTexts('Browse') : this.buttons.browse;
this.browseButton.setAttribute('title', this.browseButton.textContent);
}
else {
this.browseButton.innerHTML = '';
this.browseButton.appendChild(this.buttons.browse);
}
if (this.uploadButton) {
var uploadText = isNullOrUndefined(this.buttons.upload) ? 'Upload' : this.buttons.upload;
this.buttons.upload = uploadText;
if (typeof (this.buttons.upload) === 'string') {
this.uploadButton.textContent = (this.buttons.upload === 'Upload') ?
this.localizedTexts('Upload') : this.buttons.upload;
this.uploadButton.setAttribute('title', this.uploadButton.textContent);
}
else {
this.uploadButton.innerHTML = '';
this.uploadButton.appendChild(this.buttons.upload);
}
}
if (this.clearButton) {
var clearText = isNullOrUndefined(this.buttons.clear) ? 'Clear' : this.buttons.clear;
this.buttons.clear = clearText;
if (typeof (this.buttons.clear) === 'string') {
this.clearButton.textContent = (this.buttons.clear === 'Clear') ?
this.localizedTexts('Clear') : this.buttons.clear;
this.clearButton.setAttribute('title', this.clearButton.textContent);
}
else {
this.clearButton.innerHTML = '';
this.clearButton.appendChild(this.buttons.clear);
}
}
};
Uploader.prototype.initializeUpload = function () {
this.element.setAttribute('tabindex', '-1');
var inputWrapper = this.createElement('span', { className: INPUT_WRAPPER });
this.element.parentElement.insertBefore(inputWrapper, this.element);
this.dropAreaWrapper = this.createElement('div', { className: DROP_WRAPPER });
this.element.parentElement.insertBefore(this.dropAreaWrapper, this.element);
inputWrapper.appendChild(this.element);
this.dropAreaWrapper.appendChild(this.browseButton);
this.dropAreaWrapper.appendChild(inputWrapper);
this.uploadWrapper = this.createElement('div', { className: CONTROL_WRAPPER });
this.dropAreaWrapper.parentElement.insertBefore(this.uploadWrapper, this.dropAreaWrapper);
this.uploadWrapper.appendChild(this.dropAreaWrapper);
this.setDropArea();
};
Uploader.prototype.renderPreLoadFiles = function () {
if (this.files.length) {
if (this.enablePersistence && this.filesData.length) {
this.internalCreateFileList(this.filesData);
return;
}
if (isNullOrUndefined(this.files[0].size)) {
return;
}
this.isPreloadFiles = true;
var files = [].slice.call(this.files);
var filesData = [];
if (!this.multiple) {
this.clearData();
files = [files[0]];
}
for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {
var data = files_1[_i];
var fileData = {
name: data.name + '.' + data.type.split('.')[data.type.split('.').length - 1],
rawFile: '',
size: data.size,
status: this.localizedTexts('uploadSuccessMessage'),
type: data.type,
validationMessages: { minSize: '', maxSize: '' },
statusCode: '2'
};
filesData.push(fileData);
this.filesData.push(fileData);
}
this.internalCreateFileList(filesData);
if (!this.autoUpload && this.listParent && !this.actionButtons && (!this.isForm || this.allowUpload()) && this.showFileList) {
this.renderActionButtons();
}
this.checkActionButtonStatus();
if (this.sequentialUpload) {
this.count = this.filesData.length - 1;
}
this.isPreloadFiles = false;
}
};
Uploader.prototype.checkActionButtonStatus = function () {
if (this.actionButtons) {
var length_1 = this.uploadWrapper.querySelectorAll('.' + VALIDATION_FAILS).length +
this.uploadWrapper.querySelectorAll('.e-upload-fails:not(.e-upload-progress)').length +
this.uploadWrapper.querySelectorAll('span.' + UPLOAD_SUCCESS).length +
this.uploadWrapper.querySelectorAll('span.' + UPLOAD_INPROGRESS).length;
if (length_1 > 0 && length_1 === this.uploadWrapper.querySelectorAll('li').length) {
this.uploadButton.setAttribute('disabled', 'disabled');
}
else {
this.uploadButton.removeAttribute('disabled');
}
}
};
Uploader.prototype.setDropArea = function () {
var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');
if (this.dropArea) {
this.dropZoneElement = (typeof (this.dropArea) !== 'string') ? this.dropArea :
select(this.dropArea, document);
var element = this.element;
var enableDropText = false;
while (element.parentNode) {
element = element.parentNode;
if (element === this.dropZoneElement) {
enableDropText = true;
if (!dropTextArea) {
this.createDropTextHint();
}
else {
dropTextArea.innerHTML = this.localizedTexts('dropFilesHint');
}
}
}
if (!enableDropText && dropTextArea) {
remove(dropTextArea);
}
}
else if (!isNullOrUndefined(this.uploaderOptions) && this.uploaderOptions.dropArea === undefined) {
this.createDropTextHint();
this.dropZoneElement = this.uploadWrapper;
this.setProperties({ dropArea: this.uploadWrapper }, true);
}
this.bindDropEvents();
};
Uploader.prototype.updateDropArea = function () {
if (this.dropArea) {
this.setDropArea();
}
else {
this.dropZoneElement = null;
var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');
if (dropTextArea) {
remove(dropTextArea);
}
}
};
Uploader.prototype.createDropTextHint = function () {
var fileDropArea = this.createElement('span', { className: DROP_AREA });
fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');
this.dropAreaWrapper.appendChild(fileDropArea);
};
Uploader.prototype.updateHTMLAttrToElement = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var pro = _a[_i];
if (wrapperAttr.indexOf(pro) < 0) {
this.element.setAttribute(pro, this.htmlAttributes["" + pro]);
}
}
}
};
Uploader.prototype.updateHTMLAttrToWrapper = function () {
if (!isNullOrUndefined(this.htmlAttributes)) {
for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
var pro = _a[_i];
if (wrapperAttr.indexOf(pro) > -1) {
if (pro === 'class') {
var updatedClassValues = (this.htmlAttributes["" + pro].replace(/\s+/g, ' ')).trim();
if (updatedClassValues !== '') {
addClass([this.uploadWrapper], updatedClassValues.split(' '));
}
}
else if (pro === 'style') {
var uploadStyle = this.uploadWrapper.getAttribute(pro);
uploadStyle = !isNullOrUndefined(uploadStyle) ? (uploadStyle + this.htmlAttributes["" + pro]) :
this.htmlAttributes["" + pro];
this.uploadWrapper.setAttribute(pro, uploadStyle);
}
else {
this.uploadWrapper.setAttribute(pro, this.htmlAttributes["" + pro]);
}
}
}
}
};
Uploader.prototype.setMultipleSelection = function () {
if (this.multiple && !this.element.hasAttribute('multiple')) {
var newAttr = document.createAttribute('multiple');
newAttr.value = 'multiple';
this.element.setAttributeNode(newAttr);
}
else if (!this.multiple) {
this.element.removeAttribute('multiple');
}
};
Uploader.prototype.checkAutoUpload = function (fileData) {
if (this.autoUpload) {
if (this.sequentialUpload) {
/* istanbul ignore next */
this.sequenceUpload(fileData);
}
else {
this.upload(fileData);
}
this.removeActionButtons();
}
else if (!this.actionButtons) {
this.renderActionButtons();
}
this.checkActionButtonStatus();
};
Uploader.prototype.sequenceUpload = function (fileData) {
if (this.filesData.length - fileData.length === 0 ||
this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {
if (this.multiple || this.count < 0) {
++this.count;
}
var isFileListCreated = this.showFileList ? false : true;
if (typeof this.filesData[this.count] === 'object') {
this.isFirstFileOnSelection = false;
this.upload(this.filesData[this.count], isFileListCreated);
if (this.filesData[this.count].statusCode === '0') {
this.sequenceUpload(fileData);
}
}
else {
--this.count;
}
}
};
Uploader.prototype.setCSSClass = function (oldCSSClass) {
var updatedOldCssClass = oldCSSClass;
if (!isNullOrUndefined(oldCSSClass)) {
updatedOldCssClass = (oldCSSClass.replace(/\s+/g, ' ')).trim();
}
if (!isNullOrUndefined(oldCSSClass) && updatedOldCssClass !== '') {
removeClass([this.uploadWrapper], updatedOldCssClass.split(' '));
}
var updatedCssClassValue = this.cssClass;
if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
updatedCssClassValue = (this.cssClass.replace(/\s+/g, ' ')).trim();
}
if (!isNullOrUndefined(this.cssClass) && updatedCssClassValue !== '') {
addClass([this.uploadWrapper], updatedCssClassValue.split(updatedCssClassValue.indexOf(',') > -1 ? ',' : ' '));
}
};
Uploader.prototype.wireEvents = function () {
EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);
EventHandler.add(this.element, 'change', this.onSelectFiles, this);
EventHandler.add(document, 'click', this.removeFocus, this);
this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {
keyAction: this.keyActionHandler.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
if (this.isForm) {
EventHandler.add(this.formElement, 'reset', this.resetForm, this);
}
};
Uploader.prototype.unWireEvents = function () {
EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);
EventHandler.remove(this.element, 'change', this.onSelectFiles);
EventHandler.remove(document, 'click', this.removeFocus);
if (this.isForm) {
EventHandler.remove(this.formElement, 'reset', this.resetForm);
}
if (this.keyboardModule) {
this.keyboardModule.destroy();
}
};
Uploader.prototype.resetForm = function () {
this.clearAll();
};
Uploader.prototype.keyActionHandler = function (e) {
var targetElement = e.target;
switch (e.action) {
case 'enter':
if (e.target === this.clearButton) {
this.clearButtonClick();
}
else if (e.target === this.uploadButton) {
this.uploadButtonClick();
}
else if (e.target === this.browseButton) {
this.browseButtonClick();
}
else if (targetElement.classList.contains(PAUSE_UPLOAD)) {
var metaData = this.getCurrentMetaData(null, e);
metaData.file.statusCode = '4';
metaData.file.status = this.localizedTexts('pauseUpload');
this.abortUpload(metaData, false);
}
else if (targetElement.classList.contains(RESUME_UPLOAD)) {
this.resumeUpload(this.getCurrentMetaData(null, e), e);
}
else if (targetElement.classList.contains(RETRY_ICON)) {
var metaData = this.getCurrentMetaData(null, e);
if (!isNullOrUndefined(metaData)) {
metaData.file.statusCode = '1';
metaData.file.status = this.localizedTexts('readyToUploadMessage');
this.chunkUpload(metaData.file);
}
else {
var target = e.target.parentElement;
var fileData = this.filesData[this.fileList.indexOf(target)];
this.retry(fileData);
}
}
else {
this.removeFiles(e);
if (!targetElement.classList.contains(ABORT_ICON)) {
this.browseButton.focus();
}
}
e.preventDefault();
e.stopPropagation();
break;
}
};
Uploader.prototype.getCurrentMetaData = function (fileInfo, e) {
var fileData;
var targetMetaData;
if (isNullOrUndefined(fileInfo)) {
var target = e.target.parentElement;
fileData = this.filesData[this.fileList.indexOf(target)];
}
else {
fileData = fileInfo;
}
for (var i = 0; i < this.uploadMetaData.length; i++) {
if (this.uploadMetaData[i].file.name === fileData.name) {
targetMetaData = this.uploadMetaData[i];
}
}
return targetMetaData;
};
Uploader.prototype.removeFocus = function () {
if (this.uploadWrapper && this.listParent && this.listParent.querySelector('.' + ICON_FOCUSED)) {
document.activeElement.blur();
this.listParent.querySelector('.' + ICON_FOCUSED).classList.remove(ICON_FOCUSED);
}
};
Uploader.prototype.browseButtonClick = function () {
this.element.click();
};
Uploader.prototype.uploadButtonClick = function () {
if (this.sequentialUpload) {
this.sequenceUpload(this.filesData);
}
else {
this.upload(this.filesData);
}
};
Uploader.prototype.clearButtonClick = function () {
this.clearAll();
/* istanbul ignore next */
if (this.sequentialUpload) {
this.count = -1;
}
this.actionCompleteCount = 0;
};
Uploader.prototype.bindDropEvents = function () {
if (this.dropZoneElement) {
EventHandler.add(this.dropZoneElement, 'drop', this.dropElement, this);
EventHandler.add(this.dropZoneElement, 'dragover', this.dragHover, this);
EventHandler.add(this.dropZoneElement, 'dragleave', this.onDragLeave, this);
EventHandler.add(this.dropZoneElement, 'paste', this.onPasteFile, this);
EventHandler.add(this.dropZoneElement, 'dragenter', this.onDragEnter, this);
}
};
Uploader.prototype.unBindDropEvents = function () {
if (this.dropZoneElement) {
EventHandler.remove(this.dropZoneElement, 'drop', this.dropElement);
EventHandler.remove(this.dropZoneElement, 'dragover', this.dragHover);
EventHandler.remove(this.dropZoneElement, 'dragleave', this.onDragLeave);
EventHandler.remove(this.dropZoneElement, 'dragenter', this.onDragEnter);
}
};
Uploader.prototype.onDragEnter = function (e) {
if (!this.enabled) {
return;
}
this.dropZoneElement.classList.add(DRAG_HOVER);
this.dragCounter = this.dragCounter + 1;
e.preventDefault();
e.stopPropagation();
};
Uploader.prototype.onDragLeave = function () {
if (!this.enabled) {
return;
}
this.dragCounter = this.dragCounter - 1;
if (!this.dragCounter) {
this.dropZoneElement.classList.remove(DRAG_HOVER);
}
};
Uploader.prototype.dragHover = function (e) {
if (!this.enabled) {
return;
}
if (this.dropEffect !== 'Default') {
e.dataTransfer.dropEffect = this.dropEffect.toLowerCase();
}
e.preventDefault();
e.stopPropagation();
};
/* istanbul ignore next */
Uploader.prototype.dropElement = function (e) {
this.dragCounter = 0;
this.dropZoneElement.classList.remove(DRAG_HOVER);
this.onSelectFiles(e);
e.preventDefault();
e.stopPropagation();
};
/* istanbul ignore next */
Uploader.prototype.onPasteFile = function (event) {
var item = event.clipboardData.items;
if (event.type === 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
this.element.files = event.clipboardData.files;
}
if (item.length !== 1 && !this.multiple) {
return;
}
for (var file = 0; file < item.length; file++) {
var pasteFile = [].slice.call(item)[file];
if (!isNullOrUndefined(pasteFile.getAsFile()) && ((pasteFile.kind === 'file') || pasteFile.type.match('^image/'))) {
this.renderSelectedFiles(event, [pasteFile.getAsFile()], false, true);
}
}
};
Uploader.prototype.getSelectedFiles = function (index) {
var data = [];
var liElement = this.fileList[index];
var allFiles = this.getFilesData();
var nameElements = +liElement.getAttribute('data-files-count');
var startIndex = 0;
for (var i = 0; i < index; i++) {
startIndex += (+this.fileList[i].getAttribute('data-files-count'));
}
for (var j = startIndex; j < (startIndex + nameElements); j++) {
data.push(allFiles[j]);
}
return data;
};
Uploader.prototype.removeFiles = function (args) {
if (!this.enabled) {
return;
}
var selectedElement = args.target.parentElement;
var index = this.fileList.indexOf(selectedElement);
var liElement = this.fileList[index];
var formUpload = this.isFormUpload();
var fileData = formUpload ? this.getSelectedFiles(index) : this.getFilesInArray(this.filesData[index]);
if (isNullOrUndefined(fileData)) {
return;
}
if (args.target.classList.contains(ABORT_ICON) && !formUpload) {
fileData[0].statusCode = '5';
if (!isNullOrUndefined(liElement)) {
var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);
createSpinner({ target: spinnerTarget, width: '20px' });
showSpinner(spinnerTarget);
}
if (this.sequentialUpload) {
/* istanbul ignore next */
this.uploadSequential();
}
if (!(liElement.classList.contains(RESTRICT_RETRY))) {
this.checkActionComplete(true);
}
}
else if (!closest(args.target, '.' + SPINNER_PANE)) {
this.remove(fileData, false, false, true, args);
}
if (this.isForm && liElement && liElement.classList.contains(INVALID_FILE)) {
this.element.value = '';
}
this.checkActionButtonStatus();
if (this.actionButtons && this.clearButton && this.uploadWrapper) {
var progressBarElements = this.uploadWrapper.querySelectorAll('.e-upload-progress-bar.e-upload-progress:not(.e-upload-success):not(.e-upload-fails)');
if (progressBarElements.length === 1 && selectedElement.contains(progressBarElements[0])
&& this.clearButton.hasAttribute('disabled')) {
this.clearButton.removeAttribute('disabled');
}
}
};
Uploader.prototype.removeFilesData = function (file, customTemplate) {
var index;
if (customTemplate) {
if (!this.showFileList) {
index = this.filesData.indexOf(file);
this.filesData.splice(index, 1);
}
return;
}
var selectedElement = this.getLiElement(file);
if (isNullOrUndefined(selectedElement)) {
return;
}
this.element.value = '';
detach(selectedElement);
index = this.fileList.indexOf(selectedElement);
this.fileList.splice(index, 1);
this.filesData.splice(index, 1);
if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {
detach(this.listParent);
this.listParent = null;
this.removeActionButtons();
}
if (this.sequentialUpload) {
/* istanbul ignore next */
if (index <= this.count) {
--this.count;
}
}
};
Uploader.prototype.removeUploadedFile = function (file, eventArgs, removeDirectly, custom) {
var _this = this;
var selectedFiles = file;
var ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);
ajax.emitError = false;
var formData = new FormData();
ajax.beforeSend = function (e) {
eventArgs.currentRequest = ajax.httpRequest;
if (!removeDirectly) {
_this.trigger('removing', eventArgs, function (eventArgs) {
if (eventArgs.cancel) {
e.cancel = true;
}
else {
_this.removingEventCallback(eventArgs, formData, selectedFiles, file);
}
});
}
else {
_this.removingEventCallback(eventArgs, formData, selectedFiles, file);
}
};
ajax.onLoad = function (e) {
_this.removeCompleted(e, selectedFiles, custom);
return {};
};
/* istanbul ignore next */
ajax.onError = function (e) {
_this.removeFailed(e, selectedFiles, custom);
return {};
};
ajax.send(formData);
};
Uploader.prototype.removingEventCallback = function (eventArgs, formData, selectedFiles, file) {
/* istanbul ignore next */
var name = this.element.getAttribute('name');
var liElement = this.getLiElement(file);
if (!isNullOrUndefined(liElement) && (!isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON)) ||
!isNullOrUndefined(liElement.querySelector('.' + REMOVE_ICON)))) {
var spinnerTarget = liElement.querySelector('.' + DELETE_ICON) ?
liElement.querySelector('.' + DELETE_ICON) :
liElement.querySelector('.' + REMOVE_ICON);
createSpinner({ target: spinnerTarget, width: '20px' });
showSpinner(spinnerTarget);
}
if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
formData.append(name, selectedFiles.rawFile, selectedFiles.name);
}
else {
formData.append(name, selectedFiles.name);
}
this.updateFormData(formData, eventArgs.customFormData);
};
/* istanbul ignore next */
Uploader.prototype.updateFormData = function (formData, customData) {
if (customData.length > 0 && customData[0]) {
var _loop_1 = function (i) {
var data = customData[i];
// eslint-disable-next-line @typescript-eslint/tslint/config
var value = Object.keys(data).map(function (e) {
return data["" + e];
});
formData.append(Object.keys(data)[0], value);
};
for (var i = 0; i < customData.length; i++) {
_loop_1(i);
}
}
};
/* istanbul ignore next */
Uploader.prototype.updateCustomheader = function (request, currentRequest) {
if (currentRequest.length > 0 && currentRequest[0]) {
var _loop_2 = function (i) {
var data = currentRequest[i];
// eslint-disable-next-line @typescript-eslint/tslint/config
var value = Object.keys(data).map(function (e) {
return data["" + e];
});
request.setRequestHeader(Object.keys(data)[0], value);
};
for (var i = 0; i < currentRequest.length; i++) {
_loop_2(i);
}
}
};
Uploader.prototype.removeCompleted = function (e, files, customTemplate) {
var response = e && e.currentTarget ? this.getResponse(e) : null;
var status = e.target;
if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {
var args = {
e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedSuccessMessage'), '2')
};
this.trigger('success', args);
this.removeFilesData(files, customTemplate);
var index = this.uploadedFilesData.indexOf(files);
this.uploadedFilesData.splice(index, 1);
this.trigger('change', { files: this.uploadedFilesData });
}
else {
this.removeFailed(e, files, customTemplate);
}
};
Uploader.prototype.removeFailed = function (e, files, customTemplate) {
var response = e && e.currentTarget ? this.getResponse(e) : null;
var args = {
e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedFailedMessage'), '0')
};
if (!customTemplate) {
var index = this.filesData.indexOf(files);
var rootElement = this.fileList[index];
if (rootElement) {
rootElement.classList.remove(UPLOAD_SUCCESS);
rootElement.classList.add(UPLOAD_FAILED);
var statusElement = rootElement.querySelector('.' + STATUS);
if (statusElement) {
statusElement.classList.remove(UPLOAD_SUCCESS);
statusElement.classList.add(UPLOAD_FAILED);
}
}
this.checkActionButtonStatus();
}
this.trigger('failure', args);
var liElement = this.getLiElement(files);
/* istanbul ignore next */
if (!isNullOrUndefined(liElement) && !isNullOrUnde