added progress bar to entry image uploads

This commit is contained in:
Ro 2022-01-26 16:25:05 -08:00
parent 53864becc1
commit 8f9021bb7d
3 changed files with 18 additions and 8 deletions

File diff suppressed because one or more lines are too long

View file

@ -38,10 +38,11 @@ class MaintenanceManager {
* @param {string} baseURL - url of site; uses local when empty * @param {string} baseURL - url of site; uses local when empty
* @param {string} key - user api key * @param {string} key - user api key
*/ */
constructor(baseURL = null, key = null) { constructor(baseURL = null, key = null, progressBar = null) {
this.percentComplete = 0; //for later this.percentComplete = 0; //for later
this.token = null; this.token = null;
this.baseURL = null; this.baseURL = null;
this.progressBar = progressBar;
this.key = null; this.key = null;
if (key) this.key = key; if (key) this.key = key;
if (baseURL) this.baseURL = baseURL; if (baseURL) this.baseURL = baseURL;
@ -254,7 +255,9 @@ class MaintenanceManager {
var self = this; var self = this;
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.upload.onprogress = self.handleLoadProgress; request.upload.addEventListener("progress", (e) =>
self.handleLoadProgress(e, self.progressBar)
);
request.open(requestType, requestURL, true); request.open(requestType, requestURL, true);
request.onload = () => { request.onload = () => {
if (request.status == 200) { if (request.status == 200) {
@ -289,9 +292,12 @@ class MaintenanceManager {
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
handleLoadProgress(e) { handleLoadProgress(e, progressBar) {
this.percentComplete = Math.ceil((e.loaded / e.total) * 100); let percent = Math.ceil((e.loaded / e.total) * 100);
//pass element to display request progress //if a progress bar element is present, talk to it
if (progressBar != null) {
progressBar.style.width = percent + "%";
}
} }
} }

View file

@ -23,7 +23,11 @@ export default class PostEditor {
null, null,
document.getElementById("notify-progress") document.getElementById("notify-progress")
); );
this.mm = new Maintenance(); this.mm = new Maintenance(
null,
null,
document.getElementById("notify-progress")
);
this.urlPieces = document.URL.split("/"); this.urlPieces = document.URL.split("/");
this.post = []; this.post = [];
this.postID = null; this.postID = null;