let $tbody, $uploaders;
let baseDir;
class Uploader {
idx;
file;
name;
$elem;
static globalIdx = 0;
constructor(file, dirs) {
this.name = [...dirs, file.name].join("/");
this.idx = Uploader.globalIdx++;
this.file = file;
}
upload() {
const { file, idx, name } = this;
let url = getUrl(name);
if (file.name == baseDir + ".zip") {
url += "?unzip";
}
$uploaders.insertAdjacentHTML("beforeend", `
`);
this.$elem = document.getElementById(`file${idx}`);
const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false);
ajax.addEventListener("readystatechange", () => {
if(ajax.readyState === 4) {
if (ajax.status == 200) {
this.complete();
} else {
this.fail();
}
}
})
ajax.addEventListener("error", () => this.fail(), false);
ajax.addEventListener("abort", () => this.fail(), false);
ajax.open("PUT", url);
ajax.send(file);
}
progress(event) {
const percent = (event.loaded / event.total) * 100;
this.$elem.innerHTML = `${this.name} (${percent.toFixed(2)}%)`;
}
complete() {
this.$elem.innerHTML = `${this.name}`;
}
fail() {
this.$elem.innerHTML = `${this.name}`;
}
}
function addBreadcrumb(value) {
const $breadcrumb = document.querySelector(".breadcrumb");
const parts = value.split("/").filter(v => !!v);
const len = parts.length;
let path = "";
for (let i = 0; i < len; i++) {
const name = parts[i];
if (i > 0) {
path += "/" + name;
}
if (i === len - 1) {
$breadcrumb.insertAdjacentHTML("beforeend", `${name}`);
baseDir = name;
} else if (i === 0) {
$breadcrumb.insertAdjacentHTML("beforeend", `${name}`);
} else {
$breadcrumb.insertAdjacentHTML("beforeend", `${name}`);
}
$breadcrumb.insertAdjacentHTML("beforeend", `/`);
}
}
function addPath(file, index) {
const url = getUrl(file.name)
let actionDelete = "";
let actionDownload = "";
if (file.path_type.endsWith("Dir")) {
actionDownload = `
`;
} else {
actionDownload = `
`;
}
if (DATA.allow_delete) {
actionDelete = `
`;
}
let actionCell = `
${actionDownload}
${actionDelete}
| `
$tbody.insertAdjacentHTML("beforeend", `
|
${getSvg(file.path_type)}
${file.name}
|
${formatMtime(file.mtime)} |
${formatSize(file.size)} |
${actionCell}
`)
}
async function deletePath(index) {
const file = DATA.paths[index];
if (!file) return;
if (!confirm(`Delete \`${file.name}\`?`)) return;
try {
const res = await fetch(getUrl(file.name), {
method: "DELETE",
});
if (res.status === 200) {
document.getElementById(`addPath${index}`).remove();
} else {
throw new Error(await res.text())
}
} catch (err) {
alert(`Cannot delete \`${file.name}\`, ${err.message}`);
}
}
function dropzone() {
["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => {
document.addEventListener(name, e => {
e.preventDefault();
e.stopPropagation();
});
});
document.addEventListener("drop", e => {
if (!e.dataTransfer.items[0].webkitGetAsEntry) {
const files = e.dataTransfer.files.filter(v => v.size > 0);
for (const file of files) {
new Uploader(file, []).upload();
}
} else {
const entries = [];
const len = e.dataTransfer.items.length;
for (let i = 0; i < len; i++) {
entries.push(e.dataTransfer.items[i].webkitGetAsEntry());
}
addFileEntries(entries, [])
}
});
}
async function addFileEntries(entries, dirs) {
for (const entry of entries) {
if (entry.isFile) {
entry.file(file => {
new Uploader(file, dirs).upload();
});
} else if (entry.isDirectory) {
const dirReader = entry.createReader()
dirReader.readEntries(entries => addFileEntries(entries, [...dirs, entry.name]));
}
}
}
function getUrl(name) {
let url = location.href.split('?')[0];
if (!url.endsWith("/")) url += "/";
url += encodeURI(name);
return url;
}
function getSvg(path_type) {
switch (path_type) {
case "Dir":
return ``;
case "File":
return ``;
case "SymlinkDir":
return ``;
default:
return ``;
}
}
function formatMtime(mtime) {
if (!mtime) return ""
const date = new Date(mtime);
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1, 2);
const day = padZero(date.getDate(), 2);
const hours = padZero(date.getHours(), 2);
const minutes = padZero(date.getMinutes(), 2);
return `${year}/${month}/${day} ${hours}:${minutes}`;
}
function padZero(value, size) {
return ("0".repeat(size) + value).slice(-1 * size)
}
function formatSize(size) {
if (!size) return ""
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (size == 0) return '0 Byte';
const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
function ready() {
$tbody = document.querySelector(".main tbody");
$uploaders = document.querySelector(".uploaders");
addBreadcrumb(DATA.breadcrumb);
if (Array.isArray(DATA.paths)) {
const len = DATA.paths.length;
for (let i = 0; i < len; i++) {
addPath(DATA.paths[i], i);
}
}
if (DATA.allow_upload) {
dropzone();
document.querySelector(".upload-control").classList.remove(["hidden"]);
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
}
}