Skip to content

Commit

Permalink
MDL-71137 File upload: progress bar issues display when D&D multi files
Browse files Browse the repository at this point in the history
  • Loading branch information
@JBThong
JBThong committed Sep 6, 2021
1 parent 3e69001 commit 75eff1b
Showing 1 changed file with 98 additions and 23 deletions.
121 changes: 98 additions & 23 deletions lib/form/dndupload.js
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -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
*
Expand Down Expand Up @@ -406,14 +443,17 @@ 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');
}
},

/**
* Tell the attached filemanager element (if any) to refresh on file
* upload
*/
update_filemanager: function(params) {
this.clear_progress();
this.hide_progress();
if (this.filemanager) {
// update the filemanager that we've uploaded the files
Expand All @@ -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;
Expand All @@ -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('<div>' + dispfilename +
'<div class="progress">' +
Expand All @@ -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'));
}
};

Expand Down Expand Up @@ -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
Expand All @@ -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++) {
Expand All @@ -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.triggerUploadStarted(this.filemanagerhelper.filemanager.get('id'));
}.bind(this));
},

/**
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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'));
}.bind(this));
},

/**
* Trigger form upload start events.
*/
notifyUploadStarted: function() {
require(['core_form/events'], function(FormEvent) {
FormEvent.triggerUploadStarted(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
Expand Down Expand Up @@ -862,16 +924,16 @@ 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);
}
}
},

/**
* Run the callback to the filemanager/filepicker
*/
uploadfinished: function(lastresult) {
// Trigger form upload complete events.
this.triggerUploadCompleted();
this.callback(lastresult);
},

Expand All @@ -892,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) {
Expand All @@ -903,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) {
Expand All @@ -923,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');
Expand Down

0 comments on commit 75eff1b

Please sign in to comment.