fix: use button with ref to trigger file upload dialog
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-01-24 21:09:00 +08:00
parent 6a2cbb1b49
commit 14c8679ac6

View File

@ -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>
)}