Fix: upload limit in knowledge (#27480)

Co-authored-by: jyong <718720800@qq.com>

api/controllers/console/files.py

@@ -39,6 +39,7 @@ class FileApi(Resource):
         return {
             "file_size_limit": dify_config.UPLOAD_FILE_SIZE_LIMIT,
             "batch_count_limit": dify_config.UPLOAD_FILE_BATCH_LIMIT,
+            "file_upload_limit": dify_config.BATCH_UPLOAD_LIMIT,
             "image_file_size_limit": dify_config.UPLOAD_IMAGE_FILE_SIZE_LIMIT,
             "video_file_size_limit": dify_config.UPLOAD_VIDEO_FILE_SIZE_LIMIT,
             "audio_file_size_limit": dify_config.UPLOAD_AUDIO_FILE_SIZE_LIMIT,

web/app/components/datasets/create/file-uploader/index.tsx

@@ -19,8 +19,6 @@ import { IS_CE_EDITION } from '@/config'
 import { Theme } from '@/types/app'
 import useTheme from '@/hooks/use-theme'
 
-const FILES_NUMBER_LIMIT = 20
-
 type IFileUploaderProps = {
   fileList: FileItem[]
   titleClassName?: string
@@ -72,6 +70,7 @@ const FileUploader = ({
   const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
     file_size_limit: 15,
     batch_count_limit: 5,
+    file_upload_limit: 5,
   }, [fileUploadConfigResponse])
 
   const fileListRef = useRef<FileItem[]>([])
@@ -121,10 +120,10 @@ const FileUploader = ({
       data: formData,
       onprogress: onProgress,
     }, false, undefined, '?source=datasets')
-      .then((res: File) => {
+      .then((res) => {
         const completeFile = {
           fileID: fileItem.fileID,
-          file: res,
+          file: res as unknown as File,
           progress: -1,
         }
         const index = fileListRef.current.findIndex(item => item.fileID === fileItem.fileID)
@@ -163,11 +162,12 @@ const FileUploader = ({
   }, [fileUploadConfig, uploadBatchFiles])
 
   const initialUpload = useCallback((files: File[]) => {
+    const filesCountLimit = fileUploadConfig.file_upload_limit
     if (!files.length)
       return false
 
-    if (files.length + fileList.length > FILES_NUMBER_LIMIT && !IS_CE_EDITION) {
-      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.filesNumber', { filesNumber: FILES_NUMBER_LIMIT }) })
+    if (files.length + fileList.length > filesCountLimit && !IS_CE_EDITION) {
+      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.filesNumber', { filesNumber: filesCountLimit }) })
       return false
     }
 
@@ -180,7 +180,7 @@ const FileUploader = ({
     prepareFileList(newFiles)
     fileListRef.current = newFiles
     uploadMultipleFiles(preparedFiles)
-  }, [prepareFileList, uploadMultipleFiles, notify, t, fileList])
+  }, [prepareFileList, uploadMultipleFiles, notify, t, fileList, fileUploadConfig])
 
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault()
@@ -255,10 +255,11 @@ const FileUploader = ({
       )
       let files = nested.flat()
       if (notSupportBatchUpload) files = files.slice(0, 1)
+      files = files.slice(0, fileUploadConfig.batch_count_limit)
       const valid = files.filter(isValid)
       initialUpload(valid)
     },
-    [initialUpload, isValid, notSupportBatchUpload, traverseFileEntry],
+    [initialUpload, isValid, notSupportBatchUpload, traverseFileEntry, fileUploadConfig],
   )
   const selectHandle = () => {
     if (fileUploader.current)
@@ -273,9 +274,10 @@ const FileUploader = ({
     onFileListUpdate?.([...fileListRef.current])
   }
   const fileChangeHandle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = [...(e.target.files ?? [])] as File[]
+    let files = [...(e.target.files ?? [])] as File[]
+    files = files.slice(0, fileUploadConfig.batch_count_limit)
     initialUpload(files.filter(isValid))
-  }, [isValid, initialUpload])
+  }, [isValid, initialUpload, fileUploadConfig])
 
   const { theme } = useTheme()
   const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
@@ -325,6 +327,7 @@ const FileUploader = ({
             size: fileUploadConfig.file_size_limit,
             supportTypes: supportTypesShowNames,
             batchCount: notSupportBatchUpload ? 1 : fileUploadConfig.batch_count_limit,
+            totalCount: fileUploadConfig.file_upload_limit,
           })}</div>
           {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
         </div>

web/i18n/en-US/dataset-creation.ts

@@ -38,7 +38,7 @@ const translation = {
       button: 'Drag and drop file or folder, or',
       buttonSingleFile: 'Drag and drop file, or',
       browse: 'Browse',
-      tip: 'Supports {{supportTypes}}. Max {{batchCount}} in a batch and {{size}} MB each.',
+      tip: 'Supports {{supportTypes}}. Max {{batchCount}} in a batch and {{size}} MB each. Max total {{totalCount}} files.',
       validation: {
         typeError: 'File type not supported',
         size: 'File too large. Maximum is {{size}}MB',

web/i18n/zh-Hans/dataset-creation.ts

@@ -38,7 +38,7 @@ const translation = {
       button: '拖拽文件或文件夹至此，或者',
       buttonSingleFile: '拖拽文件至此，或者',
       browse: '选择文件',
-      tip: '已支持 {{supportTypes}}，每批最多 {{batchCount}} 个文件，每个文件不超过 {{size}} MB。',
+      tip: '已支持 {{supportTypes}}，每批最多 {{batchCount}} 个文件，每个文件不超过 {{size}} MB ，总数不超过 {{totalCount}} 个文件。',
       validation: {
         typeError: '文件类型不支持',
         size: '文件太大了，不能超过 {{size}}MB',

web/models/common.ts

@@ -236,6 +236,7 @@ export type FileUploadConfigResponse = {
   audio_file_size_limit?: number // default is 50MB
   video_file_size_limit?: number // default is 100MB
   workflow_file_upload_limit?: number // default is 10
+  file_upload_limit: number // default is 5
 }
 
 export type InvitationResult = {