/**
* @typedef {object} PathItem
* @property {"Dir"|"SymlinkDir"|"File"|"SymlinkFile"} path_type
* @property {string} name
* @property {number} mtime
* @property {number} size
*/
/**
* @typedef {object} DATA
* @property {string} href
* @property {string} uri_prefix
* @property {PathItem[]} paths
* @property {boolean} allow_upload
* @property {boolean} allow_delete
* @property {boolean} allow_search
* @property {boolean} dir_exists
*/
/**
* @type {DATA} DATA
*/
var DATA;
/**
* @type {PARAMS}
* @typedef {object} PARAMS
* @property {string} q
* @property {string} sort
* @property {string} order
*/
const PARAMS = Object.fromEntries(new URLSearchParams(window.location.search).entries());
const dirEmptyNote = PARAMS.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';
/**
* @type Element
*/
let $pathsTable;
/**
* @type Element
*/
let $pathsTableHead;
/**
* @type Element
*/
let $pathsTableBody;
/**
* @type Element
*/
let $uploadersTable;
/**
* @type Element
*/
let $emptyFolder;
/**
* @type Element
*/
let $newFolder;
class Uploader {
/**
*
* @param {File} file
* @param {string[]} dirs
*/
constructor(file, dirs) {
/**
* @type Element
*/
this.$uploadStatus = null
this.uploaded = 0;
this.lastUptime = 0;
this.name = [...dirs, file.name].join("/");
this.idx = Uploader.globalIdx++;
this.file = file;
}
upload() {
const { idx, name } = this;
const url = getUrl(name);
const encodedName = encodedStr(name);
$uploadersTable.insertAdjacentHTML("beforeend", `
|
${getSvg()}
|
${encodedName}
|
|
`);
$uploadersTable.classList.remove("hidden");
$emptyFolder.classList.add("hidden");
this.$uploadStatus = document.getElementById(`uploadStatus${idx}`);
this.$uploadStatus.innerHTML = '-';
Uploader.queues.push(this);
Uploader.runQueue();
}
ajax() {
Uploader.runnings += 1;
const url = getUrl(this.name);
this.lastUptime = Date.now();
const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false);
ajax.addEventListener("readystatechange", () => {
if(ajax.readyState === 4) {
if (ajax.status >= 200 && ajax.status < 300) {
this.complete();
} else {
this.fail();
}
}
})
ajax.addEventListener("error", () => this.fail(), false);
ajax.addEventListener("abort", () => this.fail(), false);
ajax.open("PUT", url);
ajax.send(this.file);
}
progress(event) {
const now = Date.now();
const speed = (event.loaded - this.uploaded) / (now - this.lastUptime) * 1000;
const [speedValue, speedUnit] = formatSize(speed);
const speedText = `${speedValue}${speedUnit.toLowerCase()}/s`;
const progress = formatPercent((event.loaded / event.total) * 100);
const duration = formatDuration((event.total - event.loaded) / speed)
this.$uploadStatus.innerHTML = `${speedText}${progress}${duration}`;
this.uploaded = event.loaded;
this.lastUptime = now;
}
complete() {
this.$uploadStatus.innerHTML = `✓`;
Uploader.runnings -= 1;
Uploader.runQueue();
}
fail() {
this.$uploadStatus.innerHTML = `✗`;
Uploader.runnings -= 1;
Uploader.runQueue();
}
}
Uploader.globalIdx = 0;
Uploader.runnings = 0;
/**
* @type Uploader[]
*/
Uploader.queues = [];
Uploader.runQueue = () => {
if (Uploader.runnings > 2) return;
let uploader = Uploader.queues.shift();
if (!uploader) return;
uploader.ajax();
}
/**
* Add breadcrumb
* @param {string} href
* @param {string} uri_prefix
*/
function addBreadcrumb(href, uri_prefix) {
const $breadcrumb = document.querySelector(".breadcrumb");
let parts = [];
if (href === "/") {
parts = [""];
} else {
parts = href.split("/");
}
const len = parts.length;
let path = uri_prefix;
for (let i = 0; i < len; i++) {
const name = parts[i];
if (i > 0) {
if (!path.endsWith("/")) {
path += "/";
}
path += encodeURIComponent(name);
}
const encodedName = encodedStr(name);
if (i === 0) {
$breadcrumb.insertAdjacentHTML("beforeend", ``);
} else if (i === len - 1) {
$breadcrumb.insertAdjacentHTML("beforeend", `${encodedName}`);
} else {
$breadcrumb.insertAdjacentHTML("beforeend", `${encodedName}`);
}
if (i !== len - 1) {
$breadcrumb.insertAdjacentHTML("beforeend", `/`);
}
}
}
/**
* Render path table thead
*/
function renderPathsTableHead() {
const headerItems = [
{
name: "name",
props: `colspan="2"`,
text: "Name",
},
{
name: "mtime",
props: ``,
text: "Last Modified",
},
{
name: "size",
props: ``,
text: "Size",
}
];
$pathsTableHead.insertAdjacentHTML("beforeend", `
${headerItems.map(item => {
let svg = ``;
let order = "asc";
if (PARAMS.sort === item.name) {
if (PARAMS.order === "asc") {
order = "desc";
svg = ``
} else {
svg = ``
}
}
const qs = new URLSearchParams({...PARAMS, order, sort: item.name }).toString();
const icon = `${svg}`
return `| ${item.text}${icon} | `
}).join("\n")}
Actions |
`);
}
/**
* Render path table tbody
*/
function renderPathsTableBody() {
if (DATA.paths && DATA.paths.length > 0) {
const len = DATA.paths.length;
if (len > 0) {
$pathsTable.classList.remove("hidden");
}
for (let i = 0; i < len; i++) {
addPath(DATA.paths[i], i);
}
} else {
$emptyFolder.textContent = dirEmptyNote;
$emptyFolder.classList.remove("hidden");
}
}
/**
* Add pathitem
* @param {PathItem} file
* @param {number} index
*/
function addPath(file, index) {
const encodedName = encodedStr(file.name);
let url = getUrl(file.name)
let actionDelete = "";
let actionDownload = "";
let actionMove = "";
if (file.path_type.endsWith("Dir")) {
url += "/";
actionDownload = `
`;
} else {
actionDownload = `
`;
}
if (DATA.allow_delete) {
if (DATA.allow_upload) {
actionMove = `
`;
}
actionDelete = `
`;
}
let actionCell = `
${actionDownload}
${actionMove}
${actionDelete}
| `
$pathsTableBody.insertAdjacentHTML("beforeend", `
|
${getSvg(file.path_type)}
|
${encodedName}
|
${formatMtime(file.mtime)} |
${formatSize(file.size).join(" ")} |
${actionCell}
`)
}
/**
* Delete path
* @param {number} index
* @returns
*/
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 && res.status < 300) {
document.getElementById(`addPath${index}`).remove();
DATA.paths[index] = null;
if (!DATA.paths.find(v => !!v)) {
$pathsTable.classList.add("hidden");
$emptyFolder.textContent = dirEmptyNote;
$emptyFolder.classList.remove("hidden");
}
} else {
throw new Error(await res.text())
}
} catch (err) {
alert(`Cannot delete \`${file.name}\`, ${err.message}`);
}
}
/**
* Move path
* @param {number} index
* @returns
*/
async function movePath(index) {
const file = DATA.paths[index];
if (!file) return;
const fileUrl = getUrl(file.name);
const fileUrlObj = new URL(fileUrl)
const prefix = DATA.uri_prefix.slice(0, -1);
const filePath = decodeURIComponent(fileUrlObj.pathname.slice(prefix.length));
let newPath = prompt("Enter new path", filePath)
if (!newPath) return;
if (!newPath.startsWith("/")) newPath = "/" + newPath;
if (filePath === newPath) return;
const newFileUrl = fileUrlObj.origin + prefix + newPath.split("/").map(encodeURIComponent).join("/");
try {
const res = await fetch(fileUrl, {
method: "MOVE",
headers: {
"Destination": newFileUrl,
}
});
if (res.status >= 200 && res.status < 300) {
location.href = newFileUrl.split("/").slice(0, -1).join("/")
} else {
throw new Error(await res.text())
}
} catch (err) {
alert(`Cannot move \`${filePath}\` to \`${newPath}\`, ${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, [])
}
});
}
/**
* Create a folder
* @param {string} name
*/
async function createFolder(name) {
const url = getUrl(name);
try {
const res = await fetch(url, {
method: "MKCOL",
});
if (res.status >= 200 && res.status < 300) {
location.href = url;
}
} catch (err) {
alert(`Cannot create folder \`${name}\`, ${err.message}`);
}
}
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 += name.split("/").map(encodeURIComponent).join("/");
return url;
}
function getSvg(path_type) {
switch (path_type) {
case "Dir":
return ``;
case "SymlinkFile":
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 formatDuration(seconds) {
seconds = Math.ceil(seconds);
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds - h * 3600) / 60);
const s = seconds - h * 3600 - m * 60
return `${padZero(h, 2)}:${padZero(m, 2)}:${padZero(s, 2)}`;
}
function formatPercent(precent) {
if (precent > 10) {
return precent.toFixed(1) + "%";
} else {
return precent.toFixed(2) + "%";
}
}
function encodedStr(rawStr) {
return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
}
function ready() {
document.title = `Index of ${DATA.href} - Dufs`;
$pathsTable = document.querySelector(".paths-table")
$pathsTableHead = document.querySelector(".paths-table thead");
$pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table");
$emptyFolder = document.querySelector(".empty-folder");
$newFolder = document.querySelector(".new-folder");
if (DATA.allow_search) {
document.querySelector(".searchbar").classList.remove("hidden");
if (PARAMS.q) {
document.getElementById('search').value = PARAMS.q;
}
}
addBreadcrumb(DATA.href, DATA.uri_prefix);
renderPathsTableHead();
renderPathsTableBody();
if (DATA.allow_upload) {
dropzone();
if (DATA.allow_delete) {
$newFolder.classList.remove("hidden");
$newFolder.addEventListener("click", () => {
const name = prompt("Enter name of new folder");
if (name) createFolder(name);
});
}
document.querySelector(".upload-file").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
}
}