add file dropper

- add filedropper to root - move functions to external JS
mchangrh · Aug 15, 2024 · 90184b3 · 90184b3
1 parent 069bd72
commit 90184b3
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+.wrangler/
diff --git a/docs/drop.html b/docs/drop.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      @import url("style.css");
+    </style>
+  </head>
+  <body>
+    <div class="center" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
+      <h3>File Drop</h3>
+      <label for="select-file">Click to browse</label>
+      <input
+        type="file"
+        id="select-file"
+        onchange="chooseHandler(event)"
+      >
+      <ul id="filelist">Uploaded Files:</ul>
+    </div>
+    <script src="upload.js"></script>
+  </body>
+</html>
diff --git a/docs/editor.html b/docs/editor.html
@@ -11,7 +11,7 @@ <h3>Text Editor</h3>
     <textarea id="text_body"></textarea>
     <div id="log"></div>
     <script>
-      const BINURL = "https://bin.mchang.xyz"
+      const BINURL = "https://b.mmpc.me"
       async function update() {
         const binid = document.getElementById("binid").value
         const postData = document.getElementById("text_body").value

diff --git a/docs/index.html b/docs/index.html
@@ -6,46 +6,24 @@
     </style>
   </head>
   <body>
-    <h3>Text Upload</h3>
+    <h3>Upload</h3>
     Content-Type: <input id="content_type" value="text/plain">
-    <textarea id="upload_body"></textarea>
-    <button onclick="upload()">Upload</button>
+    <textarea id="upload_body"
+      placeholder="Drop Files Here"
+      ondrop="dropHandler(event)"
+      ondragover="dragOverHandler(event)"></textarea>
+    <label for="select-file">Choose File</label>
+    <input
+      type="file"
+      id="select-file"
+      onchange="chooseHandler(event)"
+    >
+    <button onclick="uploadText()">Upload</button>
     <h3>URL Redirect</h3>
     Destination: <input id="dest" placeholder="https://google.com">
     <br>
-    <button onclick="url()">Set Redirect</button>
-    <h3>Result</h3>
-    Result Link: <a id="binlink">null</a>
-    <script>
-      const BINURL = "https://bin.mchang.xyz"
-      async function upload() {
-        const postData = document.getElementById("upload_body").value
-        const contentType = document.getElementById("content_type").value
-        await fetch(BINURL+"/b", {
-          method: "POST",
-          body: postData,
-          headers: { "Content-Type": contentType }
-        }).then(resp => {
-          return resp.text()
-        }).then(binid => {
-          const link = `${BINURL}/b/${binid}`
-          document.getElementById("binlink").href = link
-          document.getElementById("binlink").innerHTML = link
-        })
-      }
-      async function url() {
-        const dest = document.getElementById("dest").value
-        await fetch(`${BINURL}/u`, {
-          method: "POST",
-          body: dest,
-        }).then(resp => {
-          return (resp.status == 200) ? resp.text() : "error" 
-        }).then(binid => {
-          const link = `${BINURL}/u/${binid}`
-          document.getElementById("binlink").href = link
-          document.getElementById("binlink").innerHTML = link
-        })
-      }
-    </script>
+    <button onclick="setUrl()">Set Redirect</button>
+    <ul id="filelist"><h3>Uploaded:</h3></ul>
+    <script src="upload.js"></script>
   </body>
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -15,4 +15,26 @@ input, button, textarea {
 }
 a, body {
   color: #ddd;
+}
+ul {
+  padding: 0;
+  display: none;
+}
+ul:has(>a) {
+  display: flex;
+  flex-direction: column;
+}
+input[type="file"] {
+  display: none;
+}
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 98vh
+}
+label {
+  cursor: pointer;
+  text-decoration: underline;
 }
diff --git a/docs/upload.js b/docs/upload.js
@@ -0,0 +1,30 @@
+const BINURL = "https://b.mmpc.me"
+const SIZELIMIT = 1024 * 1024 * 25 // 25MB
+
+function addFile(binurl, filename) {
+  const a = document.createElement("a")
+  a.href = `${binurl}/${filename}`
+  a.innerText = filename || binurl
+  document.getElementById("filelist").appendChild(a)
+  clipboard(a.href)
+}
+const upload = (body, contentType, fileName, binType = "b") =>
+  fetch(`${BINURL}/${binType}`, {
+    method: "POST", headers: { "Content-Type": contentType, "File-Name": fileName }, body
+  })
+    .then(async (res) => addFile(`${BINURL}/${binType}/${await res.text()}`, fileName))
+    .catch((err) => console.error(err))
+const uploadText = () => upload(document.getElementById("upload_body").value, "text/plain", "text.txt")
+const setUrl = () => upload(document.getElementById("dest").value, "", "", "u")
+const uploadFile = (file) => upload(file, file.type, file.name)
+const fileHandler = (files) => files.forEach((file) => {
+  if (file.size > SIZELIMIT) alert(`File ${file.name} is too large (${(file.size / 1024 / 1024).toFixed(1)}MB)`)
+  uploadFile(file)
+})
+const dropHandler = (e) => {
+  e.preventDefault()
+  fileHandler(e.dataTransfer.files)
+};
+const chooseHandler = (e) => fileHandler(e.target.files)
+const dragOverHandler = (e) => e.preventDefault()
+const clipboard = (str) => navigator.clipboard.writeText(str)
diff --git a/worker/consts.ts b/worker/consts.ts
@@ -61,6 +61,7 @@ export const API_DOCS = {
   "/ping": "pong",
   "/upload": "mchangrh.github.io/cfkv-bin",
   "/editor": "mchangrh.github.io/cfkv-bin/editor",
+  "/drop": "mchangrh.github.io/cfkv-bin/drop",
   "/version": "short git commit id",
   "/github": "https://github.com/mchangrh/cfkv-bin",
   "/api": "this",
@@ -74,7 +75,7 @@ export const methods = ["get", "post", "put", "delete"]
 export const stdheaders = {
   "Access-Control-Allow-Origin": "*",
   "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
-  "Access-Control-Allow-Headers": "Content-Type, File-Name, X-Requested-With",
+  "Access-Control-Allow-Headers": "Content-Type, File-Name",
   "Cache-Control": "no-store,max-age=0,no-cache,must-revalidate,proxy-revalidate",
   "X-Robots-Tag": "noindex, nofollow, noarchive, nosnippet",
 }

diff --git a/worker/index.ts b/worker/index.ts
@@ -81,6 +81,7 @@ const handleRequest = async (request: Request) => {
   else if (pathname === '/github') return redirectResponse('https://github.com/mchangrh/cfkv-bin#readme')
   else if (pathname === '/upload') return redirectResponse('https://mchangrh.github.io/cfkv-bin/')
   else if (pathname === '/editor') return redirectResponse('https://mchangrh.github.io/cfkv-bin/editor')
+  else if (pathname === '/drop') return redirectResponse('https://mchangrh.github.io/cfkv-bin/drop')
   else if (pathname === '/robots.txt') return textResponse('User-agent: *\nDisallow: /')
   else if (pathname === '/favicon.ico') return new Response(null, { status: 404 })
   // send type to handlers