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} key - user api key
*/
constructor(baseURL = null, key = null) {
constructor(baseURL = null, key = null, progressBar = null) {
this.percentComplete = 0; //for later
this.token = null;
this.baseURL = null;
this.progressBar = progressBar;
this.key = null;
if (key) this.key = key;
if (baseURL) this.baseURL = baseURL;
@ -254,7 +255,9 @@ class MaintenanceManager {
var self = this;
return new Promise(function (resolve, reject) {
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.onload = () => {
if (request.status == 200) {
@ -289,9 +292,12 @@ class MaintenanceManager {
//--------------------------
// event handlers
//--------------------------
handleLoadProgress(e) {
this.percentComplete = Math.ceil((e.loaded / e.total) * 100);
//pass element to display request progress
handleLoadProgress(e, progressBar) {
let percent = Math.ceil((e.loaded / e.total) * 100);
//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,
document.getElementById("notify-progress")
);
this.mm = new Maintenance();
this.mm = new Maintenance(
null,
null,
document.getElementById("notify-progress")
);
this.urlPieces = document.URL.split("/");
this.post = [];
this.postID = null;