Drag and drop upload

README.md

@@ -11,6 +11,7 @@ Free serverless backend with a limit of 100,000 invocation requests per day.
 - Search files
 - Image/video/PDF thumbnails
 - WebDAV endpoint
+- Drag and drop upload
 
 ## Usage
 

src/FileGrid.tsx

@@ -44,17 +44,32 @@ function FileGrid({
   multiSelected,
   onMultiSelect,
   emptyMessage,
+  onDropFiles,
 }: {
   files: FileItem[];
   onCwdChange: (newCwd: string) => void;
   multiSelected: string[] | null;
   onMultiSelect: (key: string) => void;
   emptyMessage?: React.ReactNode;
+  onDropFiles?: (files: File[]) => void;
 }) {
   return files.length === 0 ? (
     emptyMessage
   ) : (
-    <Grid container sx={{ overflowY: "auto", paddingBottom: "48px" }}>
+    <Grid
+      container
+      sx={{ overflowY: "auto", paddingBottom: "48px" }}
+      onDragEnter={(event) => event.preventDefault()}
+      onDragOver={(event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }}
+      onDrop={(event) => {
+        event.preventDefault();
+        const files = Array.from(event.dataTransfer.files);
+        onDropFiles?.(files);
+      }}
+    >
       {files.map((file) => (
         <Grid item key={file.key} xs={12} sm={6} md={4} lg={3} xl={2}>
           <ListItemButton

src/Main.tsx

@@ -12,7 +12,12 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import FileGrid, { encodeKey, FileItem, isDirectory } from "./FileGrid";
 import MultiSelectToolbar from "./MultiSelectToolbar";
 import UploadDrawer, { UploadFab } from "./UploadDrawer";
-import { copyPaste, fetchPath } from "./app/transfer";
+import {
+  copyPaste,
+  fetchPath,
+  processUploadQueue,
+  uploadQueue,
+} from "./app/transfer";
 
 function Centered({ children }: { children: React.ReactNode }) {
   return (
@@ -135,6 +140,11 @@ function Main({
           multiSelected={multiSelected}
           onMultiSelect={handleMultiSelect}
           emptyMessage={<Centered>No files or folders</Centered>}
+          onDropFiles={async (files) => {
+            uploadQueue.push(...files.map((file) => ({ file, basedir: cwd })));
+            await processUploadQueue();
+            fetchFiles();
+          }}
         />
       )}
       {multiSelected === null && (

src/MimeIcon.tsx

@@ -1,6 +1,7 @@
 import AudioFileIcon from "@mui/icons-material/AudioFile";
 import CodeIcon from "@mui/icons-material/Code";
 import FolderIcon from "@mui/icons-material/Folder";
+import FolderZipOutlinedIcon from "@mui/icons-material/FolderZipOutlined";
 import ImageIcon from "@mui/icons-material/Image";
 import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
 import PdfIcon from "@mui/icons-material/PictureAsPdf";
@@ -18,6 +19,8 @@ function MimeIcon({ contentType }: { contentType: string }) {
     <VideoFileIcon fontSize="large" />
   ) : contentType === "application/pdf" ? (
     <PdfIcon fontSize="large" />
+  ) : ["application/zip", "application/gzip"].includes(contentType) ? (
+    <FolderZipOutlinedIcon fontSize="large" />
   ) : contentType.startsWith("text/") ? (
     <CodeIcon fontSize="large" />
   ) : contentType === "application/x-directory" ? (