Merge pull request #21 from takejohn/feature/15-drag-and-drop

ドラッグ＆ドロップ可能に (#15)
TeamSekai · Jun 18, 2024 · 700a2e3 · 700a2e3
2 parents 0118308 + 0665055
commit 700a2e3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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}`);
+}