feat: add rename option

cloud-cli · May 15, 2024 · 8bcaca5 · 8bcaca5
1 parent 2d766e1
commit 8bcaca5
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/filebin.mjs b/filebin.mjs
@@ -1,6 +1,7 @@
 const API_URL = '__API_HOST__';
 
 const u = (s) => new URL(s, API_URL);
+const h = { method: 'HEAD', mode: 'cors' };
 const g = { method: 'GET', mode: 'cors' };
 const p = { method: 'POST', mode: 'cors' };
 const d = { method: 'DELETE', mode: 'cors' };
@@ -96,6 +97,17 @@ export async function readFile(bin, file) {
   return req.ok ? req : Promise.reject(new Error('Failed to retrieve this file'));
 }
 
+/**
+ * @param {string} bin
+ * @param {string} file
+ * @returns {Promise<Response>} OK
+ */
+export async function fileExists(bin, file) {
+  const req = await fetch(u(`/f/${bin}/${file}`), h);
+
+  return req.ok && req.status === 200;
+}
+
 /**
  * @param {string} bin
  * @param {string} file

diff --git a/index.html b/index.html
@@ -67,10 +67,10 @@
       <td
         class="px-4 align-middle text-right"
       >
-        <div class="flex"><a
+        <div class="flex">
+          <a
             class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3"
-            target="_blank" href="${file.url}"
-        >
+            target="_blank" href="${file.url}">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -108,7 +108,15 @@
             <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
             <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
             </svg>
-        </button></div>
+            <span class="sr-only">Remove</span>
+        </button>
+        <button
+            class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background hover:bg-accent hover:text-accent-foreground h-9 px-3"
+            onclick="onRename('${file.bin}', '${file.id}')">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="none" stroke="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
+            <span class="sr-only">Rename</span>
+        </button>
+        </div>
       </td>
       </tr>`;
       }
@@ -243,6 +251,16 @@
           }
         };
 
+        window.onRename = async function (bin, file) {
+          const meta = await readMetadata(bin, file);
+          const name = prompt('Rename', meta.name);
+
+          if (name) {
+            await writeMetadata(bin, file, { ...meta, name });
+            await updateList();
+          }
+        };
+
         heading.addEventListener("click", updateList);
         uploadform.addEventListener("submit", onUpload);
         fileuploadbutton.addEventListener("click", () =>
@@ -379,9 +397,9 @@ <h1 class="font-semibold text-lg md:text-2xl">Your Files</h1>
           >
             Upload File
           </h2>
-          <!-- <p id="radix-:uploadH2:" class="text-sm text-muted-foreground">
-            Drag and drop your files here or click to select files.
-          </p> -->
+          <p id="radix-:uploadH2:" class="text-sm text-muted-foreground">
+            Drag and drop your files on the page or select a file.
+          </p>
         </div>
         <div class="grid gap-4 py-4">
           <div class="grid w-full gap-1.5">

diff --git a/src/index.ts b/src/index.ts
@@ -11,6 +11,17 @@ import * as yauzl from 'yauzl';
 const rootDir = process.env.ROOT_DIR;
 export type Options = { port?: Number };
 
+async function onFileExists(_req, res, args) {
+  const { binId = '', fileId = '' } = args;
+  const filePath = join(rootDir, binId, fileId);
+
+  if (!(binId && fileId && existsSync(filePath))) {
+    return notFound(res);
+  }
+
+  res.end();
+}
+
 async function onReadFile(_req, res, args) {
   const { binId = '', fileId = '' } = args;
   const filePath = join(rootDir, binId, fileId);
@@ -361,6 +372,7 @@ const match = router({
   'DELETE /bin/:binId': onDeleteBin,
 
   'POST /f/:binId': onCreateFile,
+  'HEAD /f/:binId/:fileId': onFileExists,
   'GET /f/:binId/:fileId': onReadFile,
   'PUT /f/:binId/:fileId': onWriteFile,
   'DELETE /f/:binId/:fileId': onDeleteFile,