mirror of
https://github.com/sigoden/dufs
synced 2024-09-05 23:03:32 +00:00
feat: ui supports creating folder (#91)
This commit is contained in:
parent
4f1a35de5d
commit
b6729a3d64
|
@ -59,6 +59,15 @@ body {
|
||||||
height: 1.1rem;
|
height: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbox .control {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-file input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.searchbar {
|
.searchbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
@ -90,15 +99,6 @@ body {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-control {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-control input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-status span {
|
.upload-status span {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -15,12 +15,18 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload-control hidden" title="Upload files">
|
<div class="control upload-file hidden" title="Upload files">
|
||||||
<label for="file">
|
<label for="file">
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>
|
||||||
</label>
|
</label>
|
||||||
<input type="file" id="file" name="file" multiple>
|
<input type="file" id="file" name="file" multiple>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="control new-folder hidden" title="New folder">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<path d="m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z"/>
|
||||||
|
<path d="M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form class="searchbar hidden">
|
<form class="searchbar hidden">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
|
|
|
@ -29,6 +29,10 @@ let $uploadersTable;
|
||||||
* @type Element
|
* @type Element
|
||||||
*/
|
*/
|
||||||
let $emptyFolder;
|
let $emptyFolder;
|
||||||
|
/**
|
||||||
|
* @type Element
|
||||||
|
*/
|
||||||
|
let $newFolder;
|
||||||
|
|
||||||
class Uploader {
|
class Uploader {
|
||||||
/**
|
/**
|
||||||
|
@ -255,6 +259,24 @@ function dropzone() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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) {
|
async function addFileEntries(entries, dirs) {
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (entry.isFile) {
|
if (entry.isFile) {
|
||||||
|
@ -340,6 +362,7 @@ function ready() {
|
||||||
$pathsTableBody = document.querySelector(".paths-table tbody");
|
$pathsTableBody = document.querySelector(".paths-table tbody");
|
||||||
$uploadersTable = document.querySelector(".uploaders-table");
|
$uploadersTable = document.querySelector(".uploaders-table");
|
||||||
$emptyFolder = document.querySelector(".empty-folder");
|
$emptyFolder = document.querySelector(".empty-folder");
|
||||||
|
$newFolder = document.querySelector(".new-folder");
|
||||||
|
|
||||||
if (DATA.allow_search) {
|
if (DATA.allow_search) {
|
||||||
document.querySelector(".searchbar").classList.remove("hidden");
|
document.querySelector(".searchbar").classList.remove("hidden");
|
||||||
|
@ -365,7 +388,12 @@ function ready() {
|
||||||
}
|
}
|
||||||
if (DATA.allow_upload) {
|
if (DATA.allow_upload) {
|
||||||
dropzone();
|
dropzone();
|
||||||
document.querySelector(".upload-control").classList.remove("hidden");
|
$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 => {
|
document.getElementById("file").addEventListener("change", e => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
for (let file of files) {
|
for (let file of files) {
|
||||||
|
|
Loading…
Reference in a new issue