let $tbody, $uploaders; let uploaderIdx = 0; let baseDir; class Uploader { idx = 0; file; $elem; constructor(idx, file) { this.idx = idx; this.file = file; } upload() { const { file, idx } = this; let url = getUrl(file.name); if (file.name == baseDir + ".zip") { url += "?unzip"; } $uploaders.insertAdjacentHTML("beforeend", `
${file.name} (0%)
`); this.$elem = document.getElementById(`file${idx}`); const ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", e => this.progress(e), false); ajax.addEventListener("readystatechange", () => { console.log(ajax.readyState, ajax.status) 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.file.name} (${percent.toFixed(2)}%)`; } complete() { this.$elem.innerHTML = `${this.file.name}`; } fail() { this.$elem.innerHTML = `${this.file.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.readonly) { 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(`Fail to delete ${file.name}, ${err.message}`); } } 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); DATA.paths.forEach((file, index) => addPath(file, index)); if (!DATA.readonly) { document.querySelector(".upload-control").classList.remove(["hidden"]); document.getElementById("file").addEventListener("change", e => { const files = e.target.files; for (let file of files) { uploaderIdx += 1; const uploader = new Uploader(uploaderIdx, file); uploader.upload(); } }); } }