|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
|
<title>Duf</title>
|
|
|
|
|
__STYLE__
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="head">
|
|
|
|
|
<div class="breadcrumb"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="uploaders">
|
|
|
|
|
</div>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="cell-name">Name</th>
|
|
|
|
|
<th class="cell-mtime">Date modify</th>
|
|
|
|
|
<th class="cell-size">Size</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
const $head = document.querySelector(".head");
|
|
|
|
|
const $tbody = document.querySelector(".main tbody");
|
|
|
|
|
const $breadcrumb = document.querySelector(".breadcrumb");
|
|
|
|
|
const $uploaders = document.querySelector(".uploaders");
|
|
|
|
|
const $uploadControl = document.querySelector(".upload-control");
|
|
|
|
|
const { breadcrumb, paths, readonly } = __DATA__;
|
|
|
|
|
let uploaderIdx = 0;
|
|
|
|
|
|
|
|
|
|
class Uploader {
|
|
|
|
|
idx = 0;
|
|
|
|
|
file;
|
|
|
|
|
path;
|
|
|
|
|
$elem;
|
|
|
|
|
constructor(idx, file) {
|
|
|
|
|
this.idx = idx;
|
|
|
|
|
this.file = file;
|
|
|
|
|
this.path = location.pathname + "/" + file.name;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
upload() {
|
|
|
|
|
const { file, idx, path } = this;
|
|
|
|
|
$uploaders.insertAdjacentHTML("beforeend", `
|
|
|
|
|
<div class="uploader path">
|
|
|
|
|
<div><svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"></path></svg></div>
|
|
|
|
|
<a href="${path}" id="file${idx}">${file.name} (0%)</a>
|
|
|
|
|
</div>`);
|
|
|
|
|
this.$elem = document.getElementById(`file${idx}`);
|
|
|
|
|
|
|
|
|
|
const ajax = new XMLHttpRequest();
|
|
|
|
|
ajax.upload.addEventListener("progress", e => this.progress(e), false);
|
|
|
|
|
ajax.addEventListener("load", e => this.complete(e), false);
|
|
|
|
|
ajax.addEventListener("error", e => this.error(e), false);
|
|
|
|
|
ajax.addEventListener("abort", e => this.abort(e), false);
|
|
|
|
|
ajax.open("PUT", path);
|
|
|
|
|
ajax.send(file);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
progress(event) {
|
|
|
|
|
const percent = (event.loaded / event.total) * 100;
|
|
|
|
|
this.$elem.innerHTML = `${this.file.name} (${percent.toFixed(2)}%)`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
complete(event) {
|
|
|
|
|
this.$elem.innerHTML = `${this.file.name}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
error(event) {
|
|
|
|
|
this.$elem.innerHTML = `${this.file.name} (x)`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
abort(event) {
|
|
|
|
|
this.$elem.innerHTML = `${this.file.name} (x)`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addBreadcrumb(value) {
|
|
|
|
|
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", `<b>${name}</b>`);
|
|
|
|
|
} else if (i === 0) {
|
|
|
|
|
$breadcrumb.insertAdjacentHTML("beforeend", `<a href="/"><b>${name}</b></a>`);
|
|
|
|
|
} else {
|
|
|
|
|
$breadcrumb.insertAdjacentHTML("beforeend", `<a href="${encodeURI(path)}">${name}</a>`);
|
|
|
|
|
}
|
|
|
|
|
$breadcrumb.insertAdjacentHTML("beforeend", `<span class="separator">/</span>`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addPath(file, index) {
|
|
|
|
|
const actionTd = file.name === ".." || readonly ? "" : `
|
|
|
|
|
<td class="cell-actions">
|
|
|
|
|
<div onclick="deletePath(${index})" class="delete-btn" id="deleteBtn${index}" title="Delete ${file.name}">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 40 40"><path d="M28,40H11.8c-3.3,0-5.9-2.7-5.9-5.9V16c0-0.6,0.4-1,1-1s1,0.4,1,1v18.1c0,2.2,1.8,3.9,3.9,3.9H28c2.2,0,3.9-1.8,3.9-3.9V16 c0-0.6,0.4-1,1-1s1,0.4,1,1v18.1C33.9,37.3,31.2,40,28,40z"/></g><g><path d="M33.3,4.9h-7.6C25.2,2.1,22.8,0,19.9,0s-5.3,2.1-5.8,4.9H6.5c-2.3,0-4.1,1.8-4.1,4.1S4.2,13,6.5,13h26.9 c2.3,0,4.1-1.8,4.1-4.1S35.6,4.9,33.3,4.9z M19.9,2c1.8,0,3.3,1.2,3.7,2.9h-7.5C16.6,3.2,18.1,2,19.9,2z M33.3,11H6.5 c-1.1,0-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1h26.9c1.1,0,2.1,0.9,2.1,2.1C35.4,10.1,34.5,11,33.3,11z"/></g><g><path d="M12.9,35.1c-0.6,0-1-0.4-1-1V17.4c0-0.6,0.4-1,1-1s1,0.4,1,1v16.7C13.9,34.6,13.4,35.1,12.9,35.1z"/></g><g><path d="M26.9,35.1c-0.6,0-1-0.4-1-1V17.4c0-0.6,0.4-1,1-1s1,0.4,1,1v16.7C27.9,34.6,27.4,35.1,26.9,35.1z"/></g><g><path d="M19.9,35.1c-0.6,0-1-0.4-1-1V17.4c0-0.6,0.4-1,1-1s1,0.4,1,1v16.7C20.9,34.6,20.4,35.1,19.9,35.1z"/></svg>
|
|
|
|
|
</div>
|
|
|
|
|
</td>`
|
|
|
|
|
|
|
|
|
|
$tbody.insertAdjacentHTML("beforeend", `
|
|
|
|
|
<tr id="addPath${index}">
|
|
|
|
|
<td class="path cell-name">
|
|
|
|
|
<div>${getSvg(file.path_type)}</div>
|
|
|
|
|
<a href="${encodeURI(file.path)}" title="${file.name}">${file.name}</a>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="cell-mtime">${formatMtime(file.mtime)}</td>
|
|
|
|
|
<td class="cell-size">${formatSize(file.size)}</td>
|
|
|
|
|
${actionTd}
|
|
|
|
|
</tr>`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function deletePath(index) {
|
|
|
|
|
const file = paths[index];
|
|
|
|
|
if (!file) return;
|
|
|
|
|
try {
|
|
|
|
|
const res = await fetch(encodeURI(file.path), {
|
|
|
|
|
method: "DELETE",
|
|
|
|
|
});
|
|
|
|
|
if (res.status !== 200) {
|
|
|
|
|
const text = await res.text();
|
|
|
|
|
throw new Error(text);
|
|
|
|
|
}
|
|
|
|
|
document.getElementById(`addPath${index}`).remove();
|
|
|
|
|
} catch (err) {
|
|
|
|
|
alert(`Failed to delete ${file.name}, ${err.message}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addUploadControl() {
|
|
|
|
|
$head.insertAdjacentHTML("beforeend", `
|
|
|
|
|
<div class="upload-control" title="Upload file">
|
|
|
|
|
<label for="file">
|
|
|
|
|
<svg viewBox="0 0 384.97 384.97" width="14" height="14"><path d="M372.939,264.641c-6.641,0-12.03,5.39-12.03,12.03v84.212H24.061v-84.212c0-6.641-5.39-12.03-12.03-12.03 S0,270.031,0,276.671v96.242c0,6.641,5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03v-96.242 C384.97,270.019,379.58,264.641,372.939,264.641z"></path><path d="M117.067,103.507l63.46-62.558v235.71c0,6.641,5.438,12.03,12.151,12.03c6.713,0,12.151-5.39,12.151-12.03V40.95 l63.46,62.558c4.74,4.704,12.439,4.704,17.179,0c4.74-4.704,4.752-12.319,0-17.011l-84.2-82.997 c-4.692-4.656-12.584-4.608-17.191,0L99.888,86.496c-4.752,4.704-4.74,12.319,0,17.011 C104.628,108.211,112.327,108.211,117.067,103.507z"></path></svg>
|
|
|
|
|
</label>
|
|
|
|
|
<input type="file" id="file" name="file" multiple>
|
|
|
|
|
</div>
|
|
|
|
|
`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getSvg(path_type) {
|
|
|
|
|
switch (path_type) {
|
|
|
|
|
case "Dir":
|
|
|
|
|
return `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM6 4H1V3h5v1z"></path></svg>`;
|
|
|
|
|
case "File":
|
|
|
|
|
return `<svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"></path></svg>`;
|
|
|
|
|
case "SymlinkDir":
|
|
|
|
|
return `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM1 3h5v1H1V3zm6 9v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73C4.86 8.43 5.82 8 7.01 8V6l4 3-4 3H7z"></path></svg>`;
|
|
|
|
|
default:
|
|
|
|
|
return `<svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM6 4.5l4 3-4 3v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73.73-.84 1.69-1.27 2.88-1.27v-2H6z"></path></svg>`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 = ['Bytes', '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];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
addBreadcrumb(breadcrumb);
|
|
|
|
|
paths.forEach((file, index) => addPath(file, index));
|
|
|
|
|
if (!readonly) {
|
|
|
|
|
addUploadControl();
|
|
|
|
|
document.querySelector(".main thead tr").insertAdjacentHTML("beforeend", `<th class="cell-actions">Actions</th>`);
|
|
|
|
|
document.getElementById("file").addEventListener("change", e => {
|
|
|
|
|
const files = e.target.files;
|
|
|
|
|
for (const file of files) {
|
|
|
|
|
uploaderIdx += 1;
|
|
|
|
|
const uploader = new Uploader(uploaderIdx, file);
|
|
|
|
|
uploader.upload();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
