Permalink
Browse files

MDL-33688 filemanager - display progress bars as files uploaded

Also improved the styling of the progress bars (used in course drag and drop upload as well)
  • Loading branch information...
1 parent 2d7c5ee commit ead25632bf81af2df1d82132afec0943d044a80d @davosmith davosmith committed Nov 22, 2012
View
@@ -223,6 +223,7 @@ private function fm_print_generallayout($fm) {
<span class="dndupload-message">'.$strdndenabledinbox.'<br/><span class="dndupload-arrow"></span></span>
</div>
<div class="dndupload-target">'.$strdroptoupload.'<br/><span class="dndupload-arrow"></span></div>
+ <div class="dndupload-progressbars"></div>
<div class="dndupload-uploadinprogress">'.$icon_progress.'</div>
</div>
<div class="filemanager-updating">'.$icon_progress.'</div>
View
@@ -54,6 +54,8 @@ M.form_dndupload.init = function(Y, options) {
// dragenter+dragleave(moving between child elements) and dragleave (leaving element)
entercount: 0,
pageentercount: 0,
+ // Holds the progress bar elements for each file.
+ progressbars: {},
/**
* Initalise the drag and drop upload interface
@@ -316,8 +318,12 @@ M.form_dndupload.init = function(Y, options) {
repositoryid: this.repositoryid,
currentfilecount: this.filemanager.filecount, // All files uploaded.
currentfiles: this.filemanager.options.list, // Only the current folder.
- callback: Y.bind('update_filemanager', this)
+ callback: Y.bind('update_filemanager', this),
+ callbackprogress: Y.bind('update_progress', this),
+ callbackcancel:Y.bind('hide_progress', this)
};
+ this.clear_progress();
+ this.show_progress();
var uploader = new dnduploader(options);
uploader.start_upload();
} else {
@@ -328,8 +334,12 @@ M.form_dndupload.init = function(Y, options) {
repositoryid: this.repositoryid,
currentfilecount: 0,
currentfiles: [],
- callback: Y.bind('callback', this)
+ callback: Y.bind('update_filemanager', this),
+ callbackprogress: Y.bind('update_progress', this),
+ callbackcancel:Y.bind('hide_progress', this)
};
+ this.clear_progress();
+ this.show_progress();
uploader = new dnduploader(options);
uploader.start_upload();
}
@@ -379,15 +389,68 @@ M.form_dndupload.init = function(Y, options) {
this.container.removeClass('dndupload-over');
},
+ /**
+ * Show the element showing the upload in progress
+ */
+ show_progress: function() {
+ this.container.addClass('dndupload-inprogress');
+ },
+
+ /**
+ * Hide the element showing upload in progress
+ */
+ hide_progress: function() {
+ this.container.removeClass('dndupload-inprogress');
+ },
+
/**
* Tell the attached filemanager element (if any) to refresh on file
* upload
*/
- update_filemanager: function() {
+ update_filemanager: function(params) {
+ this.hide_progress();
if (this.filemanager) {
// update the filemanager that we've uploaded the files
this.filemanager.filepicker_callback();
+ } else if (this.callback) {
+ this.callback(params);
+ }
+ },
+
+ /**
+ * Clear the current progress bars
+ */
+ clear_progress: function() {
+ var filename;
+ for (filename in this.progressbars) {
+ if (this.progressbars.hasOwnProperty(filename)) {
+ this.progressbars[filename].progressouter.remove(true);
+ delete this.progressbars[filename];
+ }
+ }
+ },
+
+ /**
+ * Show the current progress of the uploaded file
+ */
+ update_progress: function(filename, percent) {
+ if (this.progressbars[filename] === undefined) {
+ var dispfilename = filename;
+ if (dispfilename.length > 50) {
+ dispfilename = dispfilename.substr(0, 49)+'&hellip;';
+ }
+ var progressouter = this.container.create('<span>'+dispfilename+': <span class="dndupload-progress-outer"><span class="dndupload-progress-inner">&nbsp;</span></span><br /></span>');
+ var progressinner = progressouter.one('.dndupload-progress-inner');
+ var progresscontainer = this.container.one('.dndupload-progressbars');
+ progresscontainer.appendChild(progressouter);
+
+ this.progressbars[filename] = {
+ progressouter: progressouter,
+ progressinner: progressinner
+ };
}
+
+ this.progressbars[filename].progressinner.setStyle('width', percent + '%');
}
};
@@ -402,6 +465,10 @@ M.form_dndupload.init = function(Y, options) {
options: {},
// The function to call when all uploads complete.
callback: null,
+ // The function to call as the upload progresses
+ callbackprogress: null,
+ // The function to call if the upload is cancelled
+ callbackcancel: null,
// The list of files dropped onto the element.
files: null,
// The ID of the 'upload' repository.
@@ -438,6 +505,8 @@ M.form_dndupload.init = function(Y, options) {
this.options = params.options;
this.repositoryid = params.repositoryid;
this.callback = params.callback;
+ this.callbackprogress = params.callbackprogress;
+ this.callbackcancel = params.callbackcancel;
this.currentfiles = params.currentfiles;
this.currentfilecount = params.currentfilecount;
this.currentareasize = 0;
@@ -447,7 +516,11 @@ M.form_dndupload.init = function(Y, options) {
this.currentareasize += this.currentfiles[i].size;
};
- this.initialise_queue(params.files);
+ if (!this.initialise_queue(params.files)) {
+ if (this.callbackcancel) {
+ this.callbackcancel();
+ }
+ }
},
/**
@@ -519,11 +592,12 @@ M.form_dndupload.init = function(Y, options) {
this.renamequeue.push(files[i]);
} else {
if (!this.add_to_upload_queue(files[i], files[i].name, false)) {
- return;
+ return false;
}
}
this.queuesize += files[i].size;
}
+ return true;
},
/**
@@ -633,6 +707,9 @@ M.form_dndupload.init = function(Y, options) {
node.one('.fp-dlg-butcancel').on('click', function(e) {
e.preventDefault();
process_dlg.hide();
+ if (self.callbackcancel) {
+ self.callbackcancel();
+ }
}, this);
// When we are at the file limit, only allow 'overwrite', not rename.
@@ -775,6 +852,15 @@ M.form_dndupload.init = function(Y, options) {
// http://yuilibrary.com/projects/yui3/ticket/2531274
var xhr = new XMLHttpRequest();
var self = this;
+
+ // Update the progress bar
+ xhr.upload.addEventListener('progress', function(e) {
+ if (e.lengthComputable && self.callbackprogress) {
+ var percentage = Math.round((e.loaded * 100) / e.total);
+ self.callbackprogress(filename, percentage);
+ }
+ }, false);
+
xhr.onreadystatechange = function() { // Process the server response
if (xhr.readyState == 4) {
if (xhr.status == 200) {
@@ -792,6 +878,9 @@ M.form_dndupload.init = function(Y, options) {
result.url = result.newfile.url;
}
result.client_id = self.options.clientid;
+ if (self.callbackprogress) {
+ self.callbackprogress(filename, 100);
+ }
}
}
self.do_upload(result); // continue uploading
View
@@ -5,6 +5,7 @@ M.form_filepicker.instances = [];
M.form_filepicker.callback = function(params) {
var html = '<a href="'+params['url']+'">'+params['file']+'</a>';
+ html += '<div class="dndupload-progressbars"></div>';
M.form_filepicker.Y.one('#file_info_'+params['client_id'] + ' .filepicker-filename').setContent(html);
//When file is added then set status of global variable to true
var elementname = M.core_filepicker.instances[params['client_id']].options.elementname;
View
@@ -2211,6 +2211,7 @@ public function render_file_picker(file_picker $fp) {
<div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
<div class="filepicker-filename">
<div class="filepicker-container">$currentfile<span class="dndupload-message">$strdndenabled <br/><span class="dndupload-arrow"></span></span></div>
+ <div class="dndupload-progressbars"></div>
</div>
<div><div class="dndupload-target">{$strdroptoupload}<br/><span class="dndupload-arrow"></span></div></div>
</div>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -204,6 +204,6 @@ input.titleeditor { width: 330px; vertical-align: text-bottom; }
#dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;text-align:center;background:#ffc;position:absolute;z-index:9999;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
.dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none; margin-top: .2em; padding: .3em; line-height: 16px;}
.dndupload-preview img.icon { vertical-align: text-bottom; padding: 0;}
-.dndupload-progress-outer {width:70px;border:1px solid black;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
-.dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;}
+.dndupload-progress-outer {width:70px;border:1px solid black;border-radius:4px;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
+.dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;box-shadow: 0 0 4px #229b15;border-radius:2px;background-repeat:repeat-x;background-position:top;background-image:url([[pix:theme_base|progress]])}
.dndupload-hidden {display:none;}
@@ -347,6 +347,12 @@ a.ygtvspacer:hover {color: transparent;text-decoration: none;}
.dndupload-uploading .dndupload-uploadinprogress {display:block;}
.dndupload-arrow {background:url([[pix:theme|fp/dnd_arrow]]) center no-repeat;width:60px;height:80px;position:absolute;margin-left: -28px;top: 5px;}
.fitem.disabled .filepicker-container, .fitem.disabled .fm-empty-container {display:none;}
+.dndupload-progressbars {padding:10px;display:none;}
+.dndupload-inprogress .dndupload-progressbars {display:block;}
+.dndupload-inprogress .fp-content {display:none;}
+.filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {display:none;}
+.filepicker-filelist.dndupload-inprogress .filepicker-container {display:none;}
+.filepicker-filelist.dndupload-inprogress a {display:none;}
/*
* Select Dialogue (File Manager only)

0 comments on commit ead2563

Please sign in to comment.