@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,314 lines (1,080 loc) • 104 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1516);
/***/ }),
/***/ 3:
/***/ (function(module, exports) {
module.exports = function() { throw new Error("define cannot be used indirect"); };
/***/ }),
/***/ 1051:
/***/ (function(module, exports) {
module.exports = require("./kendo.core");
/***/ }),
/***/ 1060:
/***/ (function(module, exports) {
module.exports = require("jquery");
/***/ }),
/***/ 1516:
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(jQuery) {(function(f, define) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1051) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (f), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
})(function() {
var __meta__ = { // jshint ignore:line
id: "upload",
name: "Upload",
category: "web",
description: "The Upload widget uses progressive enhancement to deliver the best possible uploading experience to users.",
depends: [ "core" ]
};
(function($, undefined) {
var kendo = window.kendo,
Widget = kendo.ui.Widget,
antiForgeryTokens = kendo.antiForgeryTokens,
logToConsole = kendo.logToConsole,
rFileExtension = /\.([^\.]+)$/,
NS = ".kendoUpload",
SELECT = "select",
UPLOAD = "upload",
SUCCESS = "success",
ERROR = "error",
COMPLETE = "complete",
CANCEL = "cancel",
CLEAR = "clear",
PAUSE = "pause",
RESUME = "resume",
PROGRESS = "progress",
REMOVE = "remove",
VALIDATIONERRORS = "validationErrors",
INVALIDMAXFILESIZE = "invalidMaxFileSize",
INVALIDMINFILESIZE = "invalidMinFileSize",
INVALIDFILEEXTENSION = "invalidFileExtension",
PROGRESSHIDEDELAY = 1000,
PROGRESSHIDEDURATION = 2000,
FOCUS_STATE = "k-state-focused",
TABINDEX = "tabindex";
var headerStatusIcon = {
loading: "k-i-upload",
warning: "k-i-warning",
success: "k-i-check"
};
var Upload = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.name = element.name;
that.multiple = that.options.multiple;
that.directory = that.options.directory;
that.localization = that.options.localization;
var activeInput = that.element;
that.wrapper = activeInput.closest(".k-upload");
if (that.wrapper.length === 0) {
that.wrapper = that._wrapInput(activeInput);
}
that._activeInput(activeInput);
that.toggle(that.options.enabled);
var ns = that._ns = NS + "-" + kendo.guid();
activeInput.closest("form")
.on("submit" + ns, that._onParentFormSubmit.bind(that))
.on("reset" + ns, that._onParentFormReset.bind(that));
that._initUploadModule();
that._toggleDropZone();
that.wrapper
.on("click", ".k-upload-action", that._onFileAction.bind(that))
.on("click", ".k-clear-selected", that._onClearSelected.bind(that))
.on("click", ".k-upload-selected", that._onUploadSelected.bind(that))
.on("keydown", that._onKeyDown.bind(that))
.on("focusout", that._focusout.bind(that));
if (that.element.val()) {
that._onInputChange({ target: that.element });
}
},
events: [
SELECT,
UPLOAD,
SUCCESS,
ERROR,
COMPLETE,
CANCEL,
CLEAR,
PROGRESS,
REMOVE,
PAUSE,
RESUME
],
options: {
name: "Upload",
enabled: true,
multiple: true,
directory: false,
showFileList: true,
template: "",
files: [],
async: {
autoRetryAfter: 0,
bufferChunkSize: 10000000,
maxAutoRetries: 1,
removeVerb: "POST",
autoUpload: true,
withCredentials: true,
accept: "*/*; q=0.5, application/json",
useArrayBuffer: false
},
localization: {
"select": "Select files...",
"cancel": "Cancel",
"retry": "Retry",
"remove": "Remove",
"pause": "Pause",
"resume": "Resume",
"clearSelectedFiles": "Clear",
"uploadSelectedFiles": "Upload",
"dropFilesHere": "Drop files here to upload",
"invalidFiles": "Invalid file(s). Please check file upload requirements.",
"statusUploading": "uploading",
"statusUploaded": "uploaded",
"statusWarning": "warning",
"statusFailed": "failed",
"headerStatusUploading": "Uploading...",
"headerStatusPaused": "Paused",
"headerStatusUploaded": "Done",
"uploadSuccess": "File(s) uploaded successfully.",
"uploadFail": "File(s) failed to upload.",
"invalidMaxFileSize": "File size too large.",
"invalidMinFileSize": "File size too small.",
"invalidFileExtension": "File type not allowed."
},
validation: {
allowedExtensions: [],
maxFileSize: 0,
minFileSize: 0
},
dropZone: ""
},
_initUploadModule: function() {
var that = this,
options = that.options;
if (options.async.saveUrl) {
that._module = that._supportsFormData() ?
new formDataUploadModule(that) :
new iframeUploadModule(that);
that._async = true;
var initialFiles = options.files;
if (initialFiles.length > 0) {
that._renderInitialFiles(initialFiles);
}
} else {
that._module = new syncUploadModule(that);
}
},
setOptions: function(options) {
var that = this,
activeInput = that.element;
$(that.options.dropZone).off(that._ns);
Widget.fn.setOptions.call(that, options);
that.multiple = that.options.multiple;
that.directory = that.options.directory;
activeInput.attr("multiple", that._supportsMultiple() ? that.multiple : false);
if (that.directory) {
activeInput.attr("webkitdirectory", that.directory);
activeInput.attr("directory", that.directory);
}
that.toggle(that.options.enabled);
that._initUploadModule();
that._toggleDropZone();
},
enable: function(enable) {
enable = typeof (enable) === "undefined" ? true : enable;
this.toggle(enable);
},
disable: function() {
this.toggle(false);
},
toggle: function(enable) {
enable = typeof (enable) === "undefined" ? enable : !enable;
this.wrapper.toggleClass("k-state-disabled", enable);
this.element.prop("disabled", enable);
},
focus: function() {
this.element.trigger("focus");
},
destroy: function() {
var that = this;
var customDropZone = $(that.options.dropZone);
$(document)
.add($(".k-dropzone", that.wrapper))
.add(that.wrapper.closest("form"))
.off(that._ns);
if (customDropZone.length > 0) {
customDropZone.off(that._ns);
}
$(that.element).off(NS);
Widget.fn.destroy.call(that);
},
pause: function(fileEntry) {
this._module.onPause({ target: $(fileEntry, this.wrapper) });
var pauseIcon = fileEntry.find(".k-i-pause-sm");
pauseIcon.removeClass("k-i-pause-sm").addClass("k-i-play-sm").attr("title", this.localization.resume);
$(pauseIcon).parent().attr("aria-label", this.localization.resume);
},
resume: function(fileEntry) {
this._module.onResume({ target: $(fileEntry, this.wrapper) });
var playIcon = fileEntry.find(".k-i-play-sm");
playIcon.removeClass("k-i-play-sm").addClass("k-i-pause-sm").attr("title", this.localization.pause);
$(playIcon).parent().attr("aria-label", this.localization.pause);
},
upload: function() {
var that = this;
that._module.onSaveSelected();
},
getFiles: function() {
var that = this;
var filesData;
var allFiles = [];
var listItems = that.wrapper.find(".k-file");
for (var i = 0; i < listItems.length; i++) {
filesData = $(listItems[i]).data("fileNames");
if (filesData) {
for (var j = 0; j < filesData.length; j++) {
allFiles.push(filesData[j]);
}
}
}
return allFiles;
},
clearAllFiles: function() {
var that = this;
var files = that.wrapper.find(".k-file");
files.each(function(index, file) {
that._removeFileByDomElement(file, false);
});
},
removeAllFiles: function() {
var that = this;
var files = that.wrapper.find(".k-file");
files.each(function(index, file) {
that._removeFileByDomElement(file, true);
});
},
removeFileByUid: function(uid) {
this._removeFileByUid(uid, true);
},
clearFileByUid: function(uid) {
this._removeFileByUid(uid, false);
},
_removeFileByUid: function(uid, shouldSendRemoveRequest) {
var that = this;
var fileEntry;
if (typeof uid !== 'string') { return; }
fileEntry = $('.k-file[' + kendo.attr('uid') + '="' + uid + '"]', that.wrapper);
if (fileEntry.length > 0) {
that._removeFileByDomElement(fileEntry, shouldSendRemoveRequest);
}
},
clearFile: function(callback) {
this._removeFile(callback, false);
},
removeFile: function(callback) {
this._removeFile(callback, true);
},
_removeFile: function(callback, shouldSendRemoveRequest) {
var that = this;
var files = that.wrapper.find(".k-file");
var fileData;
if (typeof callback === "function") {
files.each(function(index, file) {
fileData = $(file).data("fileNames");
if (callback(fileData)) {
that._removeFileByDomElement(file, shouldSendRemoveRequest);
}
});
}
},
_removeFileByDomElement: function(fileEntry, shouldSendRemoveRequest) {
var that = this;
var fileData = {
target: $(fileEntry, that.wrapper)
};
var allFiles;
if (that.options.async.saveUrl) {
if ($(fileEntry).hasClass("k-file-progress")) {
that._module.onCancel(fileData);
} else {
that._module.onRemove(fileData, {}, shouldSendRemoveRequest);
}
allFiles = $(".k-file", that.wrapper);
if (allFiles.length === 0) {
that._hideHeaderUploadstatus();
} else {
that._updateHeaderUploadStatus();
}
} else {
that._module.onRemove(fileData, {}, shouldSendRemoveRequest);
}
},
_addInput: function(sourceInput) {
//check if source input is a DOM element. Required for some unit tests
if (!sourceInput[0].nodeType) {
return;
}
var that = this,
input = sourceInput.clone().val("");
input
.insertAfter(that.element)
.data("kendo" + that.options.prefix + that.options.name, that);
$(that.element)
.hide()
.attr(TABINDEX, "-1")
.removeAttr("id")
.off(NS);
that._activeInput(input);
that.element.trigger("focus");
},
_activeInput: function(input) {
var that = this,
wrapper = that.wrapper;
that.element = input;
if (that.directory) {
input.attr("webkitdirectory", that.directory);
input.attr("directory", that.directory);
}
input
.attr("multiple", that._supportsMultiple() ? that.multiple : false)
.attr("autocomplete", "off")
.on("click" + NS, function(e) {
if (wrapper.hasClass("k-state-disabled")) {
e.preventDefault();
}
})
.on("focus" + NS, function() {
$(this).parent().addClass(FOCUS_STATE);
})
.on("blur" + NS, function() {
$(this).parent().removeClass(FOCUS_STATE);
})
.on("change" + NS, that._onInputChange.bind(that));
},
_adjustFocusState: function(focusedItem, toFocus) {
focusedItem.removeClass(FOCUS_STATE);
focusedItem.attr(TABINDEX, -1);
toFocus.addClass(FOCUS_STATE);
toFocus.attr(TABINDEX, 0);
},
_arrowKeyNavigation: function(e, key, focusedItem) {
var that = this,
kendoKeys = kendo.keys,
toFocus;
if (key === kendoKeys.DOWN) {
e.preventDefault();
e.stopPropagation();
toFocus = that.wrapper.find(".k-upload-files .k-file").first();
if (focusedItem.length > 0) {
if (focusedItem.hasClass("k-upload-action")) {
focusedItem.removeClass(FOCUS_STATE);
focusedItem = focusedItem.closest(".k-file");
}
toFocus = focusedItem.next();
}
that._adjustFocusState(focusedItem, toFocus);
if (!toFocus || toFocus.length === 0) {
toFocus = that.wrapper.find(".k-clear-selected");
}
} else if (key === kendoKeys.UP) {
e.preventDefault();
e.stopPropagation();
toFocus = that.wrapper.find(".k-upload-files .k-file:last");
if (focusedItem.length > 0) {
if (focusedItem.hasClass("k-upload-action")) {
focusedItem.removeClass(FOCUS_STATE);
focusedItem = focusedItem.closest(".k-file");
}
toFocus = focusedItem.prev();
}
that._adjustFocusState(focusedItem, toFocus);
} else if (key === kendoKeys.RIGHT) {
if (focusedItem.hasClass("k-upload-action")) {
toFocus = focusedItem.next(".k-upload-action");
if (!toFocus || toFocus.length === 0) {
toFocus = focusedItem.parent().find(".k-upload-action:first");
}
} else if (focusedItem.length > 0) {
toFocus = focusedItem.find(".k-upload-action:first");
}
if (toFocus && toFocus.length > 0) {
focusedItem.removeClass(FOCUS_STATE);
toFocus.addClass(FOCUS_STATE);
}
} else if (key === kendoKeys.LEFT) {
if (focusedItem.hasClass("k-upload-action")) {
toFocus = focusedItem.prev(".k-upload-action");
if (!toFocus || toFocus.length === 0) {
toFocus = focusedItem.parent().find(".k-upload-action:last");
}
} else if (focusedItem.length > 0) {
toFocus = focusedItem.find(".k-upload-action:last");
}
if (toFocus && toFocus.length > 0) {
focusedItem.removeClass(FOCUS_STATE);
toFocus.addClass(FOCUS_STATE);
}
}
if ((!toFocus || toFocus.length === 0) && (key === kendoKeys.UP || key === kendoKeys.DOWN)) {
toFocus = that.element;
}
if (toFocus && toFocus.length > 0) {
that._preventFocusRemove = true;
toFocus.trigger("focus");
}
},
_asyncCommandKeyNavigation: function(key, focusedItem, eventArgs) {
var that = this,
kendoKeys = kendo.keys,
fileEntry = $(focusedItem, that.wrapper);
that._retryClicked = false;
if (key === kendoKeys.ESC && focusedItem.find(".k-i-cancel").length > 0) {
that.trigger(CANCEL, eventArgs);
that._module.onCancel({ target: fileEntry });
that._checkAllComplete();
that._updateHeaderUploadStatus();
that._preventFocusRemove = true;
that.element.trigger("focus");
} else if (key === kendoKeys.SPACEBAR) {
if (focusedItem.find(".k-i-pause-sm").length > 0) {
that.trigger(PAUSE, eventArgs);
that.pause(focusedItem);
that._updateHeaderUploadStatus();
} else if (focusedItem.find(".k-i-play-sm").length > 0) {
that.trigger(RESUME, eventArgs);
that.resume(focusedItem);
}
} else if (key === kendoKeys.ENTER && !focusedItem.is(".k-file-progress, .k-file-success, .k-file-invalid")) {
if (that.options.async.chunkSize && !that.options.async.concurrent && $('.k-file-progress', that.wrapper).length > 0) {
return;
}
$(".k-i-warning", focusedItem).remove();
$(".k-progressbar", focusedItem).finish().show();
if (!that._module.metaData[fileEntry.data("uid")]) {
that._module.prepareChunk(fileEntry);
}
that._module.onRetry({ target: fileEntry });
that._retryClicked = true;
}
},
_commandKeyNavigation: function(key, focusedItem) {
var that = this,
kendoKeys = kendo.keys,
files = focusedItem.data("fileNames"),
hasValidationErrors = that._filesContainValidationErrors(files),
eventArgs = {
files: files,
headers: {}
};
if (key === kendoKeys.DELETE) {
if (!that.trigger(REMOVE, eventArgs)) {
that._module.onRemove({ target: $(focusedItem, that.wrapper) }, eventArgs, !hasValidationErrors);
that._preventFocusRemove = true;
that.element.trigger("focus");
}
} else if (key === kendoKeys.TAB) {
focusedItem.removeClass(FOCUS_STATE);
focusedItem.attr(TABINDEX, -1);
} else if (!!that.options.async.saveUrl) {
that._asyncCommandKeyNavigation(key, focusedItem, eventArgs);
}
},
_focusout: function() {
var focusedItem = this.wrapper.find(".k-upload-files .k-file." + FOCUS_STATE);
if (!this._preventFocusRemove) {
focusedItem.removeClass(FOCUS_STATE);
focusedItem.attr(TABINDEX, -1);
} else {
this._preventFocusRemove = false;
}
},
_onKeyDown: function(e) {
var that = this,
focusedItem = that.wrapper.find(".k-upload-files .k-file." + FOCUS_STATE + "," + ".k-upload-action." + FOCUS_STATE),
kendoKeys = kendo.keys,
commandKeys = [kendoKeys.DELETE, kendoKeys.ESC, kendoKeys.ENTER, kendoKeys.SPACEBAR, kendoKeys.TAB],
key = e.keyCode;
if (key === kendoKeys.DOWN || key === kendoKeys.UP || key === kendoKeys.LEFT || key === kendoKeys.RIGHT) {
that._arrowKeyNavigation(e, key, focusedItem);
} else if (focusedItem.length > 0 && focusedItem.hasClass("k-file") && commandKeys.indexOf(key) > -1 && !that.wrapper.hasClass("k-state-disabled")) {
if (key === kendoKeys.SPACEBAR) {
e.preventDefault();
e.stopPropagation();
}
that._commandKeyNavigation(key, focusedItem);
}
},
_onInputChange: function(e) {
var that = this;
var input = $(e.target);
var files = assignGuidToFiles(that._inputFiles(input), that._isAsyncNonBatch());
validateFiles(files, that.options.validation);
var prevented = that.trigger(SELECT, { files: files });
if (prevented) {
that._addInput(input);
input.remove();
} else {
that._module.onSelect({ target: input }, files);
}
},
_readDirectory: function(item) {
var deferred = new $.Deferred();
var dirReader = item.createReader();
var allFolderFiles = [];
var readEntries = function() {
dirReader.readEntries(function(entries) {
if (!entries.length) {
deferred.resolve(allFolderFiles);
} else {
allFolderFiles = allFolderFiles.concat(entries);
readEntries();
}
}, deferred.reject);
};
readEntries();
return deferred.promise();
},
_readFile: function(item) {
var that = this;
var fullpath = item.fullPath;
item.file(function(file) {
file.relativePath = fullpath.slice(1);
that.droppedFolderFiles.push(file);
that.droppedFolderCounter --;
if (that.droppedFolderCounter === 0) {
setTimeout(function() {
if (that.droppedFolderCounter === 0) {
if (that.droppedFolderFiles.length) {
that._proceedDroppedItems(that.droppedFolderFiles);
that.droppedFolderFiles = [];
}
}
},0);
}
}, function() {
logToConsole("File error.");
});
},
_traverseFileTree: function(item, skipCounter) {
var that = this;
if (!skipCounter) {
that.droppedFolderCounter--;
}
this._readDirectory(item).then(function(items) {
that.droppedFolderCounter += items.length;
for (var i = 0; i < items.length; i++) {
if (items[i].isFile) {
that._readFile(items[i]);
} else if (items[i].isDirectory) {
that._traverseFileTree(items[i]);
}
}
});
},
_onDrop: function(e) {
var dt = e.originalEvent.dataTransfer;
var that = this;
var droppedFiles = dt.files;
var length;
stopEvent(e);
if (that.options.directoryDrop && dt.items) {
length = dt.items.length;
that.droppedFolderCounter = 0;
that.droppedFolderFiles = [];
for (var i = 0; i < length; i++) {
if (dt.items[i].webkitGetAsEntry) {
var entry = dt.items[i].webkitGetAsEntry();
if (entry.isDirectory) {
that._traverseFileTree(entry, true);
} else if (entry.isFile) {
that.droppedFolderFiles.push(dt.files[i]);
}
} else {
that._proceedDroppedItems(droppedFiles);
}
}
} else {
that._proceedDroppedItems(droppedFiles);
}
},
_proceedDroppedItems: function(droppedFiles) {
var that = this;
var files = assignGuidToFiles(getAllFileInfo(droppedFiles), that._isAsyncNonBatch());
if (droppedFiles.length > 0 && !that.wrapper.hasClass("k-state-disabled")) {
if (!that.multiple && files.length > 1) {
files.splice(1, files.length - 1);
}
validateFiles(files, that.options.validation);
var prevented = that.trigger(SELECT, { files: files });
if (!prevented) {
that._module.onSelect({ target: $(".k-dropzone", that.wrapper) }, files);
}
}
},
_filesContainValidationErrors: function(files) {
var hasErrors = false;
$(files).each(function(index, file) {
if (file[VALIDATIONERRORS] && file[VALIDATIONERRORS].length > 0) {
hasErrors = true;
return false;
}
});
return hasErrors;
},
_isAsyncNonBatch: function() {
return (this._async && !this.options.async.batch) || false;
},
_renderInitialFiles: function(files) {
var that = this;
var idx = 0;
files = assignGuidToFiles(files, true);
for (idx = 0; idx < files.length; idx++) {
var currentFile = files[idx];
var fileEntry = that._enqueueFile(currentFile.name, { fileNames: [ currentFile ] });
fileEntry.addClass("k-file-success").data("files", [ files[idx] ]);
if (that._supportsRemove()) {
that._fileAction(fileEntry, REMOVE);
}
}
},
_prepareTemplateData: function(name, data) {
var filesData = data.fileNames,
templateData = {},
totalSize = 0,
idx = 0;
for (idx = 0; idx < filesData.length; idx++) {
totalSize += filesData[idx].size;
}
templateData.name = name;
templateData.size = totalSize;
templateData.files = data.fileNames;
return templateData;
},
_prepareDefaultSingleFileEntryTemplate: function(data) {
var that = this;
var file = data.fileNames[0];
var fileSize = getTotalFilesSizeMessage(data.fileNames);
var fileGroup = kendo.getFileGroup(file.extension, true);
var errors = file[VALIDATIONERRORS];
var template = "";
if (errors && errors.length > 0) {
template += "<li class='k-file k-file-invalid'><div class='k-progressbar k-hidden'><span class='k-progress'></span></div>" +
"<span class='k-file-invalid-group-wrapper'>" +
"<span class='k-file-group k-icon k-i-" + fileGroup + "'></span>" +
"<span class='k-file-state'></span>" +
"</span>" +
"<span class='k-file-name-size-wrapper'>" +
"<span class='k-file-name k-file-name-invalid' title='" + file.name + "'>" + file.name + "</span>" +
"<span class='k-file-validation-message k-text-error'>" + that.localization[errors[0]] + "</span>" +
"</span>";
} else {
template += "<li class='k-file'><div class='k-progressbar k-hidden'><span class='k-progress'></span></div>" +
"<span class='k-file-group-wrapper'>" +
"<span class='k-file-group k-icon k-i-" + fileGroup + "'></span>" +
"<span class='k-file-state'></span>" +
"</span>" +
"<span class='k-file-name-size-wrapper'><span class='k-file-name' title='" + file.name + "'>" + file.name + "</span>" +
"<span class='k-file-size'>" + fileSize + "</span></span>";
}
template += "<strong class='k-upload-status'></strong>";
return $(template);
},
_prepareDefaultMultipleFileEntriesTemplate: function(data) {
var that = this;
var files = data.fileNames;
var filesHaveValidationErrors = that._filesContainValidationErrors(files);
var totalFileSize = getTotalFilesSizeMessage(files);
var template = "";
var i, currentFile;
if (filesHaveValidationErrors) {
template += "<li class='k-file k-file-invalid'><div class='k-progressbar k-hidden'><span class='k-progress'></span></div>" +
"<span class='k-multiple-files-invalid-group-wrapper'>" +
"<span class='k-file-group k-icon k-i-files'></span>";
} else {
template += "<li class='k-file'><div class='k-progressbar k-hidden'><span class='k-progress'></span></div>" +
"<span class='k-multiple-files-group-wrapper'>" +
"<span class='k-file-group k-icon k-i-files'></span>";
}
template += "<span class='k-file-state'></span></span>";
files.sort(function(a, b) {
if (a[VALIDATIONERRORS]) { return -1; }
if (b[VALIDATIONERRORS]) { return 1; }
return 0;
});
template += "<span class='k-multiple-files-wrapper'>";
for (i = 0; i < files.length; i++) {
currentFile = files[i];
var fileSize = getTotalFilesSizeMessage([currentFile]);
template += "<span class='k-file-name-size-wrapper'>";
if (currentFile[VALIDATIONERRORS] && currentFile[VALIDATIONERRORS].length > 0) {
template += "<span class='k-file-name k-file-name-invalid' title='" + currentFile.name + "'>" + currentFile.name + "</span>";
} else {
template += "<span class='k-file-name' title='" + currentFile.name + "'>" + currentFile.name + "</span>";
}
template += "<span class='k-file-size'>" + fileSize + "</span></span>";
}
if (filesHaveValidationErrors) {
template += "<span class='k-file-validation-message k-text-error'>" + that.localization.invalidFiles + "</span>";
} else {
template += "<span class='k-file-information'>Total: " + files.length + " files, " + totalFileSize + "</span>";
}
template += "</span><strong class='k-upload-status'></strong>";
return $(template);
},
_enqueueFile: function(name, data) {
var that = this;
var existingFileEntries;
var fileEntry;
var fileUid = data.fileNames[0].uid;
var fileList = $(".k-upload-files", that.wrapper);
var options = that.options;
var template = options.template;
var templateData;
var removeEventArgs;
if (fileList.length === 0) {
fileList = $("<ul class='k-upload-files k-reset'></ul>").appendTo(that.wrapper);
if (!that.options.showFileList) {
fileList.hide();
}
that.wrapper.removeClass("k-upload-empty");
}
existingFileEntries = $(".k-file", fileList);
if (!template) {
if (data.fileNames.length === 1) {
fileEntry = that._prepareDefaultSingleFileEntryTemplate(data);
} else {
fileEntry = that._prepareDefaultMultipleFileEntriesTemplate(data);
}
} else {
templateData = that._prepareTemplateData(name, data);
template = kendo.template(template);
fileEntry = $("<li class='k-file'>" + template(templateData) + "</li>");
fileEntry.find(".k-upload-action").addClass("k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base");
that.angular("compile", function() {
return {
elements: fileEntry,
data: [ templateData ]
};
});
}
fileEntry
.attr(kendo.attr("uid"), fileUid)
.appendTo(fileList)
.data(data);
if (!that._async) {
$(".k-progress", fileEntry).width('100%');
}
if (!that.multiple && existingFileEntries.length > 0) {
removeEventArgs = {
files: existingFileEntries.data("fileNames"),
headers: {}
};
if (!that.trigger(REMOVE, removeEventArgs)) {
that._module.onRemove({ target: $(existingFileEntries, that.wrapper) }, removeEventArgs);
}
}
return fileEntry;
},
_removeFileEntry: function(fileEntry) {
var that = this;
var fileList = fileEntry.closest(".k-upload-files");
var allFiles, allCompletedFiles, allInvalidFiles;
fileEntry.remove();
allFiles = $(".k-file", fileList);
allCompletedFiles = $(".k-file-success, .k-file-error", fileList);
allInvalidFiles = $(".k-file-invalid", fileList);
if (allCompletedFiles.length === allFiles.length || allInvalidFiles.length === allFiles.length) {
this._hideActionButtons();
}
if (allFiles.length === 0) {
fileList.remove();
that.wrapper.addClass("k-upload-empty");
that._hideHeaderUploadstatus();
} else {
that._updateHeaderUploadStatus();
}
},
_fileAction: function(fileElement, actionKey, skipClear) {
var classDictionary = { remove: "k-i-x", cancel: "k-i-cancel", retry: "k-i-retry", pause: "k-i-pause-sm" };
var iconsClassDictionary = { remove: "k-i-close", cancel: "k-i-cancel", retry: "k-i-reload-sm", pause: "k-i-pause-sm" };
var firstActionButton;
if (!classDictionary.hasOwnProperty(actionKey)) {
return;
}
if (!skipClear) {
this._clearFileAction(fileElement);
}
if (!this.options.template) {
if (!skipClear) {
fileElement.find(".k-upload-status .k-upload-action").remove();
}
fileElement.find(".k-upload-status").append(
this._renderAction(classDictionary[actionKey], this.localization[actionKey], iconsClassDictionary[actionKey])
);
} else {
firstActionButton = fileElement.find(".k-upload-action").first();
if (!firstActionButton.find(".k-icon").length) {
firstActionButton
.addClass("k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button")
.append("<span class='k-button-icon k-icon " + iconsClassDictionary[actionKey] + " " + classDictionary[actionKey] +
"' title='" + this.localization[actionKey] + "'" +
"aria-label='" + this.localization[actionKey] + "'></span>")
.show();
} else if (firstActionButton.next(".k-upload-action").length) {
firstActionButton.next(".k-upload-action")
.addClass("k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button")
.append("<span class='k-button-icon k-icon " + iconsClassDictionary[actionKey] + " " + classDictionary[actionKey] +
"' title='" + this.localization[actionKey] + "'" +
"aria-label='" + this.localization[actionKey] + "'></span>")
.show();
}
}
},
_fileState: function(fileEntry, stateKey) {
var localization = this.localization,
states = {
uploading: {
text: localization.statusUploading
},
uploaded: {
text: localization.statusUploaded
},
failed: {
text: localization.statusFailed
}
},
currentState = states[stateKey];
if (currentState) {
$("span.k-file-state", fileEntry).text(currentState.text);
}
},
_renderAction: function(actionClass, actionText, iconClass) {
if (actionClass !== "") {
return $(
"<button type='button' class='k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action' aria-label='" + actionText + "' tabindex='-1'>" +
"<span class='k-button-icon k-icon " + iconClass + " " + actionClass + "' title='" + actionText + "'></span>" +
"</button>"
).on("focus", function() { $(this).addClass(FOCUS_STATE); })
.on("blur", function() { $(this).removeClass(FOCUS_STATE); });
}
else {
return $(
"<button type='button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>" +
'<span class="k-button-text">' +
actionText +
'</span>' +
"</button>"
);
}
},
_clearFileAction: function(fileElement) {
$(".k-upload-action", fileElement).empty().hide();
},
_onFileAction: function(e) {
var that = this;
if (!that.wrapper.hasClass("k-state-disabled")) {
var button = $(e.target).closest(".k-upload-action");
var icon = button.find(".k-icon");
var fileEntry = button.closest(".k-file");
var files = fileEntry.data("fileNames");
var hasValidationErrors = that._filesContainValidationErrors(files);
var eventArgs = {
files: files,
headers: {}
};
that._retryClicked = false;
if (icon.hasClass("k-i-x")) {
if (!that.trigger(REMOVE, eventArgs)) {
that._module.onRemove({ target: $(fileEntry, that.wrapper) }, eventArgs, !hasValidationErrors);
that.element.trigger("focus");
}
} else if (icon.hasClass("k-i-cancel")) {
that.trigger(CANCEL, eventArgs);
that._module.onCancel({ target: $(fileEntry, that.wrapper) });
that._checkAllComplete();
that._updateHeaderUploadStatus();
that.element.trigger("focus");
} else if (icon.hasClass("k-i-pause-sm")) {
that.trigger(PAUSE, eventArgs);
that.pause(fileEntry);
that._updateHeaderUploadStatus();
} else if (icon.hasClass("k-i-play-sm")) {
that.trigger(RESUME, eventArgs);
that.resume(fileEntry);
} else if (icon.hasClass("k-i-retry")) {
$(".k-i-warning", fileEntry).remove();
$(".k-progressbar", fileEntry).finish().show();
that._module.onRetry({ target: $(fileEntry, that.wrapper) });
that._retryClicked = true;
}
fileEntry.addClass(FOCUS_STATE);
}
return false;
},
_onUploadSelected: function() {
var that = this;
var wrapper = that.wrapper;
if (!wrapper.hasClass("k-state-disabled")) {
this._module.onSaveSelected();
}
return false;
},
_onClearSelected: function() {
var that = this;
var wrapper = that.wrapper;
var clearEventArgs = { };
if (!wrapper.hasClass("k-state-disabled") && !that.trigger(CLEAR, clearEventArgs)) {
that.clearAllFiles();
}
return false;
},
_onFileProgress: function(e, percentComplete) {
var progressPct;
if (percentComplete > 100) {
percentComplete = 100;
}
$(".k-progressbar", e.target).removeClass('k-hidden');
if (!this.options.template) {
progressPct = $(".k-upload-pct", e.target);
if (progressPct.length === 0) {
$(".k-upload-status", e.target).prepend("<span class='k-upload-pct'></span>");
}
if (percentComplete !== 100) {
$(".k-upload-pct", e.target).text(percentComplete + "%");
} else {
$(".k-upload-pct", e.target).remove();
}
$(".k-progress", e.target).width(percentComplete + "%");
} else {
$(".k-progress", e.target).width(percentComplete + "%");
}
this.trigger(PROGRESS, {
files: getFileEntry(e).data("fileNames"),
percentComplete: percentComplete
});
},
_onUploadSuccess: function(e, response, xhr) {
var that = this;
var fileEntry = getFileEntry(e);
var files = fileEntry.data("fileNames");
var fileInfo = fileEntry.find('.k-file-information');
var fileSize = fileEntry.find('.k-file-size');
var prevented = that.trigger(SUCCESS, {
files: fileEntry.data("fileNames"),
response: response,
operation: "upload",
XMLHttpRequest: xhr
});
if (prevented) {
that._setUploadErrorState(fileEntry);
} else {
that._fileState(fileEntry, "uploaded");
fileEntry.removeClass('k-file-progress').addClass('k-file-success');
if (fileInfo.length > 0) {
fileInfo.addClass('k-hidden')
.after('<span class="k-file-validation-message k-text-success">' + files.length + ' ' + that.localization.uploadSuccess + '</span>');
} else if (fileSize.length > 0) {
fileSize.addClass('k-hidden')
.after('<span class="k-file-validation-message k-text-success">' + that.localization.uploadSuccess + '</span>');
}
that._updateHeaderUploadStatus();
if (that._supportsRemove()) {
that._fileAction(fileEntry, REMOVE);
} else {
that._clearFileAction(fileEntry);
}
}
that._hideUploadProgress(fileEntry);
that._checkAllComplete();
},
_onUploadError: function(e, xhr) {
var that = this;
var module = that._module;
var fileEntry = getFileEntry(e);
var fileUid = fileEntry.data("uid");
that._setUploadErrorState(fileEntry);
that.trigger(ERROR, {
operation: "upload",
files: fileEntry.data("fileNames"),
XMLHttpRequest: xhr
});
logToConsole("Server response: " + xhr.responseText);
if (!that.options.async.chunkSize) {
that._hideUploadProgress(fileEntry);
} else {
if (module._decreasePosition) {
module._decreasePosition(fileUid);
}
}
that._checkAllComplete();
if (this.options.async.autoRetryAfter) {
this._autoRetryAfter(fileEntry);
}
},
_autoRetryAfter: function(fileEntry) {
var that = this;
var retries = this._module.retries;
if (!retries) {
return;
}
if (!retries[fileEntry.data("uid")]) {
retries[fileEntry.data("uid")] = 1;
}
if (retries[fileEntry.data("uid")] <= this.options.async.maxAutoRetries) {
retries[fileEntry.data("uid")]++;
setTimeout(function() {
that._module.performUpload(fileEntry);
},this.options.async.autoRetryAfter);
}
},
_setUploadErrorState: function(fileEntry) {
var that = this,
uploadPercentage,
files = fileEntry.data("fileNames"),
fileInfo = fileEntry.find('.k-file-information'),
fileSize = fileEntry.find('.k-file-size');
that._fileState(fileEntry, "failed");
fileEntry.removeClass('k-file-progress').addClass('k-file-error');
if (fileInfo.length > 0) {
fileInfo.addClass('k-hidden')
.after('<span class="k-file-validation-message k-text-error">' + files.length + ' ' + that.localization.uploadFail + '</span>');
} else if (fileSize.length > 0) {
fileSize.addClass('k-hidden')
.after('<span class="k-file-validation-message k-text-error">' + that.localization.uploadFail + '</span>');
}
tha