@lobehub/chat 1.114.4 → 1.114.6

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUpload.tsx

@@ -12,6 +12,7 @@ import { useFileStore } from '@/store/file';
 import { FileUploadStatus } from '@/types/files/upload';
 
 import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { useUploadFilesValidation } from '../hooks/useUploadFilesValidation';
 import { useConfigPanelStyles } from '../style';
 
 // ======== Business Types ======== //
@@ -19,6 +20,7 @@ import { useConfigPanelStyles } from '../style';
 export interface ImageUploadProps {
   // Callback when URL changes
   className?: string; // Image URL
+  maxFileSize?: number;
   onChange?: (url?: string) => void;
   style?: React.CSSProperties;
   value?: string | null;
@@ -414,212 +416,221 @@ SuccessDisplay.displayName = 'SuccessDisplay';
 
 // ======== Main Component ======== //
 
-const ImageUpload: FC<ImageUploadProps> = memo(({ value, onChange, style, className }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
-  const [uploadState, setUploadState] = useState<UploadState | null>(null);
-  const { t } = useTranslation('components');
-  const { message } = App.useApp();
-
-  // Cleanup blob URLs to prevent memory leaks
-  useEffect(() => {
-    return () => {
-      if (uploadState?.previewUrl && isLocalBlobUrl(uploadState.previewUrl)) {
-        URL.revokeObjectURL(uploadState.previewUrl);
-      }
+const ImageUpload: FC<ImageUploadProps> = memo(
+  ({ value, onChange, style, className, maxFileSize }) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
+    const [uploadState, setUploadState] = useState<UploadState | null>(null);
+    const { t } = useTranslation('components');
+    const { message } = App.useApp();
+    const { validateFiles } = useUploadFilesValidation(undefined, maxFileSize);
+
+    // Cleanup blob URLs to prevent memory leaks
+    useEffect(() => {
+      return () => {
+        if (uploadState?.previewUrl && isLocalBlobUrl(uploadState.previewUrl)) {
+          URL.revokeObjectURL(uploadState.previewUrl);
+        }
+      };
+    }, [uploadState?.previewUrl]);
+
+    const handleFileSelect = () => {
+      inputRef.current?.click();
     };
-  }, [uploadState?.previewUrl]);
 
-  const handleFileSelect = () => {
-    inputRef.current?.click();
-  };
+    const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
 
-  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
+      // Validate file using unified validation hook
+      if (!validateFiles([file])) return;
 
-    // Create preview URL
-    const previewUrl = URL.createObjectURL(file);
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(file);
 
-    // Set initial upload state
-    setUploadState({
-      previewUrl,
-      progress: 0,
-      status: 'pending',
-    });
-
-    try {
-      // Start upload
-      const result = await uploadWithProgress({
-        file,
-        onStatusUpdate: (updateData) => {
-          if (updateData.type === 'updateFile') {
-            setUploadState((prev) => {
-              if (!prev) return null;
-
-              const fileStatus = updateData.value.status;
-              if (!fileStatus) return prev;
-
-              return {
-                ...prev,
-                error: fileStatus === 'error' ? 'Upload failed' : undefined,
-                progress: updateData.value.uploadState?.progress || 0,
-                status: fileStatus,
-              };
-            });
-          } else if (updateData.type === 'removeFile') {
-            // Handle file removal
-            setUploadState(null);
-          }
-        },
-        skipCheckFileType: true,
+      // Set initial upload state
+      setUploadState({
+        previewUrl,
+        progress: 0,
+        status: 'pending',
       });
 
-      if (result?.url) {
-        // Upload successful
-        onChange?.(result.url);
-      }
-    } catch {
-      // Upload failed
-      setUploadState((prev) =>
-        prev
-          ? {
-              ...prev,
-              error: 'Upload failed',
-              status: 'error',
+      try {
+        // Start upload
+        const result = await uploadWithProgress({
+          file,
+          onStatusUpdate: (updateData) => {
+            if (updateData.type === 'updateFile') {
+              setUploadState((prev) => {
+                if (!prev) return null;
+
+                const fileStatus = updateData.value.status;
+                if (!fileStatus) return prev;
+
+                return {
+                  ...prev,
+                  error: fileStatus === 'error' ? 'Upload failed' : undefined,
+                  progress: updateData.value.uploadState?.progress || 0,
+                  status: fileStatus,
+                };
+              });
+            } else if (updateData.type === 'removeFile') {
+              // Handle file removal
+              setUploadState(null);
             }
-          : null,
-      );
-    } finally {
-      // Cleanup
-      if (isLocalBlobUrl(previewUrl)) {
-        URL.revokeObjectURL(previewUrl);
+          },
+          skipCheckFileType: true,
+        });
+
+        if (result?.url) {
+          // Upload successful
+          onChange?.(result.url);
+        }
+      } catch {
+        // Upload failed
+        setUploadState((prev) =>
+          prev
+            ? {
+                ...prev,
+                error: 'Upload failed',
+                status: 'error',
+              }
+            : null,
+        );
+      } finally {
+        // Cleanup
+        if (isLocalBlobUrl(previewUrl)) {
+          URL.revokeObjectURL(previewUrl);
+        }
+
+        // Clear upload state after a delay to show completion
+        setTimeout(() => {
+          setUploadState(null);
+        }, 1000);
       }
+    };
 
-      // Clear upload state after a delay to show completion
-      setTimeout(() => {
-        setUploadState(null);
-      }, 1000);
-    }
-  };
-
-  const handleDelete = () => {
-    onChange?.(undefined);
-  };
-
-  const handleDrop = async (files: File[]) => {
-    // Show warning if multiple files detected
-    if (files.length > 1) {
-      message.warning(t('ImageUpload.actions.dropMultipleFiles'));
-    }
-
-    // Take the first image file
-    const file = files[0];
+    const handleDelete = () => {
+      onChange?.(undefined);
+    };
 
-    // Create preview URL
-    const previewUrl = URL.createObjectURL(file);
+    const handleDrop = async (files: File[]) => {
+      // Show warning if multiple files detected
+      if (files.length > 1) {
+        message.warning(t('ImageUpload.actions.dropMultipleFiles'));
+      }
 
-    // Set initial upload state
-    setUploadState({
-      previewUrl,
-      progress: 0,
-      status: 'pending',
-    });
+      // Take the first image file
+      const file = files[0];
 
-    try {
-      // Start upload using the same logic as handleFileChange
-      const result = await uploadWithProgress({
-        file,
-        onStatusUpdate: (updateData) => {
-          if (updateData.type === 'updateFile') {
-            setUploadState((prev) => {
-              if (!prev) return null;
+      // Validate file using unified validation hook
+      if (!validateFiles([file])) return;
 
-              const fileStatus = updateData.value.status;
-              if (!fileStatus) return prev;
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(file);
 
-              return {
-                ...prev,
-                error: fileStatus === 'error' ? 'Upload failed' : undefined,
-                progress: updateData.value.uploadState?.progress || 0,
-                status: fileStatus,
-              };
-            });
-          } else if (updateData.type === 'removeFile') {
-            setUploadState(null);
-          }
-        },
-        skipCheckFileType: true,
+      // Set initial upload state
+      setUploadState({
+        previewUrl,
+        progress: 0,
+        status: 'pending',
       });
 
-      if (result?.url) {
-        // Upload successful
-        onChange?.(result.url);
-      }
-    } catch {
-      // Upload failed
-      setUploadState((prev) =>
-        prev
-          ? {
-              ...prev,
-              error: 'Upload failed',
-              status: 'error',
+      try {
+        // Start upload using the same logic as handleFileChange
+        const result = await uploadWithProgress({
+          file,
+          onStatusUpdate: (updateData) => {
+            if (updateData.type === 'updateFile') {
+              setUploadState((prev) => {
+                if (!prev) return null;
+
+                const fileStatus = updateData.value.status;
+                if (!fileStatus) return prev;
+
+                return {
+                  ...prev,
+                  error: fileStatus === 'error' ? 'Upload failed' : undefined,
+                  progress: updateData.value.uploadState?.progress || 0,
+                  status: fileStatus,
+                };
+              });
+            } else if (updateData.type === 'removeFile') {
+              setUploadState(null);
             }
-          : null,
-      );
-    } finally {
-      // Cleanup
-      if (isLocalBlobUrl(previewUrl)) {
-        URL.revokeObjectURL(previewUrl);
+          },
+          skipCheckFileType: true,
+        });
+
+        if (result?.url) {
+          // Upload successful
+          onChange?.(result.url);
+        }
+      } catch {
+        // Upload failed
+        setUploadState((prev) =>
+          prev
+            ? {
+                ...prev,
+                error: 'Upload failed',
+                status: 'error',
+              }
+            : null,
+        );
+      } finally {
+        // Cleanup
+        if (isLocalBlobUrl(previewUrl)) {
+          URL.revokeObjectURL(previewUrl);
+        }
+
+        // Clear upload state after a delay to show completion
+        setTimeout(() => {
+          setUploadState(null);
+        }, 1000);
       }
+    };
 
-      // Clear upload state after a delay to show completion
-      setTimeout(() => {
-        setUploadState(null);
-      }, 1000);
-    }
-  };
-
-  const { isDragOver, dragHandlers } = useDragAndDrop({
-    accept: 'image/*',
-    onDrop: handleDrop,
-  });
-
-  // Determine which view to render
-  const hasImage = Boolean(value);
-  const isUploading = Boolean(uploadState);
+    const { isDragOver, dragHandlers } = useDragAndDrop({
+      accept: 'image/*',
+      onDrop: handleDrop,
+    });
 
-  return (
-    <div className={className} {...dragHandlers} style={style}>
-      {/* Hidden file input */}
-      <input
-        accept="image/*"
-        onChange={handleFileChange}
-        onClick={(e) => {
-          // Reset value to allow re-selecting the same file
-          e.currentTarget.value = '';
-        }}
-        ref={inputRef}
-        style={{ display: 'none' }}
-        type="file"
-      />
+    // Determine which view to render
+    const hasImage = Boolean(value);
+    const isUploading = Boolean(uploadState);
 
-      {/* Conditional rendering based on state */}
-      {isUploading && uploadState ? (
-        <UploadingDisplay previewUrl={uploadState.previewUrl} progress={uploadState.progress} />
-      ) : hasImage ? (
-        <SuccessDisplay
-          imageUrl={value!}
-          isDragOver={isDragOver}
-          onChangeImage={handleFileSelect}
-          onDelete={handleDelete}
+    return (
+      <div className={className} {...dragHandlers} style={style}>
+        {/* Hidden file input */}
+        <input
+          accept="image/*"
+          onChange={handleFileChange}
+          onClick={(e) => {
+            // Reset value to allow re-selecting the same file
+            e.currentTarget.value = '';
+          }}
+          ref={inputRef}
+          style={{ display: 'none' }}
+          type="file"
         />
-      ) : (
-        <Placeholder isDragOver={isDragOver} onClick={handleFileSelect} />
-      )}
-    </div>
-  );
-});
+
+        {/* Conditional rendering based on state */}
+        {isUploading && uploadState ? (
+          <UploadingDisplay previewUrl={uploadState.previewUrl} progress={uploadState.progress} />
+        ) : hasImage ? (
+          <SuccessDisplay
+            imageUrl={value!}
+            isDragOver={isDragOver}
+            onChangeImage={handleFileSelect}
+            onDelete={handleDelete}
+          />
+        ) : (
+          <Placeholder isDragOver={isDragOver} onClick={handleFileSelect} />
+        )}
+      </div>
+    );
+  },
+);
 
 ImageUpload.displayName = 'ImageUpload';
 

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrl.tsx

@@ -5,14 +5,14 @@ import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/
 import ImageUpload from './ImageUpload';
 
 const ImageUrl = memo(() => {
-  const { value: imageUrl, setValue } = useGenerationConfigParam('imageUrl');
+  const { value: imageUrl, setValue, maxFileSize } = useGenerationConfigParam('imageUrl');
 
   // Extract the first URL from the array for single image display
   const handleChange = (url?: string) => {
     setValue(url ?? null);
   };
 
-  return <ImageUpload onChange={handleChange} value={imageUrl} />;
+  return <ImageUpload maxFileSize={maxFileSize} onChange={handleChange} value={imageUrl} />;
 });
 
 export default ImageUrl;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUrlsUpload.tsx

@@ -2,18 +2,42 @@ import { memo } from 'react';
 
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
 
+import ImageUpload from './ImageUpload';
 import MultiImagesUpload from './MultiImagesUpload';
 
 const ImageUrlsUpload = memo(() => {
-  const { value, setValue } = useGenerationConfigParam('imageUrls');
+  const { value, setValue, maxCount, maxFileSize } = useGenerationConfigParam('imageUrls');
 
+  // When maxCount is 1, use ImageUpload for single image upload
+  if (maxCount === 1) {
+    const handleSingleChange = (url?: string) => {
+      setValue(url ? [url] : []);
+    };
+
+    return (
+      <ImageUpload
+        maxFileSize={maxFileSize}
+        onChange={handleSingleChange}
+        value={value?.[0] ?? null}
+      />
+    );
+  }
+
+  // Otherwise use MultiImagesUpload for multiple images
   const handleChange = (urls: string[]) => {
     // Directly set the URLs to the store
     // The store will handle URL to path conversion when needed
     setValue(urls);
   };
 
-  return <MultiImagesUpload onChange={handleChange} value={value} />;
+  return (
+    <MultiImagesUpload
+      maxCount={maxCount}
+      maxFileSize={maxFileSize}
+      onChange={handleChange}
+      value={value}
+    />
+  );
 });
 
 export default ImageUrlsUpload;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/ImageManageModal.tsx

@@ -7,30 +7,33 @@ import Image from 'next/image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useUploadFilesValidation } from '../../hooks/useUploadFilesValidation';
+
 // ======== Types ======== //
 
 /**
- * 统一的图片项数据结构
- * - url: 现有图片的远程URL
- * - file: 新选择的文件，需要上传
- * - previewUrl: 本地文件的预览URL（blob URL）
- * 有url的是现有图片，有file的是待上传文件
+ * Unified image item data structure
+ * - url: Remote URL of existing image
+ * - file: Newly selected file that needs to be uploaded
+ * - previewUrl: Preview URL for local file (blob URL)
+ * Items with url are existing images, items with file are files to be uploaded
  */
 export interface ImageItem {
-  // 现有图片的URL
+  // URL of existing image
   file?: File;
   id: string;
-  // 新选择的文件
+  // Newly selected file
   previewUrl?: string;
-  url?: string; // 本地文件的预览URL，仅在file存在时使用
+  url?: string; // Preview URL for local file, only used when file exists
 }
 
 interface ImageManageModalProps {
   images: string[];
-  // 现有图片URL数组
+  maxCount?: number;
+  // Array of existing image URLs
   onClose: () => void;
   onComplete: (imageItems: ImageItem[]) => void;
-  open: boolean; // 统一的完成回调
+  open: boolean; // Unified completion callback
 }
 
 // ======== Utils ======== //
@@ -194,19 +197,20 @@ const useStyles = createStyles(({ css, token }) => ({
 // ======== Main Component ======== //
 
 const ImageManageModal: FC<ImageManageModalProps> = memo(
-  ({ open, images, onClose, onComplete }) => {
+  ({ open, images, maxCount, onClose, onComplete }) => {
     const { styles } = useStyles();
     const { t } = useTranslation('components');
     const inputRef = useRef<HTMLInputElement>(null);
+    const { validateFiles } = useUploadFilesValidation(maxCount);
 
-    // 使用统一的数据结构管理所有图片
+    // Use unified data structure to manage all images
     const [imageItems, setImageItems] = useState<ImageItem[]>([]);
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
-    // Modal 打开时初始化状态
+    // Initialize state when modal opens
     useEffect(() => {
       if (open) {
-        // 将现有URL转换为ImageItem格式
+        // Convert existing URLs to ImageItem format
         const initialItems: ImageItem[] = images.map((url) => ({
           id: generateId(),
           url,
@@ -253,7 +257,7 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
       const newItems = imageItems.filter((_, i) => i !== index);
       setImageItems(newItems);
 
-      // 调整选中索引
+      // Adjust selected index
       if (selectedIndex >= newItems.length) {
         setSelectedIndex(Math.max(0, newItems.length - 1));
       }
@@ -272,18 +276,23 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
       const files = event.target.files;
       if (!files || files.length === 0) return;
 
-      // 创建新的ImageItem，为每个文件生成一次性的预览URL
+      // Validate files, pass current image count
+      if (!validateFiles(Array.from(files), imageItems.length)) {
+        return;
+      }
+
+      // Create new ImageItem, generate one-time preview URL for each file
       const newItems: ImageItem[] = Array.from(files).map((file) => ({
         file,
         id: generateId(),
-        previewUrl: URL.createObjectURL(file), // 只创建一次
+        previewUrl: URL.createObjectURL(file), // Create only once
       }));
 
       setImageItems((prev) => [...prev, ...newItems]);
     };
 
     const handleComplete = () => {
-      // 直接传递当前完整状态给父组件处理
+      // Directly pass current complete state to parent component
       onComplete(imageItems);
       onClose();
     };
@@ -397,7 +406,12 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
 
         {/* Footer */}
         <div className={styles.footer}>
-          <Button icon={<Upload size={16} />} onClick={handleUpload} type="default">
+          <Button
+            disabled={maxCount ? imageItems.length >= maxCount : false}
+            icon={<Upload size={16} />}
+            onClick={handleUpload}
+            type="default"
+          >
             {t('MultiImagesUpload.modal.upload')}
           </Button>