feat: ui supports creating folder (#91)

assets/index.css

@@ -59,6 +59,15 @@ body {
   height: 1.1rem;
 }
 
+.toolbox .control {
+  cursor: pointer;
+  padding-left: 0.25em;
+}
+
+.upload-file input {
+  display: none;
+}
+
 .searchbar {
   display: flex;
   flex-wrap: nowrap;
@@ -90,15 +99,6 @@ body {
   cursor: pointer;
 }
 
-.upload-control {
-  cursor: pointer;
-  padding-left: 0.25em;
-}
-
-.upload-control input {
-  display: none;
-}
-
 .upload-status span {
   width: 70px;
   display: inline-block;

assets/index.html

@@ -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>
         </a>
       </div>
-      <div class="upload-control hidden" title="Upload files">
+      <div class="control upload-file hidden" title="Upload files">
         <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>
         </label>
         <input type="file" id="file" name="file" multiple>
       </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>
     <form class="searchbar hidden">
       <div class="icon">

assets/index.js

@@ -29,6 +29,10 @@ let $uploadersTable;
  * @type Element
  */
 let $emptyFolder;
+/**
+ * @type Element
+ */
+let $newFolder;
 
 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) {
   for (const entry of entries) {
     if (entry.isFile) {
@@ -340,6 +362,7 @@ function ready() {
   $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");
@@ -365,7 +388,12 @@ function ready() {
   }
   if (DATA.allow_upload) {
     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 => {
       const files = e.target.files;
       for (let file of files) {