Add image upload functionality with drag-and-drop and clipboard support

frontend/src/components/image_selector.tsx

@@ -0,0 +1,163 @@
+import {MdAdd} from "react-icons/md";
+import {useTranslation} from "react-i18next";
+import {network} from "../network/network.ts";
+import showToast from "./toast.ts";
+import {useState} from "react";
+
+async function uploadImages(files: File[]): Promise<number[]> {
+  const images: number[] = [];
+  
+  for (const file of files) {
+    const res = await network.uploadImage(file);
+    if (res.success) {
+      images.push(res.data!);
+    } else {
+      showToast({
+        type: "error",
+        message: `Failed to upload image: ${res.message}`,
+      })
+    }
+  }
+  
+  return images;
+}
+
+export function SelectAndUploadImageButton({onUploaded}: {onUploaded: (image: number[]) => void}) {
+  const [isUploading, setUploading] = useState(false)
+
+  const { t } = useTranslation();
+
+  const addImage = () => {
+    if (isUploading) {
+      return
+    }
+    const input = document.createElement("input")
+    input.type = "file"
+    input.accept = "image/*"
+    input.multiple = true
+    input.onchange = async () => {
+      if (!input.files || input.files.length === 0) {
+        return
+      }
+      setUploading(true)
+      const files = Array.from(input.files);
+      const uploadedImages = await uploadImages(files);
+      setUploading(false);
+      if (uploadedImages.length > 0) {
+        onUploaded(uploadedImages);
+      }
+    }
+    input.click()
+  }
+
+  return <button className={"btn my-2"} type={"button"} onClick={addImage}>
+    {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
+    {t("Upload Image")}
+  </button>
+}
+
+export function UploadClipboardImageButton({onUploaded}: {onUploaded: (image: number[]) => void}) {
+  const [isUploading, setUploading] = useState(false)
+
+  const { t } = useTranslation();
+
+  const addClipboardImage = async () => {
+    if (isUploading) {
+      return
+    }
+    try {
+      const clipboardItems = await navigator.clipboard.read();
+      const files: File[] = [];
+      for (const item of clipboardItems) {
+        console.log(item)
+        for (const type of item.types) {
+          if (type.startsWith("image/")) {
+            const blob = await item.getType(type);
+            files.push(new File([blob], `clipboard-image.${type.split("/")[1]}`, { type }));
+          }
+        }
+      }
+      if (files.length > 0) {
+        setUploading(true);
+        const uploadedImages = await uploadImages(files);
+        setUploading(false);
+        if (uploadedImages.length > 0) {
+          onUploaded(uploadedImages);
+        }
+      } else {
+        showToast({
+          type: "error",
+          message: t("No image found in clipboard"),
+        });
+      }
+    } catch (error) {
+      showToast({
+        type: "error",
+        message: t("Failed to read clipboard image"),
+      });
+    }
+  }
+
+  return <button className={"btn my-2"} type={"button"} onClick={addClipboardImage}>
+    {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
+    {t("Upload Clipboard Image")}
+  </button>
+}
+
+export function ImageDrapArea({children, onUploaded}: {children: React.ReactNode, onUploaded: (image: number[]) => void}) {
+  const [isUploading, setUploading] = useState(false);
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isUploading) {
+      return;
+    }
+
+    if (e.dataTransfer.files.length > 0) {
+      setUploading(true);
+      let files = Array.from(e.dataTransfer.files);
+      files = files.filter(file => file.type.startsWith("image/"));
+      if (files.length === 0) {
+        setUploading(false);
+        return;
+      }
+      const uploadedImages = await uploadImages(files);
+      if (uploadedImages.length > 0) {
+        onUploaded(uploadedImages);
+      }
+      setUploading(false);
+    }
+  };
+
+  return (
+    <>
+      <dialog id="uploading_image_dialog" className="modal">
+        <div className="modal-box">
+          <h3 className="font-bold text-lg">Uploading Image</h3>
+          <div className={"flex items-center justify-center w-full h-40"}>
+            <span className="loading loading-spinner progress-primary loading-lg mr-2"></span>
+          </div>
+        </div>
+      </dialog>
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {children}
+      </div>
+    </>
+  );
+}

frontend/src/i18n.ts

@@ -177,6 +177,7 @@ export const i18nData = {
       "Input tags separated by separator.": "Input tags separated by separator.",
       "If the tag does not exist, it will be created automatically.": "If the tag does not exist, it will be created automatically.",
       "Optionally, you can specify a type for the new tags.": "Optionally, you can specify a type for the new tags.",
+      "Upload Clipboard Image": "Upload Clipboard Image",
     }
   },
   "zh-CN": {
@@ -357,6 +358,7 @@ export const i18nData = {
       "Input tags separated by separator.": "输入标签, 用分隔符分隔。",
       "If the tag does not exist, it will be created automatically.": "如果标签不存在, 将自动创建。",
       "Optionally, you can specify a type for the new tags.": "您可以选择为新标签指定一个类型。",
+      "Upload Clipboard Image": "上传剪贴板图片",
     }
   },
   "zh-TW": {
@@ -537,6 +539,7 @@ export const i18nData = {
       "Input tags separated by separator.": "輸入標籤, 用分隔符分隔。",
       "If the tag does not exist, it will be created automatically.": "如果標籤不存在, 將自動創建。",
       "Optionally, you can specify a type for the new tags.": "您可以選擇為新標籤指定一個類型。",
+      "Upload Clipboard Image": "上傳剪貼板圖片",
     }
   }
 }

frontend/src/pages/edit_resource_page.tsx

@@ -9,6 +9,7 @@ import { app } from "../app.ts";
 import { ErrorAlert } from "../components/alert.tsx";
 import Loading from "../components/loading.tsx";
 import TagInput, {QuickAddTagDialog} from "../components/tag_input.tsx";
+import {ImageDrapArea, SelectAndUploadImageButton, UploadClipboardImageButton} from "../components/image_selector.tsx";
 
 export default function EditResourcePage() {
   const [title, setTitle] = useState<string>("")
@@ -16,7 +17,6 @@ export default function EditResourcePage() {
   const [tags, setTags] = useState<Tag[]>([])
   const [article, setArticle] = useState<string>("")
   const [images, setImages] = useState<number[]>([])
-  const [isUploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isSubmitting, setSubmitting] = useState(false)
   const [isLoading, setLoading] = useState(true)
@@ -88,32 +88,6 @@ export default function EditResourcePage() {
     }
   }
   
-  const addImage = () => {
-    if (isUploading) {
-      return
-    }
-    const input = document.createElement("input")
-    input.type = "file"
-    input.accept = "image/*"
-    input.onchange = async () => {
-      const files = input.files
-      if (!files || files.length === 0) {
-        return
-      }
-      const image = files[0]
-      setUploading(true)
-      const res = await network.uploadImage(image)
-      if (res.success) {
-        setUploading(false)
-        setImages([...images, res.data!])
-      } else {
-        setUploading(false)
-        showToast({ message: t("Failed to upload image"), type: "error" })
-      }
-    }
-    input.click()
-  }
-  
   if (isNaN(id)) {
     return <ErrorAlert className={"m-4"} message={t("Invalid resource ID")} />
   }
@@ -126,7 +100,10 @@ export default function EditResourcePage() {
     return <Loading/>
   }
 
-  return <div className={"p-4"}>
+  return <ImageDrapArea onUploaded={(images) => {
+    setImages((prev) => ([...prev, ...images]));
+  }}>
+    <div className={"p-4"}>
       <h1 className={"text-2xl font-bold my-4"}>{t("Edit Resource")}</h1>
       <div role="alert" className="alert alert-info mb-2 alert-dash">
         <MdOutlineInfo size={24} />
@@ -254,10 +231,15 @@ export default function EditResourcePage() {
           </tbody>
         </table>
       </div>
-    <button className={"btn my-2"} type={"button"} onClick={addImage}>
+      <div className={"flex"}>
-      {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
+        <SelectAndUploadImageButton onUploaded={(images) => {
-      {t("Upload Image")}
+          setImages((prev) => ([...prev, ...images]));
-    </button>
+        }}/>
+        <span className={"w-4"}></span>
+        <UploadClipboardImageButton onUploaded={(images) => {
+          setImages((prev) => ([...prev, ...images]));
+        }}/>
+      </div>
       <div className={"h-4"}></div>
       {
         error && <div role="alert" className="alert alert-error my-2 shadow">
@@ -276,4 +258,5 @@ export default function EditResourcePage() {
         </button>
       </div>
     </div>
+  </ImageDrapArea>
 }

frontend/src/pages/publish_page.tsx

@@ -3,12 +3,12 @@ import {MdAdd, MdClose, MdDelete, MdOutlineInfo} from "react-icons/md";
 import { Tag } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import { useNavigate } from "react-router";
-import showToast from "../components/toast.ts";
 import { useTranslation } from "react-i18next";
 import { app } from "../app.ts";
 import { ErrorAlert } from "../components/alert.tsx";
 import {useAppContext} from "../components/AppContext.tsx";
 import TagInput, {QuickAddTagDialog} from "../components/tag_input.tsx";
+import {ImageDrapArea, SelectAndUploadImageButton, UploadClipboardImageButton} from "../components/image_selector.tsx";
 
 export default function PublishPage() {
   const [title, setTitle] = useState<string>("")
@@ -16,7 +16,6 @@ export default function PublishPage() {
   const [tags, setTags] = useState<Tag[]>([])
   const [article, setArticle] = useState<string>("")
   const [images, setImages] = useState<number[]>([])
-  const [isUploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isSubmitting, setSubmitting] = useState(false)
 
@@ -68,32 +67,6 @@ export default function PublishPage() {
     }
   }
 
-  const addImage = () => {
-    if (isUploading) {
-      return
-    }
-    const input = document.createElement("input")
-    input.type = "file"
-    input.accept = "image/*"
-    input.onchange = async () => {
-      const files = input.files
-      if (!files || files.length === 0) {
-        return
-      }
-      const image = files[0]
-      setUploading(true)
-      const res = await network.uploadImage(image)
-      if (res.success) {
-        setUploading(false)
-        setImages([...images, res.data!])
-      } else {
-        setUploading(false)
-        showToast({ message: t("Failed to upload image"), type: "error" })
-      }
-    }
-    input.click()
-  }
-
   if (!app.user) {
     return <ErrorAlert className={"m-4"} message={t("You are not logged in. Please log in to access this page.")} />
   }
@@ -102,7 +75,10 @@ export default function PublishPage() {
     return <ErrorAlert className={"m-4"} message={t("You are not authorized to access this page.")} />
   }
 
-  return <div className={"p-4"}>
+  return <ImageDrapArea onUploaded={(images) => {
+    setImages((prev) => ([...prev, ...images]));
+  }}>
+    <div className={"p-4"}>
       <h1 className={"text-2xl font-bold my-4"}>{t("Publish Resource")}</h1>
       <div role="alert" className="alert alert-info mb-2 alert-dash">
         <MdOutlineInfo size={24} />
@@ -230,10 +206,15 @@ export default function PublishPage() {
           </tbody>
         </table>
       </div>
-    <button className={"btn my-2"} type={"button"} onClick={addImage}>
+      <div className={"flex"}>
-      {isUploading ? <span className="loading loading-spinner"></span> : <MdAdd />}
+        <SelectAndUploadImageButton onUploaded={(images) => {
-      {t("Upload Image")}
+          setImages((prev) => ([...prev, ...images]));
-    </button>
+        }}/>
+        <span className={"w-4"}></span>
+        <UploadClipboardImageButton onUploaded={(images) => {
+          setImages((prev) => ([...prev, ...images]));
+        }}/>
+      </div>
       <div className={"h-4"}></div>
       {
         error && <div role="alert" className="alert alert-error my-2 shadow">
@@ -252,4 +233,5 @@ export default function PublishPage() {
         </button>
       </div>
     </div>
+  </ImageDrapArea>
 }