Commit 2a0aa559 authored by Nicolas PERNOUD's avatar Nicolas PERNOUD
Browse files

fix: upload files sequentially

parent eb0b4e7e
Pipeline #4133 passed with stages
in 2 minutes and 31 seconds
......@@ -434,63 +434,27 @@ export class Explorer {
});
}
upload(files) {
async upload(files) {
const onStartPath = this.path;
let offset = 0;
let id = this.files.length + 1;
let id = this.files.length;
let fileIdx = 0;
for (const file of files) {
id++;
fileIdx++;
file.path = path(this.path, file.name);
// Create a message to allow progress tracking and cancellation
let msg = document.createElement("div");
msg.innerHTML = /* HTML */ `
<div class="content"><p>${file.name}</p></div>
<div class="content"><p>${file.name} (file: ${fileIdx}/${files.length})</p></div>
<progress class="progress is-primary" value="0" max="100" style="margin-bottom: 0px;"></progress>
`;
msg.classList.add("is-info", "notification", "uploader", "animated", "fadeInUp", "faster");
msg.style.marginBottom = offset.toString() + "px";
const delBtn = document.createElement("button");
delBtn.classList.add("delete");
msg.appendChild(delBtn);
// Perform the request
let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// track upload progress
xhr.upload.onprogress = function(e) {
msg.getElementsByTagName("progress")[0].value = (e.loaded / e.total) * 100;
};
// track completion: both successful or not
xhr.onloadend = () => {
if (xhr.status === 0) {
console.log(`Upload of ${file.name} cancelled`);
} else if (xhr.status == 201) {
if (this.path === onStartPath) {
this.files.push({
name: file.name,
path: file.path,
isDir: file.isDir,
type: file.type,
size: file.size,
lastModified: file.lastModified,
id: id
});
this.displayFiles();
id++;
}
} else {
const message = `Error uploading ${file.name} (status ${xhr.status})`;
Messages.Show("is-warning", message);
console.error(message);
}
AnimateCSS(msg, "fadeOutDown", function() {
msg.parentNode.removeChild(msg);
});
};
xhr.onerror = function(e) {
Messages.Show("is-warning", e.message);
};
xhr.open("PUT", this.fullHostname + file.path);
xhr.setRequestHeader("XSRF-Token", this.user.xsrftoken);
xhr.send(file);
delBtn.addEventListener("click", async () => {
xhr.abort();
try {
......@@ -508,11 +472,64 @@ export class Explorer {
console.error(e);
}
});
delBtn.classList.add("delete");
msg.appendChild(delBtn);
document.body.appendChild(msg);
offset = offset + 50;
try {
await this.uploadFile(xhr, file);
if (this.path === onStartPath) {
this.files.push({
name: file.name,
path: file.path,
isDir: file.isDir,
type: file.type,
size: file.size,
lastModified: file.lastModified,
id: id
});
this.displayFiles();
}
} catch (e) {
console.error(e.statusText);
Messages.Show("is-warning", e.statusText);
}
AnimateCSS(msg, "fadeOutDown", function() {
msg.parentNode.removeChild(msg);
});
}
}
uploadFile(xhr, file) {
return new Promise((resolve, reject) => {
xhr.withCredentials = true;
// track completion: both successful or not
xhr.onloadend = () => {
if (xhr.status === 0) {
reject({
status: xhr.status,
statusText: `Upload of ${file.name} cancelled`
});
} else if (xhr.status == 201) {
resolve(xhr.status);
} else {
reject({
status: xhr.status,
statusText: `Error uploading ${file.name} (status ${xhr.status})`
});
}
};
xhr.onerror = function(e) {
reject({
status: this.status,
statusText: `Error uploading ${file.name} (status ${xhr.status})`
});
};
xhr.open("PUT", this.fullHostname + file.path);
xhr.setRequestHeader("XSRF-Token", this.user.xsrftoken);
xhr.send(file);
});
}
async download(file) {
try {
const response = await fetch(location.origin + "/api/common/Share", {
......
......@@ -109,10 +109,10 @@ export class Open {
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<button class="delete" aria-label="close" id="${this.prefix}open-close"></button>
<button class="delete navbar-menu-icon" aria-label="close" id="${this.prefix}open-close"></button>
<p class="modal-card-title has-text-centered">${this.file.name}</p>
</header>
<section class="modal-card-body is-paddingless">
<section class="modal-card-body is-paddingless flex-container">
${this.type == "other"
? /* HTML */ `
<embed src="${this.url}?token=${token}&inline" type="application/pdf" width="100%" style="height: 75vh;" />
......
......@@ -42,7 +42,7 @@
</div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item"><p>v4.1.2</p></div>
<div class="navbar-item"><p>v4.1.3</p></div>
</div>
</div>
</nav>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment