/*! * jQuery Upload File Plugin * version: 4.0.11 * @requires jQuery v1.5 or later & form plugin * Copyright (c) 2013 Ravishanker Kusuma * http://hayageek.com/ */ (function ($) { if($.fn.ajaxForm == undefined) { $.getScript(("https:" == document.location.protocol ? "https://" : "http://") + "malsup.github.io/jquery.form.js"); } var feature = {}; feature.fileapi = $("").get(0).files !== undefined; feature.formdata = window.FormData !== undefined; $.fn.uploadFile = function (options) { // This is the easiest way to have default options. var s = $.extend({ // These are the defaults. url: "", method: "POST", enctype: "multipart/form-data", returnType: null, allowDuplicates: true, duplicateStrict: false, allowedTypes: "*", //For list of acceptFiles // http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv acceptFiles: "*", fileName: "file", formData: false, dynamicFormData:false, maxFileSize: -1, maxFileCount: -1, multiple: true, dragDrop: true, autoSubmit: true, showCancel: true, showAbort: true, showDone: false, showDelete: false, showError: true, showStatusAfterSuccess: true, showStatusAfterError: true, showFileCounter: true, fileCounterStyle: "). ", showFileSize: true, showProgress: false, nestedForms: true, showDownload: false, onLoad: function (obj) {}, onSelect: function (files) { return true; }, onSubmit: function (files, xhr) {}, onSuccess: function (files, response, xhr, pd) {}, onError: function (files, status, message, pd) {}, onCancel: function (files, pd) {}, onAbort: function (files, pd) {}, downloadCallback: false, deleteCallback: false, afterUploadAll: false, serialize:true, sequential:false, sequentialCount:2, customProgressBar: false, abortButtonClass: "ajax-file-upload-abort", cancelButtonClass: "ajax-file-upload-cancel", dragDropContainerClass: "ajax-upload-dragdrop", dragDropHoverClass: "state-hover", errorClass: "ajax-file-upload-error", uploadButtonClass: "ajax-file-upload", dragDropStr: "Drag & Drop Files", uploadStr:"Upload", abortStr: "Abort", cancelStr: "Cancel", deleteStr: "Delete", doneStr: "Done", multiDragErrorStr: "Multiple File Drag & Drop is not allowed.", extErrorStr: "is not allowed. Allowed extensions: ", duplicateErrorStr: "is not allowed. File already exists.", sizeErrorStr: "is not allowed. Allowed Max size: ", uploadErrorStr: "Upload is not allowed", maxFileCountErrorStr: " is not allowed. Maximum allowed files are:", downloadStr: "Download", customErrorKeyStr: "jquery-upload-file-error", showQueueDiv: false, statusBarWidth: 400, dragdropWidth: 400, showPreview: false, previewHeight: "auto", previewWidth: "100%", extraHTML:false, uploadQueueOrder:'top', headers: {} }, options); this.fileCounter = 1; this.selectedFiles = 0; var formGroup = "ajax-file-upload-" + (new Date().getTime()); this.formGroup = formGroup; this.errorLog = $("
"); //Writing errors this.responses = []; this.existingFileNames = []; if(!feature.formdata) //check drag drop enabled. { s.dragDrop = false; } if(!feature.formdata || s.maxFileCount === 1) { s.multiple = false; } $(this).html(""); var obj = this; var uploadLabel = $('
' + s.uploadStr + '
'); $(uploadLabel).addClass(s.uploadButtonClass); // wait form ajax Form plugin and initialize (function checkAjaxFormLoaded() { if($.fn.ajaxForm) { if(s.dragDrop) { var dragDrop = $('
').width(s.dragdropWidth); $(obj).append(dragDrop); $(dragDrop).append(uploadLabel); $(dragDrop).append($(s.dragDropStr)); setDragDropHandlers(obj, s, dragDrop); } else { $(obj).append(uploadLabel); } $(obj).append(obj.errorLog); if(s.showQueueDiv) obj.container =$("#"+s.showQueueDiv); else obj.container = $("
").insertAfter($(obj)); s.onLoad.call(this, obj); createCustomInputFile(obj, formGroup, s, uploadLabel); } else window.setTimeout(checkAjaxFormLoaded, 10); })(); this.startUpload = function () { $("form").each(function(i,items) { if($(this).hasClass(obj.formGroup)) { mainQ.push($(this)); } }); if(mainQ.length >= 1 ) submitPendingUploads(); } this.getFileCount = function () { return obj.selectedFiles; } this.stopUpload = function () { $("." + s.abortButtonClass).each(function (i, items) { if($(this).hasClass(obj.formGroup)) $(this).click(); }); $("." + s.cancelButtonClass).each(function (i, items) { if($(this).hasClass(obj.formGroup)) $(this).click(); }); } this.cancelAll = function () { $("." + s.cancelButtonClass).each(function (i, items) { if($(this).hasClass(obj.formGroup)) $(this).click(); }); } this.update = function (settings) { //update new settings s = $.extend(s, settings); //We need to update action for already created Form. if(settings.hasOwnProperty('url')) { $("form").each(function(i,items) { $(this).attr('action',settings['url']); }); } } this.enqueueFile = function(file){ if( !( file instanceof File) ) return; var files = [file]; serializeAndUploadFiles(s, obj, files); } this.reset = function (removeStatusBars) { obj.fileCounter = 1; obj.selectedFiles = 0; obj.errorLog.html(""); //remove all the status bars. if(removeStatusBars != false) { obj.container.html(""); } } this.remove = function() { obj.container.html(""); $(obj).remove(); } //This is for showing Old files to user. this.createProgress = function (filename,filepath,filesize) { var pd = new createProgressDiv(this, s); pd.progressDiv.show(); pd.progressbar.width('100%'); var fileNameStr = ""; if(s.showFileCounter) fileNameStr = obj.fileCounter + s.fileCounterStyle + filename; else fileNameStr = filename; if(s.showFileSize) fileNameStr += " ("+getSizeStr(filesize)+")"; pd.filename.html(fileNameStr); obj.fileCounter++; obj.selectedFiles++; if(s.showPreview) { pd.preview.attr('src',filepath); pd.preview.show(); } if(s.showDownload) { pd.download.show(); pd.download.click(function () { if(s.downloadCallback) s.downloadCallback.call(obj, [filename], pd); }); } if(s.showDelete) { pd.del.show(); pd.del.click(function () { pd.statusbar.hide().remove(); var arr = [filename]; if(s.deleteCallback) s.deleteCallback.call(this, arr, pd); obj.selectedFiles -= 1; updateFileCounter(s, obj); }); } return pd; } this.getResponses = function () { return this.responses; } var mainQ=[]; var progressQ=[] var running = false; function submitPendingUploads() { if(running) return; running = true; (function checkPendingForms() { //if not sequential upload all files if(!s.sequential) s.sequentialCount=99999; if(mainQ.length == 0 && progressQ.length == 0) { if(s.afterUploadAll) s.afterUploadAll(obj); running= false; } else { if( progressQ.length < s.sequentialCount) { var frm = mainQ.shift(); if(frm != undefined) { progressQ.push(frm); //Remove the class group. frm.removeClass(obj.formGroup); frm.submit(); } } window.setTimeout(checkPendingForms, 100); } })(); } function setDragDropHandlers(obj, s, ddObj) { ddObj.on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); $(this).addClass(s.dragDropHoverClass); }); ddObj.on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); var that = $(this); if (that.hasClass(s.dragDropContainerClass) && !that.hasClass(s.dragDropHoverClass)) { that.addClass(s.dragDropHoverClass); } }); ddObj.on('drop', function (e) { e.preventDefault(); $(this).removeClass(s.dragDropHoverClass); obj.errorLog.html(""); var files = e.originalEvent.dataTransfer.files; if(!s.multiple && files.length > 1) { if(s.showError) $("
" + s.multiDragErrorStr + "
").appendTo(obj.errorLog); return; } if(s.onSelect(files) == false) return; serializeAndUploadFiles(s, obj, files); }); ddObj.on('dragleave', function (e) { $(this).removeClass(s.dragDropHoverClass); }); $(document).on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); }); $(document).on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); var that = $(this); if (!that.hasClass(s.dragDropContainerClass)) { that.removeClass(s.dragDropHoverClass); } }); $(document).on('drop', function (e) { e.stopPropagation(); e.preventDefault(); $(this).removeClass(s.dragDropHoverClass); }); } function getSizeStr(size) { var sizeStr = ""; var sizeKB = size / 1024; if(parseInt(sizeKB) > 1024) { var sizeMB = sizeKB / 1024; sizeStr = sizeMB.toFixed(2) + " MB"; } else { sizeStr = sizeKB.toFixed(2) + " KB"; } return sizeStr; } function serializeData(extraData) { var serialized = []; if(jQuery.type(extraData) == "string") { serialized = extraData.split('&'); } else { serialized = $.param(extraData).split('&'); } var len = serialized.length; var result = []; var i, part; for(i = 0; i < len; i++) { serialized[i] = serialized[i].replace(/\+/g, ' '); part = serialized[i].split('='); result.push([decodeURIComponent(part[0]), decodeURIComponent(part[1])]); } return result; } function noserializeAndUploadFiles(s, obj, files) { var ts = $.extend({}, s); var fd = new FormData(); var fileArray = []; var fileName = s.fileName.replace("[]", ""); var fileListStr=""; for (var i = 0; i < files.length; i++) { if (!isFileTypeAllowed(obj, s, files[i].name)) { if (s.showError) $("
" + files[i].name + " " + s.extErrorStr + s.allowedTypes + "
").appendTo(obj.errorLog); continue; } if (s.maxFileSize != -1 && files[i].size > s.maxFileSize) { if (s.showError) $("
" + files[i].name + " " + s.sizeErrorStr + getSizeStr(s.maxFileSize) + "
").appendTo(obj.errorLog); continue; } fd.append(fileName+"[]", files[i]); fileArray.push(files[i].name); fileListStr += obj.fileCounter + "). " + files[i].name+"
"; obj.fileCounter++; } if(fileArray.length ==0 ) return; var extraData = s.formData; if (extraData) { var sData = serializeData(extraData); for (var j = 0; j < sData.length; j++) { if (sData[j]) { fd.append(sData[j][0], sData[j][1]); } } } ts.fileData = fd; var pd = new createProgressDiv(obj, s); pd.filename.html(fileListStr); var form = $("
"); form.appendTo('body'); ajaxFormSubmit(form, ts, pd, fileArray, obj); } function serializeAndUploadFiles(s, obj, files) { for(var i = 0; i < files.length; i++) { if(!isFileTypeAllowed(obj, s, files[i].name)) { if(s.showError) $("
" + files[i].name + " " + s.extErrorStr + s.allowedTypes + "
").appendTo(obj.errorLog); continue; } if(!s.allowDuplicates && isFileDuplicate(obj, files[i].name)) { if(s.showError) $("
" + files[i].name + " " + s.duplicateErrorStr + "
").appendTo(obj.errorLog); continue; } if(s.maxFileSize != -1 && files[i].size > s.maxFileSize) { if(s.showError) $("
" + files[i].name + " " + s.sizeErrorStr + getSizeStr(s.maxFileSize) + "
").appendTo( obj.errorLog); continue; } if(s.maxFileCount != -1 && obj.selectedFiles >= s.maxFileCount) { if(s.showError) $("
" + files[i].name + " " + s.maxFileCountErrorStr + s.maxFileCount + "
").appendTo( obj.errorLog); continue; } obj.selectedFiles++; obj.existingFileNames.push(files[i].name); // Make object immutable var ts = $.extend({}, s); var fd = new FormData(); var fileName = s.fileName.replace("[]", ""); fd.append(fileName, files[i]); var extraData = s.formData; if(extraData) { var sData = serializeData(extraData); for(var j = 0; j < sData.length; j++) { if(sData[j]) { fd.append(sData[j][0], sData[j][1]); } } } ts.fileData = fd; var pd = new createProgressDiv(obj, s); var fileNameStr = ""; if(s.showFileCounter) fileNameStr = obj.fileCounter + s.fileCounterStyle + files[i].name else fileNameStr = files[i].name; if(s.showFileSize) fileNameStr += " ("+getSizeStr(files[i].size)+")"; pd.filename.html(fileNameStr); var form = $("
"); form.appendTo('body'); var fileArray = []; fileArray.push(files[i].name); ajaxFormSubmit(form, ts, pd, fileArray, obj, files[i]); obj.fileCounter++; } } function isFileTypeAllowed(obj, s, fileName) { var fileExtensions = s.allowedTypes.toLowerCase().split(/[\s,]+/g); var ext = fileName.split('.').pop().toLowerCase(); if(s.allowedTypes != "*" && jQuery.inArray(ext, fileExtensions) < 0) { return false; } return true; } function isFileDuplicate(obj, filename) { var duplicate = false; if (obj.existingFileNames.length) { for (var x=0; x"); var fileInputStr = ""; if(s.multiple) { if(s.fileName.indexOf("[]") != s.fileName.length - 2) // if it does not endwith { s.fileName += "[]"; } fileInputStr = ""; } var fileInput = $(fileInputStr).appendTo(form); fileInput.change(function () { obj.errorLog.html(""); var fileExtensions = s.allowedTypes.toLowerCase().split(","); var fileArray = []; if(this.files) //support reading files { for(i = 0; i < this.files.length; i++) { fileArray.push(this.files[i].name); } if(s.onSelect(this.files) == false) return; } else { var filenameStr = $(this).val(); var flist = []; fileArray.push(filenameStr); if(!isFileTypeAllowed(obj, s, filenameStr)) { if(s.showError) $("
" + filenameStr + " " + s.extErrorStr + s.allowedTypes + "
").appendTo( obj.errorLog); return; } //fallback for browser without FileAPI flist.push({ name: filenameStr, size: 'NA' }); if(s.onSelect(flist) == false) return; } updateFileCounter(s, obj); uploadLabel.unbind("click"); form.hide(); createCustomInputFile(obj, group, s, uploadLabel); form.addClass(group); if(s.serialize && feature.fileapi && feature.formdata) //use HTML5 support and split file submission { form.removeClass(group); //Stop Submitting when. var files = this.files; form.remove(); serializeAndUploadFiles(s, obj, files); } else { var fileList = ""; for(var i = 0; i < fileArray.length; i++) { if(s.showFileCounter) fileList += obj.fileCounter + s.fileCounterStyle + fileArray[i] + "
"; else fileList += fileArray[i] + "
";; obj.fileCounter++; } if(s.maxFileCount != -1 && (obj.selectedFiles + fileArray.length) > s.maxFileCount) { if(s.showError) $("
" + fileList + " " + s.maxFileCountErrorStr + s.maxFileCount + "
").appendTo( obj.errorLog); return; } obj.selectedFiles += fileArray.length; var pd = new createProgressDiv(obj, s); pd.filename.html(fileList); ajaxFormSubmit(form, s, pd, fileArray, obj, null); } }); if(s.nestedForms) { form.css({ 'margin': 0, 'padding': 0 }); uploadLabel.css({ position: 'relative', overflow: 'hidden', cursor: 'default' }); fileInput.css({ position: 'absolute', 'cursor': 'pointer', 'top': '0px', 'width': '100%', 'height': '100%', 'left': '0px', 'z-index': '100', 'opacity': '0.0', 'filter': 'alpha(opacity=0)', '-ms-filter': "alpha(opacity=0)", '-khtml-opacity': '0.0', '-moz-opacity': '0.0' }); form.appendTo(uploadLabel); } else { form.appendTo($('body')); form.css({ margin: 0, padding: 0, display: 'block', position: 'absolute', left: '-250px' }); if(navigator.appVersion.indexOf("MSIE ") != -1) //IE Browser { uploadLabel.attr('for', fileUploadId); } else { uploadLabel.click(function () { fileInput.click(); }); } } } function defaultProgressBar(obj,s) { this.statusbar = $("
").width(s.statusBarWidth); this.preview = $("").width(s.previewWidth).height(s.previewHeight).appendTo(this.statusbar).hide(); this.filename = $("
").appendTo(this.statusbar); this.progressDiv = $("
").appendTo(this.statusbar).hide(); this.progressbar = $("
").appendTo(this.progressDiv); this.abort = $("
" + s.abortStr + "
").appendTo(this.statusbar).hide(); this.cancel = $("
" + s.cancelStr + "
").appendTo(this.statusbar).hide(); this.done = $("
" + s.doneStr + "
").appendTo(this.statusbar).hide(); this.download = $("
" + s.downloadStr + "
").appendTo(this.statusbar).hide(); this.del = $("
" + s.deleteStr + "
").appendTo(this.statusbar).hide(); this.abort.addClass("ajax-file-upload-red"); this.done.addClass("ajax-file-upload-green"); this.download.addClass("ajax-file-upload-green"); this.cancel.addClass("ajax-file-upload-red"); this.del.addClass("ajax-file-upload-red"); return this; } function createProgressDiv(obj, s) { var bar = null; if(s.customProgressBar) bar = new s.customProgressBar(obj,s); else bar = new defaultProgressBar(obj,s); bar.abort.addClass(obj.formGroup); bar.abort.addClass(s.abortButtonClass); bar.cancel.addClass(obj.formGroup); bar.cancel.addClass(s.cancelButtonClass); if(s.extraHTML) bar.extraHTML = $("
"+s.extraHTML()+"
").insertAfter(bar.filename); if(s.uploadQueueOrder == 'bottom') $(obj.container).append(bar.statusbar); else $(obj.container).prepend(bar.statusbar); return bar; } function ajaxFormSubmit(form, s, pd, fileArray, obj, file) { var currentXHR = null; var options = { cache: false, contentType: false, processData: false, forceSync: false, type: s.method, data: s.formData, formData: s.fileData, dataType: s.returnType, headers: s.headers, beforeSubmit: function (formData, $form, options) { if(s.onSubmit.call(this, fileArray) != false) { if(s.dynamicFormData) { var sData = serializeData(s.dynamicFormData()); if(sData) { for(var j = 0; j < sData.length; j++) { if(sData[j]) { if(s.serialize && s.fileData != undefined) options.formData.append(sData[j][0], sData[j][1]); else options.data[sData[j][0]] = sData[j][1]; } } } } if(s.extraHTML) { $(pd.extraHTML).find("input,select,textarea").each(function(i,items) { if(s.serialize && s.fileData != undefined) options.formData.append($(this).attr('name'),$(this).val()); else options.data[$(this).attr('name')] = $(this).val(); }); } return true; } pd.statusbar.append("
" + s.uploadErrorStr + "
"); pd.cancel.show() form.remove(); pd.cancel.click(function () { mainQ.splice(mainQ.indexOf(form), 1); removeExistingFileName(obj, fileArray); pd.statusbar.remove(); s.onCancel.call(obj, fileArray, pd); obj.selectedFiles -= fileArray.length; //reduce selected File count updateFileCounter(s, obj); }); return false; }, beforeSend: function (xhr, o) { for (var key in o.headers) { xhr.setRequestHeader(key, o.headers[key]); } pd.progressDiv.show(); pd.cancel.hide(); pd.done.hide(); if(s.showAbort) { pd.abort.show(); pd.abort.click(function () { removeExistingFileName(obj, fileArray); xhr.abort(); obj.selectedFiles -= fileArray.length; //reduce selected File count s.onAbort.call(obj, fileArray, pd); }); } if(!feature.formdata) //For iframe based push { pd.progressbar.width('5%'); } else pd.progressbar.width('1%'); //Fix for small files }, uploadProgress: function (event, position, total, percentComplete) { //Fix for smaller file uploads in MAC if(percentComplete > 98) percentComplete = 98; var percentVal = percentComplete + '%'; if(percentComplete > 1) pd.progressbar.width(percentVal) if(s.showProgress) { pd.progressbar.html(percentVal); pd.progressbar.css('text-align', 'center'); } }, success: function (data, message, xhr) { pd.cancel.remove(); progressQ.pop(); //For custom errors. if(s.returnType == "json" && $.type(data) == "object" && data.hasOwnProperty(s.customErrorKeyStr)) { pd.abort.hide(); var msg = data[s.customErrorKeyStr]; s.onError.call(this, fileArray, 200, msg, pd); if(s.showStatusAfterError) { pd.progressDiv.hide(); pd.statusbar.append("ERROR: " + msg + ""); } else { pd.statusbar.hide(); pd.statusbar.remove(); } obj.selectedFiles -= fileArray.length; //reduce selected File count form.remove(); return; } obj.responses.push(data); pd.progressbar.width('100%') if(s.showProgress) { pd.progressbar.html('100%'); pd.progressbar.css('text-align', 'center'); } pd.abort.hide(); s.onSuccess.call(this, fileArray, data, xhr, pd); if(s.showStatusAfterSuccess) { if(s.showDone) { pd.done.show(); pd.done.click(function () { pd.statusbar.hide("slow"); pd.statusbar.remove(); }); } else { pd.done.hide(); } if(s.showDelete) { pd.del.show(); pd.del.click(function () { removeExistingFileName(obj, fileArray); pd.statusbar.hide().remove(); if(s.deleteCallback) s.deleteCallback.call(this, data, pd); obj.selectedFiles -= fileArray.length; //reduce selected File count updateFileCounter(s, obj); }); } else { pd.del.hide(); } } else { pd.statusbar.hide("slow"); pd.statusbar.remove(); } if(s.showDownload) { pd.download.show(); pd.download.click(function () { if(s.downloadCallback) s.downloadCallback(data, pd); }); } form.remove(); }, error: function (xhr, status, errMsg) { pd.cancel.remove(); progressQ.pop(); pd.abort.hide(); if(xhr.statusText == "abort") //we aborted it { pd.statusbar.hide("slow").remove(); updateFileCounter(s, obj); } else { s.onError.call(this, fileArray, status, errMsg, pd); if(s.showStatusAfterError) { pd.progressDiv.hide(); pd.statusbar.append("ERROR: " + errMsg + ""); } else { pd.statusbar.hide(); pd.statusbar.remove(); } obj.selectedFiles -= fileArray.length; //reduce selected File count } form.remove(); } }; if(s.showPreview && file != null) { if(file.type.toLowerCase().split("/").shift() == "image") getSrcToPreview(file, pd.preview); } if(s.autoSubmit) { form.ajaxForm(options); mainQ.push(form); submitPendingUploads(); } else { if(s.showCancel) { pd.cancel.show(); pd.cancel.click(function () { mainQ.splice(mainQ.indexOf(form), 1); removeExistingFileName(obj, fileArray); form.remove(); pd.statusbar.remove(); s.onCancel.call(obj, fileArray, pd); obj.selectedFiles -= fileArray.length; //reduce selected File count updateFileCounter(s, obj); }); } form.ajaxForm(options); } } return this; } }(jQuery));