From 066505593b283e2ab0f8fb78aaabfe3a768d8c01 Mon Sep 17 00:00:00 2001
From: takejohn <takejohn@takejohn.jp>
Date: Tue, 18 Jun 2024 18:00:59 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=89=E3=83=A9=E3=83=83=E3=82=B0=EF=BC=86?=
 =?UTF-8?q?=E3=83=89=E3=83=AD=E3=83=83=E3=83=97=E5=8F=AF=E8=83=BD=E3=81=AB?=
 =?UTF-8?q?=20(#15)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/astro/src/components/List.astro      | 13 +++++++++
 .../astro/src/components/UploadButton.astro   | 29 +++----------------
 packages/astro/src/components/upload.mts      | 25 ++++++++++++++++
 3 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 packages/astro/src/components/upload.mts

diff --git a/packages/astro/src/components/List.astro b/packages/astro/src/components/List.astro
index 196b334..923b7ae 100644
--- a/packages/astro/src/components/List.astro
+++ b/packages/astro/src/components/List.astro
@@ -34,6 +34,8 @@ const { parentDir, files } = Astro.props;
 </style>
 
 <script>
+    import { uploadFiles } from "./upload.mts";
+
     function replaceURLSearchParam(key: string, value: string) {
         const params = new URLSearchParams(location.search);
         params.set(key, value);
@@ -58,4 +60,15 @@ const { parentDir, files } = Astro.props;
         listLayoutButton.addEventListener('click', () => setLayout('list'));
         gridLayoutButton.addEventListener('click', () => setLayout('grid'));
     });
+
+    const listElement = document.getElementById('list') as HTMLUListElement;
+
+    listElement.addEventListener('dragover', (event) => {
+        event.preventDefault();
+    });
+
+    listElement.addEventListener('drop', async (event) => {
+        event.preventDefault();
+        await uploadFiles(event.dataTransfer?.files);
+    })
 </script>
diff --git a/packages/astro/src/components/UploadButton.astro b/packages/astro/src/components/UploadButton.astro
index a7c9913..a3564c3 100644
--- a/packages/astro/src/components/UploadButton.astro
+++ b/packages/astro/src/components/UploadButton.astro
@@ -12,33 +12,12 @@ import IconButton from "./IconButton.astro";
 </style>
 
 <script>
+    import { uploadFiles } from "./upload.mts";
+
     const fileInput = document.getElementById("file-input") as HTMLInputElement;
     fileInput.addEventListener("change", async () => {
-        const files = fileInput.files;
-        if (files == null) {
-            return;
-        }
-        const file = files[0];
-        if (!window.confirm(`${file.name} をアップロードしますか？`)) return;
-        let formData = new FormData();
-        formData.append("file", file);
-        let params = new URLSearchParams({
-            path: location.pathname
-        });
-        let res = await fetch("/api/upload?" + params, {
-            method: "POST",
-            body: formData
-        });
-        if (res.status == 200) {
-            let json = await res.json();
-            alert(`アップロードしました: ${json.fileName}`);
-            return location.reload();
-        }
-        else if (res.status == 401)
-            return alert("ログインに失敗しました");
-        else
-            return alert(`不明なエラー: ${res.status} ${res.statusText}`);
-    })
+        await uploadFiles(fileInput.files);
+    });
 
     document.getElementById("upload-button")!.addEventListener("click", () => {
         console.log("trying..")
diff --git a/packages/astro/src/components/upload.mts b/packages/astro/src/components/upload.mts
new file mode 100644
index 0000000..97b8215
--- /dev/null
+++ b/packages/astro/src/components/upload.mts
@@ -0,0 +1,25 @@
+export async function uploadFiles(files?: FileList | null): Promise<void> {
+        if (files == null) {
+            return;
+        }
+        const file = files[0];
+        if (!window.confirm(`${file.name} をアップロードしますか？`)) return;
+        let formData = new FormData();
+        formData.append("file", file);
+        let params = new URLSearchParams({
+            path: location.pathname
+        });
+        let res = await fetch("/api/upload?" + params, {
+            method: "POST",
+            body: formData
+        });
+        if (res.status == 200) {
+            let json = await res.json();
+            alert(`アップロードしました: ${json.fileName}`);
+            return location.reload();
+        }
+        else if (res.status == 401)
+            return alert("ログインに失敗しました");
+        else
+            return alert(`不明なエラー: ${res.status} ${res.statusText}`);
+}