From 14c8679ac6a15a819e53a0229ec5d6e87d498013 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 24 Jan 2026 21:09:00 +0800
Subject: [PATCH] fix: use button with ref to trigger file upload dialog

---
 components/canvas/nodes/ImageNode.tsx | 41 +++++++++++++++++----------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index a6603edf4..ce2af1e87 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { ImagePlus, Loader2, AlertCircle, MoreVertical, Scissors, Sparkles, Expand, Maximize2, Move3D, Layers, Download, Trash2, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -29,12 +29,21 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
   const [isProcessing, setIsProcessing] = useState(false);
   const [angleDialogOpen, setAngleDialogOpen] = useState(false);
   const [sceneFusionDialogOpen, setSceneFusionDialogOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  
+  // 文件输入的 ref
+  const fileInputRef = useRef<HTMLInputElement>(null);
   
   const updateNode = useCanvasStore((state) => state.updateNode);
   const deleteNode = useCanvasStore((state) => state.deleteNode);
   const addNode = useCanvasStore((state) => state.addNode);
 
-  const [isUploading, setIsUploading] = useState(false);
+  // 触发文件选择
+  const handleSelectFile = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  };
 
   // 处理图片上传 - 上传到存储桶，不使用 Base64
   const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -224,20 +233,22 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           <div className="w-full h-full flex flex-col items-center justify-center bg-muted">
             <ImagePlus className="h-8 w-8 text-muted-foreground mb-2" />
             <span className="text-sm text-muted-foreground mb-3">点击上传图片</span>
-            <label 
-              className="cursor-pointer"
-              onClick={(e) => e.stopPropagation()}
+            {/* 隐藏的文件输入 */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleImageUpload}
+            />
+            {/* 选择文件按钮 */}
+            <button
+              type="button"
+              onClick={handleSelectFile}
+              className="px-4 py-2 bg-primary text-primary-foreground text-sm rounded-md hover:bg-primary/90 transition-colors cursor-pointer"
             >
-              <input
-                type="file"
-                accept="image/*"
-                className="hidden"
-                onChange={handleImageUpload}
-              />
-              <span className="px-4 py-2 bg-primary text-primary-foreground text-sm rounded-md hover:bg-primary/90 transition-colors">
-                选择文件
-              </span>
-            </label>
+              选择文件
+            </button>
           </div>
         )}