file uploader

islands/fileUploader.tsx

@@ -0,0 +1,71 @@
+import { useState } from "preact/hooks";
+import { FunctionComponent } from "preact";
+
+export const FileUploader: FunctionComponent<{ path: string }> = (
+  { children, path },
+) => {
+  const [hovered, setHovered] = useState(false);
+
+  const playSound = () => {
+    const sound = new Audio(
+      "https://cdn.pixabay.com/audio/2023/07/21/audio_5634777127.mp3",
+    );
+    sound.play();
+  };
+
+  const defaultPreventer = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const uploadFiles = async (files: File[]) => {
+    if (!files.length) return;
+
+    const formData = new FormData();
+    for (const file of files) {
+      formData.append(file.name, file);
+    }
+
+    await fetch("/upload", {
+      method: "POST",
+      body: formData,
+      headers: {
+        "x-grizz-path": path,
+      },
+    });
+
+    location.reload();
+  };
+
+  return (
+    <div
+      class="relative grid"
+      onDragEnter={(e) => {
+        defaultPreventer(e);
+        setHovered(true);
+      }}
+      onDragOver={(e) => {
+        defaultPreventer(e);
+        setHovered(true);
+      }}
+      onDrop={(e) => {
+        defaultPreventer(e);
+        playSound();
+        const files = Array.from(e.dataTransfer?.files || []);
+        uploadFiles(files);
+        setHovered(false);
+      }}
+      onDragLeave={(e) => {
+        defaultPreventer(e);
+        setHovered(false);
+      }}
+    >
+      {children}
+      {hovered && (
+        <div class="absolute place-self-center">
+          <i class="fas fa-cloud-arrow-up fa-4x"></i>
+        </div>
+      )}
+    </div>
+  );
+};