Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added cancel of uploading files.

Browse source
This commit is contained in:
Martin Edenhofer 2014-10-10 11:56:52 +02:00
parent bf18b76cbf
commit 59ec65a0f1
3 changed files with 69 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/app/controllers/_application_controller_form.js.coffee
View file

@ -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))
)
)

21
app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
View file

@ -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))
)
)

35
app/assets/javascripts/app/lib/base/html5Upload.js
View file

@ -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 () {