diff --git a/css/filedrop.css b/css/filedrop.css index 4fde8f1d7f0454177ddaab030b55a988f93d5a7d..d6b42fa25920ea84d5cb18f34155f0a01a16ccc1 100644 --- a/css/filedrop.css +++ b/css/filedrop.css @@ -112,6 +112,8 @@ background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); +} +.progress-bar:not(.active) { -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; diff --git a/js/filedrop.field.js b/js/filedrop.field.js index eeb1e8aa460a30b9921c0e5c71667e0e4d022c46..3bea172b3b5958d7c43f65fbe15adc49ebc7f6d4 100644 --- a/js/filedrop.field.js +++ b/js/filedrop.field.js @@ -14,7 +14,8 @@ drop: $.proxy(this.drop, this), beforeSend: $.proxy(this.beforeSend, this), beforeEach: $.proxy(this.beforeEach, this), - error: $.proxy(this.handleError, this) + error: $.proxy(this.handleError, this), + globalProgressUpdated: $.proxy(this.lockSubmit, this) }; this.options = $.extend({}, $.fn.filedropbox.defaults, events, options); @@ -44,6 +45,7 @@ var node = this.addNode(file).data('file', file); node.find('.progress').show(); node.find('.progress-bar').width('100%').addClass('progress-bar-striped active'); + node.find('.trash').hide(); }, beforeSend: function (file, i, reader) { this.uploads.some(function(e) { @@ -86,9 +88,9 @@ this.uploads.some(function(e) { if (e.data('file') == file) { e.data('xhr', xhr); - e.find('.trash').hide(); e.find('.cancel').show(); that.progressUpdated(i, file, 0); + that.lockSubmit(1); return true; } }); @@ -176,8 +178,12 @@ return filenode; }, deleteNode: function(filenode, e) { - if (!e || confirm(__('You sure?'))) - filenode.remove(); + if (!e || confirm(__('You sure?'))) { + var i = this.uploads.indexOf(filenode); + if (i !== -1) + this.uploads.splice(i,1); + filenode.slideUp('fast', function() { this.remove(); }); + } }, cancelUpload: function(node) { if (node.data('xhr')) { @@ -191,6 +197,19 @@ message = '<b>' + file.name + '</b><br/>' + message; } $.sysAlert(__('File Upload Error'), message); + }, + lockSubmit: function(total_progress) { + var submit = this.$element.closest('form').find('input[type=submit]'), + $submit = $(submit); + if (0 < total_progress && total_progress < 100) { + if (!$submit.data('original')) { + $submit.data('original', $submit.val()); + } + $submit.val(__('Uploading ...')).prop('disabled', true); + } + else if ($submit.data('original')) { + $submit.val($submit.data('original')).prop('disabled', false); + } } }; @@ -208,7 +227,7 @@ files: [], deletable: true, shim: !window.FileReader, - queuefiles: 2 + queuefiles: 4 }; $.fn.filedropbox.messages = { @@ -392,8 +411,8 @@ function progress(e) { if (e.lengthComputable) { - var percentage = Math.round((e.loaded * 100) / e.total); - if (this.currentProgress !== percentage) { + var percentage = ((e.loaded * 100) / e.total).toFixed(1); + if (this.currentProgress != percentage) { this.currentProgress = percentage; opts.progressUpdated(this.index, this.file, this.currentProgress); @@ -414,6 +433,11 @@ } } + function abort(e) { + global_progress[this.global_progress_index] = 100; + globalProgress(); + } + function globalProgress() { if (global_progress.length === 0) { return; @@ -616,6 +640,7 @@ upload.global_progress_index = global_progress_index; upload.startData = 0; upload.addEventListener("progress", progress, false); + upload.addEventListener("abort", abort, false); // Allow url to be a method if (jQuery.isFunction(opts.url)) {