feat: add basic auth and readonly mode

This commit is contained in:
sigoden
2022-05-26 18:06:52 +08:00
parent 1c97c01096
commit 78e7daf7cc
6 changed files with 90 additions and 20 deletions

View File

@@ -10,12 +10,6 @@
<body>
<div class="head">
<div class="breadcrumb"></div>
<div class="action" 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>
</div>
<div class="main">
<div class="uploaders">
@@ -34,11 +28,12 @@
</div>
<script>
const $head = document.querySelector(".head");
const $tbody = document.querySelector(".main tbody");
const $breadcrumb = document.querySelector(".breadcrumb");
const $fileInput = document.getElementById("file");
const $uploaders = document.querySelector(".uploaders");
const { breadcrumb, paths } = __DATA__;
const $uploadControl = document.querySelector(".upload-control");
const { breadcrumb, paths, readonly } = __DATA__;
let uploaderIdx = 0;
class Uploader {
@@ -121,6 +116,17 @@
`)
}
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":
@@ -161,14 +167,17 @@
document.addEventListener('DOMContentLoaded', () => {
addBreadcrumb(breadcrumb);
paths.forEach(file => addFile(file));
$fileInput.addEventListener("change", e => {
const files = e.target.files;
for (const file of files) {
uploaderIdx += 1;
const uploader = new Uploader(uploaderIdx, file);
uploader.upload();
}
});
if (readonly) {
addUploadControl();
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>