diff --git a/lib/form/dndupload.js b/lib/form/dndupload.js index e5f03072062..d8e8e8721e7 100644 --- a/lib/form/dndupload.js +++ b/lib/form/dndupload.js @@ -56,6 +56,8 @@ M.form_dndupload.init = function(Y, options) { pageentercount: 0, // Holds the progress bar elements for each file. progressbars: {}, + // Number of request upload. + numberOfRequestUpload: 0, /** * Initalise the drag and drop upload interface @@ -323,9 +325,15 @@ M.form_dndupload.init = function(Y, options) { currentfiles: this.filemanager.options.list, // Only the current folder. callback: Y.bind('update_filemanager', this), callbackprogress: Y.bind('update_progress', this), - callbackcancel:Y.bind('hide_progress', this) + callbackcancel: Y.bind('hide_progress', this), + callbackNumberOfRequestUpload: { + get: Y.bind('getNumberOfRequestUpload', this), + increase: Y.bind('increaseNumberOfRequestUpload', this), + decrease: Y.bind('decreaseNumberOfRequestUpload', this), + }, + callbackClearProgress: Y.bind('clear_progress', this), + callbackStartProgress: Y.bind('startProgress', this), }; - this.clear_progress(); this.show_progress(); var uploader = new dnduploader(options); uploader.start_upload(); @@ -339,9 +347,15 @@ M.form_dndupload.init = function(Y, options) { currentfiles: [], callback: Y.bind('update_filemanager', this), callbackprogress: Y.bind('update_progress', this), - callbackcancel:Y.bind('hide_progress', this) + callbackcancel: Y.bind('hide_progress', this), + callbackNumberOfRequestUpload: { + get: Y.bind('getNumberOfRequestUpload', this), + increase: Y.bind('increaseNumberOfRequestUpload', this), + decrease: Y.bind('decreaseNumberOfRequestUpload', this), + }, + callbackClearProgress: Y.bind('clear_progress', this), + callbackStartProgress: Y.bind('startProgress', this), }; - this.clear_progress(); this.show_progress(); uploader = new dnduploader(options); uploader.start_upload(); @@ -351,6 +365,29 @@ M.form_dndupload.init = function(Y, options) { return false; }, + /** + * Increase number of request upload. + */ + increaseNumberOfRequestUpload: function() { + this.numberOfRequestUpload++; + }, + + /** + * Decrease number of request upload. + */ + decreaseNumberOfRequestUpload: function() { + this.numberOfRequestUpload--; + }, + + /** + * Return number of request upload. + * + * @returns {number} + */ + getNumberOfRequestUpload: function() { + return this.numberOfRequestUpload; + }, + /** * Check to see if the drag event has any files in it * @@ -406,7 +443,9 @@ M.form_dndupload.init = function(Y, options) { * Hide the element showing upload in progress */ hide_progress: function() { - this.container.removeClass('dndupload-inprogress'); + if (!Object.keys(this.progressbars).length) { + this.container.removeClass('dndupload-inprogress'); + } }, /** @@ -414,6 +453,7 @@ M.form_dndupload.init = function(Y, options) { * upload */ update_filemanager: function(params) { + this.clear_progress(); this.hide_progress(); if (this.filemanager) { // update the filemanager that we've uploaded the files @@ -424,7 +464,7 @@ M.form_dndupload.init = function(Y, options) { }, /** - * Clear the current progress bars + * Clear the all progress bars. */ clear_progress: function() { var filename; @@ -437,13 +477,25 @@ M.form_dndupload.init = function(Y, options) { }, /** - * Show the current progress of the uploaded file + * Show the current progress of the uploaded file. */ update_progress: function(filename, percent) { + this.startProgress(filename); + this.progressbars[filename].progressinner.setStyle('width', percent + '%'); + this.progressbars[filename].progressinner.setAttribute('aria-valuenow', percent); + this.progressbars[filename].progressinnertext.setContent(percent + '% ' + M.util.get_string('complete', 'moodle')); + }, + + /** + * Start to show the progress of the uploaded file. + * + * @param {String} filename Name of file upload. + */ + startProgress: function(filename) { if (this.progressbars[filename] === undefined) { var dispfilename = filename; if (dispfilename.length > 50) { - dispfilename = dispfilename.substr(0, 49)+'…'; + dispfilename = dispfilename.substr(0, 49) + '…'; } var progressouter = this.container.create('
' + dispfilename + '
' + @@ -462,10 +514,6 @@ M.form_dndupload.init = function(Y, options) { progressinnertext: progressinnertext }; } - - this.progressbars[filename].progressinner.setStyle('width', percent + '%'); - this.progressbars[filename].progressinner.setAttribute('aria-valuenow', percent); - this.progressbars[filename].progressinnertext.setContent(percent + '% ' + M.util.get_string('complete', 'moodle')); } }; @@ -506,6 +554,12 @@ M.form_dndupload.init = function(Y, options) { renameall: false, // The file manager helper. filemanagerhelper: null, + // The function to call as the number of request upload. + callbackNumberOfRequestUpload: null, + // The function to call as the clear progresses. + callbackClearProgress: null, + // The function to call as the start progress. + callbackStartProgress: null, /** * Initialise the settings for the dnduploader @@ -528,6 +582,9 @@ M.form_dndupload.init = function(Y, options) { this.currentfilecount = params.currentfilecount; this.currentareasize = 0; this.filemanagerhelper = this.options.filemanager; + this.callbackNumberOfRequestUpload = params.callbackNumberOfRequestUpload; + this.callbackClearProgress = params.callbackClearProgress; + this.callbackStartProgress = params.callbackStartProgress; // Retrieve the current size of the area. for (var i = 0; i < this.currentfiles.length; i++) { @@ -539,11 +596,6 @@ M.form_dndupload.init = function(Y, options) { this.callbackcancel(); } } - - // Trigger form upload start events. - require(['core_form/events'], function(FormEvent) { - FormEvent.notifyUploadStarted(this.filemanagerhelper.filemanager.get('id')); - }.bind(this)); }, /** @@ -756,7 +808,8 @@ M.form_dndupload.init = function(Y, options) { e.preventDefault(); process_dlg.hide(); if (self.callbackcancel) { - this.triggerUploadCompleted(); + this.notifyUploadCompleted(); + self.callbackClearProgress(); self.callbackcancel(); } }, this); @@ -796,7 +849,7 @@ M.form_dndupload.init = function(Y, options) { process_dlg.after('visibleChange', function(e) { if (!process_dlg.get('visible')) { if (self.callbackcancel) { - this.triggerUploadCompleted(); + this.notifyUploadCompleted(); self.callbackcancel(); } process_dlg.destroy(true); @@ -809,12 +862,21 @@ M.form_dndupload.init = function(Y, options) { /** * Trigger upload completed event. */ - triggerUploadCompleted: function() { + notifyUploadCompleted: function() { require(['core_form/events'], function(FormEvent) { - FormEvent.triggerUploadCompleted(this.filemanagerhelper.filemanager.get('id')); + FormEvent.notifyUploadCompleted(this.filemanagerhelper.filemanager.get('id')); }.bind(this)); }, + /** + * Trigger form upload start events. + */ + notifyUploadStarted: function() { + require(['core_form/events'], function(FormEvent) { + FormEvent.notifyUploadStarted(this.filemanagerhelper.filemanager.get('id')); + }.bind(this)); + }, + /** * Checks if there is already a file with the given name in the current folder * or in the list of already uploading files @@ -862,7 +924,9 @@ M.form_dndupload.init = function(Y, options) { var filedetails = this.uploadqueue.shift(); this.upload_file(filedetails.file, filedetails.filename, filedetails.overwrite); } else { - this.uploadfinished(lastresult); + if (this.callbackNumberOfRequestUpload && !this.callbackNumberOfRequestUpload.get()) { + this.uploadfinished(lastresult); + } } }, @@ -870,10 +934,6 @@ M.form_dndupload.init = function(Y, options) { * Run the callback to the filemanager/filepicker */ uploadfinished: function(lastresult) { - // Trigger form upload complete events. - require(['core_form/events'], function(FormEvent) { - FormEvent.notifyUploadCompleted(this.filemanagerhelper.filemanager.get('id')); - }.bind(this)); this.callback(lastresult); }, @@ -894,6 +954,15 @@ M.form_dndupload.init = function(Y, options) { // http://yuilibrary.com/projects/yui3/ticket/2531274 var xhr = new XMLHttpRequest(); var self = this; + if (self.callbackNumberOfRequestUpload) { + self.callbackNumberOfRequestUpload.increase(); + } + + // Start progress bar. + xhr.onloadstart = function() { + self.callbackStartProgress(filename); + self.notifyUploadStarted(); + }; // Update the progress bar xhr.upload.addEventListener('progress', function(e) { @@ -905,6 +974,7 @@ M.form_dndupload.init = function(Y, options) { xhr.onreadystatechange = function() { // Process the server response if (xhr.readyState == 4) { + self.notifyUploadCompleted(); if (xhr.status == 200) { var result = JSON.parse(xhr.responseText); if (result) { @@ -925,6 +995,9 @@ M.form_dndupload.init = function(Y, options) { } } } + if (self.callbackNumberOfRequestUpload) { + self.callbackNumberOfRequestUpload.decrease(); + } self.do_upload(result); // continue uploading } else { self.print_msg(M.util.get_string('serverconnection', 'error'), 'error');