From 59ec65a0f17a46e5829e381504d5883ef49f1aba Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Fri, 10 Oct 2014 11:56:52 +0200 Subject: [PATCH] Added cancel of uploading files. --- .../_application_controller_form.js.coffee | 21 ++++++++--- .../app/controllers/ticket_zoom.js.coffee | 21 ++++++++--- .../javascripts/app/lib/base/html5Upload.js | 35 +++++++++++++++++++ 3 files changed, 69 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee index 1658195ff..1bca01eea 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee @@ -754,19 +754,29 @@ class App.ControllerForm extends App.Controller @attachmentPlaceholder = item.find('.attachmentPlaceholder') @attachmentUpload = item.find('.attachmentUpload') @attachmentsHolder = item.find('.attachments') + @cancelContainer = item.find('.js-cancel') u = => html5Upload.initialize( uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload', dropContainer: item.closest('form').get(0), + cancelContainer: @cancelContainer, inputField: item.find( 'input' ).get(0), key: 'File', data: { form_id: @form_id }, - maxSimultaneousUploads: 2, + maxSimultaneousUploads: 1, onFileAdded: (file) => - @attachmentPlaceholder.addClass('hide') - @attachmentUpload.removeClass('hide') - file.on( + + onStart: => + @attachmentPlaceholder.addClass('hide') + @attachmentUpload.removeClass('hide') + @cancelContainer.removeClass('hide') + console.log('upload start') + + onAborted: => + @attachmentPlaceholder.removeClass('hide') + @attachmentUpload.addClass('hide') + # Called after received response from the server onCompleted: (response) => @@ -784,6 +794,9 @@ class App.ControllerForm extends App.Controller onProgress: (progress, fileSize, uploadedBytes) => @progressBar.width(parseInt(progress) + "%") @progressText.text(parseInt(progress)) + # hide cancel on 90% + if parseInt(progress) >= 90 + @cancelContainer.addClass('hide') console.log('uploadProgress ', parseInt(progress)) ) ) diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index f3114057e..306cca368 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -697,6 +697,7 @@ class Edit extends App.Controller '.attachmentUpload': 'attachmentUpload' '.attachmentUpload-progressBar':'progressBar' '.js-percentage': 'progressText' + '.js-cancel': 'cancelContainer' '.text-bubble': 'textBubble' '.editControls-item': 'editControlItem' #'.editControls': 'editControls' @@ -811,16 +812,25 @@ class Edit extends App.Controller html5Upload.initialize( uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload', dropContainer: @el.get(0), + cancelContainer: @cancelContainer, inputField: @$('.article-attachment input').get(0), key: 'File', data: { form_id: @form_id }, - maxSimultaneousUploads: 2, + maxSimultaneousUploads: 1, onFileAdded: (file) => - @attachmentPlaceholder.addClass('hide') - @attachmentUpload.removeClass('hide') - file.on( + + onStart: => + @attachmentPlaceholder.addClass('hide') + @attachmentUpload.removeClass('hide') + @cancelContainer.removeClass('hide') + console.log('upload start') + + onAborted: => + @attachmentPlaceholder.removeClass('hide') + @attachmentUpload.addClass('hide') + # Called after received response from the server onCompleted: (response) => @@ -838,6 +848,9 @@ class Edit extends App.Controller onProgress: (progress, fileSize, uploadedBytes) => @progressBar.width(parseInt(progress) + "%") @progressText.text(parseInt(progress)) + # hide cancel on 90% + if parseInt(progress) >= 90 + @cancelContainer.addClass('hide') console.log('uploadProgress ', parseInt(progress)) ) ) diff --git a/app/assets/javascripts/app/lib/base/html5Upload.js b/app/assets/javascripts/app/lib/base/html5Upload.js index a650cc6a6..611d41405 100644 --- a/app/assets/javascripts/app/lib/base/html5Upload.js +++ b/app/assets/javascripts/app/lib/base/html5Upload.js @@ -12,7 +12,9 @@ var self = this; self.dropContainer = options.dropContainer; self.inputField = options.inputField; + self.cancelContainer = options.cancelContainer; self.uploadsQueue = []; + self._xhrs = []; self.activeUploads = 0; self.data = options.data; self.key = options.key; @@ -47,6 +49,10 @@ console.log('Event: upload onStart'); (self.eventHandlers.onStart || noop)(); }, + onAborted: function () { + console.log('Event: upload onAborted'); + (self.eventHandlers.onAborted || noop)(); + }, onCompleted: function (data) { console.log('Event: upload onCompleted, data = ' + data); file = null; @@ -68,6 +74,7 @@ var manager = this, dropContainer = manager.dropContainer, inputField = manager.inputField, + cancelContainer = manager.cancelContainer, inCounter = 0, overEvent = function (e) { e.preventDefault() @@ -117,6 +124,12 @@ manager.processFiles(this.files); }); } + + if (cancelContainer) { + cancelContainer.on('click', function() { + manager.uploadCancel() + }) + } }, processFiles: function (files) { @@ -139,6 +152,17 @@ } }, + uploadCancel: function () { + var manager = this; + //manager.uploadsQueue.shift() + console.log(99999, manager._xhrs) + _.each( manager._xhrs, function(xhr){ + console.log(888, xhr) + xhr.abort() + }) + manager._xhrs = [] + }, + uploadFile: function (upload) { var manager = this; @@ -168,6 +192,7 @@ manager.activeUploads += 1; xhr = new window.XMLHttpRequest(); + manager._xhrs.push( xhr ) formData = new window.FormData(); fileName = file.name; @@ -204,6 +229,16 @@ manager.ajaxUpload(manager.uploadsQueue.shift()); } }; + xhr.abort = function (event) { + console.log('Upload abort'); + + // Reduce number of active uploads: + manager.activeUploads -= 1; + + upload.events.onAborted(); + + manager.uploadsQueue = [] + } // Triggered when upload fails: xhr.onerror = function () {