Allow pasting image on order creation

src/frontend/src/views/CreateOrderView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   PlusCircleOutlined,
   UploadOutlined,
@@ -144,19 +144,28 @@ export default function CreateOrderView() {
   });
   const importFileInputRef = useRef<HTMLInputElement>(null);
 
-  const beforeImageUpload: UploadProps["beforeUpload"] = (file) => {
-    const allowed = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp"]);
+  const ALLOWED_IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp"]);
+
+  const validateImageFile = (file: File): boolean => {
     const fileExt = "." + (file.name.split(".").pop() || "").toLowerCase();
 
-    if (!allowed.has(fileExt)) {
+    if (!ALLOWED_IMAGE_EXTENSIONS.has(fileExt)) {
       message.error(
         "File type not allowed. Allowed types: jpg, jpeg, png, gif, webp",
       );
-      return Upload.LIST_IGNORE;
+      return false;
     }
 
     if (file.size > 10 * 1024 * 1024) {
       message.error("File size must be less than 10MB");
+      return false;
+    }
+
+    return true;
+  };
+
+  const beforeImageUpload: UploadProps["beforeUpload"] = (file) => {
+    if (!validateImageFile(file)) {
       return Upload.LIST_IGNORE;
     }
 
@@ -164,6 +173,41 @@ export default function CreateOrderView() {
     return false;
   };
 
+  // Allow pasting an image from the clipboard (e.g. "Copy image" in a browser).
+  useEffect(() => {
+    const onPaste = (event: ClipboardEvent) => {
+      const item = Array.from(event.clipboardData?.items ?? []).find(
+        (entry) => entry.kind === "file" && entry.type.startsWith("image/"),
+      );
+      const blob = item?.getAsFile();
+      if (!blob) return;
+
+      event.preventDefault();
+
+      // Clipboard images often have a generic or missing name; derive the extension from the MIME type.
+      const ext = blob.type.split("/")[1]?.replace("jpeg", "jpg") || "png";
+      const file = new File([blob], `pasted-image-${Date.now()}.${ext}`, {
+        type: blob.type,
+      });
+      if (!validateImageFile(file)) return;
+
+      setImageFileList([
+        {
+          uid: `pasted-${Date.now()}`,
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          originFileObj: file as UploadFile["originFileObj"],
+        },
+      ]);
+      setActiveTabKey("details");
+      message.success("Image pasted from clipboard");
+    };
+
+    document.addEventListener("paste", onPaste);
+    return () => document.removeEventListener("paste", onPaste);
+  }, []);
+
   const getNativeFile = (uploadFile?: UploadFile): File | null => {
     if (!uploadFile) return null;
     if (uploadFile.originFileObj instanceof File) {
@@ -466,7 +510,7 @@ export default function CreateOrderView() {
                       </Form.Item>
                       <Form.Item
                         label="Image"
-                        extra="Add an image alongside the description."
+                        extra="Add an image alongside the description. You can also paste an image from the clipboard (Ctrl+V)."
                       >
                         <Upload
                           accept=".jpg,.jpeg,.png,.gif,.webp,image/*"