Merge pull request #1193 from danielaskdd/file-upload-improve

Feat: Improve user experience of multiple files upload
2025-03-26 21:08:43 +08:00
parent b9b7da3e17 5008393974
commit ac5880f513
8 changed files with 335 additions and 223 deletions
--- a/lightrag/api/webui/assets/index-DTDDxtXc.js
+++ b/lightrag/api/webui/assets/index-DTDDxtXc.js
--- a/lightrag/api/webui/index.html
+++ b/lightrag/api/webui/index.html
@@ -8,7 +8,7 @@
    <link rel="icon" type="image/svg+xml" href="logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lightrag</title>
-    <script type="module" crossorigin src="/webui/assets/index-BX3dHkLt.js"></script>
+    <script type="module" crossorigin src="/webui/assets/index-DTDDxtXc.js"></script>
    <link rel="stylesheet" crossorigin href="/webui/assets/index-CbzkrOyx.css">
  </head>
  <body>
--- a/lightrag_webui/src/components/documents/UploadDocumentsDialog.tsx
+++ b/lightrag_webui/src/components/documents/UploadDocumentsDialog.tsx
@@ -21,49 +21,72 @@ export default function UploadDocumentsDialog() {
  const [open, setOpen] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const [progresses, setProgresses] = useState<Record<string, number>>({})
+  const [fileErrors, setFileErrors] = useState<Record<string, string>>({})

  const handleDocumentsUpload = useCallback(
    async (filesToUpload: File[]) => {
      setIsUploading(true)
+      setFileErrors({})

+      try {
+        toast.promise(
+          (async () => {
            try {
              await Promise.all(
                filesToUpload.map(async (file) => {
                  try {
                    const result = await uploadDocument(file, (percentCompleted: number) => {
-                console.debug(t('documentPanel.uploadDocuments.uploading', { name: file.name, percent: percentCompleted }))
+                      console.debug(t('documentPanel.uploadDocuments.single.uploading', { name: file.name, percent: percentCompleted }))
                      setProgresses((pre) => ({
                        ...pre,
                        [file.name]: percentCompleted
                      }))
                    })
-              if (result.status === 'success') {
-                toast.success(t('documentPanel.uploadDocuments.success', { name: file.name }))
-              } else {
-                toast.error(t('documentPanel.uploadDocuments.failed', { name: file.name, message: result.message }))
+
+                    if (result.status !== 'success') {
+                      setFileErrors(prev => ({
+                        ...prev,
+                        [file.name]: result.message
+                      }))
                    }
                  } catch (err) {
-              toast.error(t('documentPanel.uploadDocuments.error', { name: file.name, error: errorMessage(err) }))
+                    setFileErrors(prev => ({
+                      ...prev,
+                      [file.name]: errorMessage(err)
+                    }))
                  }
                })
              )
+            } catch (error) {
+              console.error('Upload failed:', error)
+            }
+          })(),
+          {
+            loading: t('documentPanel.uploadDocuments.batch.uploading'),
+            success: t('documentPanel.uploadDocuments.batch.success'),
+            error: t('documentPanel.uploadDocuments.batch.error')
+          }
+        )
      } catch (err) {
        toast.error(t('documentPanel.uploadDocuments.generalError', { error: errorMessage(err) }))
      } finally {
        setIsUploading(false)
-        // setOpen(false)
      }
    },
-    [setIsUploading, setProgresses]
+    [setIsUploading, setProgresses, t]
  )

  return (
    <Dialog
      open={open}
      onOpenChange={(open) => {
-        if (isUploading && !open) {
+        if (isUploading) {
          return
        }
+        if (!open) {
+          setProgresses({})
+          setFileErrors({})
+        }
        setOpen(open)
      }}
    >
@@ -85,6 +108,7 @@ export default function UploadDocumentsDialog() {
          description={t('documentPanel.uploadDocuments.fileTypes')}
          onUpload={handleDocumentsUpload}
          progresses={progresses}
+          fileErrors={fileErrors}
          disabled={isUploading}
        />
      </DialogContent>
--- a/lightrag_webui/src/components/ui/FileUploader.tsx
+++ b/lightrag_webui/src/components/ui/FileUploader.tsx
@@ -6,11 +6,11 @@ import * as React from 'react'
 import { FileText, Upload, X } from 'lucide-react'
 import Dropzone, { type DropzoneProps, type FileRejection } from 'react-dropzone'
 import { toast } from 'sonner'
+import { useTranslation } from 'react-i18next'

 import { cn } from '@/lib/utils'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import Button from '@/components/ui/Button'
-import Progress from '@/components/ui/Progress'
 import { ScrollArea } from '@/components/ui/ScrollArea'
 import { supportedFileTypes } from '@/lib/constants'

@@ -47,6 +47,14 @@ interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
   */
  progresses?: Record<string, number>

+  /**
+   * Error messages for failed uploads.
+   * @type Record<string, string> | undefined
+   * @default undefined
+   * @example fileErrors={{ "file1.png": "Upload failed" }}
+   */
+  fileErrors?: Record<string, string>
+
  /**
   * Accepted file types for the uploader.
   * @type { [key: string]: string[]}
@@ -112,11 +120,13 @@ function formatBytes(
 }

 function FileUploader(props: FileUploaderProps) {
+  const { t } = useTranslation()
  const {
    value: valueProp,
    onValueChange,
    onUpload,
    progresses,
+    fileErrors,
    accept = supportedFileTypes,
    maxSize = 1024 * 1024 * 200,
    maxFileCount = 1,
@@ -135,12 +145,12 @@ function FileUploader(props: FileUploaderProps) {
  const onDrop = React.useCallback(
    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
-        toast.error('Cannot upload more than 1 file at a time')
+        toast.error(t('documentPanel.uploadDocuments.fileUploader.singleFileLimit'))
        return
      }

      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
-        toast.error(`Cannot upload more than ${maxFileCount} files`)
+        toast.error(t('documentPanel.uploadDocuments.fileUploader.maxFilesLimit', { count: maxFileCount }))
        return
      }

@@ -156,25 +166,16 @@ function FileUploader(props: FileUploaderProps) {

      if (rejectedFiles.length > 0) {
        rejectedFiles.forEach(({ file }) => {
-          toast.error(`File ${file.name} was rejected`)
+          toast.error(t('documentPanel.uploadDocuments.fileUploader.fileRejected', { name: file.name }))
        })
      }

      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {
-        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : 'file'
-
-        toast.promise(onUpload(updatedFiles), {
-          loading: `Uploading ${target}...`,
-          success: () => {
-            setFiles([])
-            return `${target} uploaded`
-          },
-          error: `Failed to upload ${target}`
-        })
+        onUpload(updatedFiles)
      }
    },

-    [files, maxFileCount, multiple, onUpload, setFiles]
+    [files, maxFileCount, multiple, onUpload, setFiles, t]
  )

  function onRemove(index: number) {
@@ -227,7 +228,7 @@ function FileUploader(props: FileUploaderProps) {
                <div className="rounded-full border border-dashed p-3">
                  <Upload className="text-muted-foreground size-7" aria-hidden="true" />
                </div>
-                <p className="text-muted-foreground font-medium">Drop the files here</p>
+                <p className="text-muted-foreground font-medium">{t('documentPanel.uploadDocuments.fileUploader.dropHere')}</p>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
@@ -236,18 +237,18 @@ function FileUploader(props: FileUploaderProps) {
                </div>
                <div className="flex flex-col gap-px">
                  <p className="text-muted-foreground font-medium">
-                    Drag and drop files here, or click to select files
+                    {t('documentPanel.uploadDocuments.fileUploader.dragAndDrop')}
                  </p>
                  {description ? (
                    <p className="text-muted-foreground/70 text-sm">{description}</p>
                  ) : (
                    <p className="text-muted-foreground/70 text-sm">
-                      You can upload
-                      {maxFileCount > 1
-                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
-                      files (up to ${formatBytes(maxSize)} each)`
-                        : ` a file with ${formatBytes(maxSize)}`}
-                      Supported formats: TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS
+                      {t('documentPanel.uploadDocuments.fileUploader.uploadDescription', {
+                        count: maxFileCount,
+                        isMultiple: maxFileCount === Infinity,
+                        maxSize: formatBytes(maxSize)
+                      })}
+                      {t('documentPanel.uploadDocuments.fileTypes')}
                    </p>
                  )}
                </div>
@@ -265,6 +266,7 @@ function FileUploader(props: FileUploaderProps) {
                file={file}
                onRemove={() => onRemove(index)}
                progress={progresses?.[file.name]}
+                error={fileErrors?.[file.name]}
              />
            ))}
          </div>
@@ -274,13 +276,34 @@ function FileUploader(props: FileUploaderProps) {
  )
 }

+interface ProgressProps {
+  value: number
+  error?: boolean
+}
+
+function Progress({ value, error }: ProgressProps) {
+  return (
+    <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
+      <div
+        className={cn(
+          'h-full transition-all',
+          error ? 'bg-destructive' : 'bg-primary'
+        )}
+        style={{ width: `${value}%` }}
+      />
+    </div>
+  )
+}
+
 interface FileCardProps {
  file: File
  onRemove: () => void
  progress?: number
+  error?: string
 }

-function FileCard({ file, progress, onRemove }: FileCardProps) {
+function FileCard({ file, progress, error, onRemove }: FileCardProps) {
+  const { t } = useTranslation()
  return (
    <div className="relative flex items-center gap-2.5">
      <div className="flex flex-1 gap-2.5">
@@ -290,13 +313,20 @@ function FileCard({ file, progress, onRemove }: FileCardProps) {
            <p className="text-foreground/80 line-clamp-1 text-sm font-medium">{file.name}</p>
            <p className="text-muted-foreground text-xs">{formatBytes(file.size)}</p>
          </div>
-          {progress ? <Progress value={progress} /> : null}
+          {error ? (
+            <div className="text-destructive text-sm">
+              <Progress value={100} error={true} />
+              <p className="mt-1">{error}</p>
+            </div>
+          ) : (
+            progress ? <Progress value={progress} /> : null
+          )}
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Button type="button" variant="outline" size="icon" className="size-7" onClick={onRemove}>
          <X className="size-4" aria-hidden="true" />
-          <span className="sr-only">Remove file</span>
+          <span className="sr-only">{t('documentPanel.uploadDocuments.fileUploader.removeFile')}</span>
        </Button>
      </div>
    </div>
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -48,12 +48,28 @@
      "tooltip": "رفع المستندات",
      "title": "رفع المستندات",
      "description": "اسحب وأفلت مستنداتك هنا أو انقر للتصفح.",
+      "single": {
        "uploading": "جارٍ الرفع {{name}}: {{percent}}%",
        "success": "نجاح الرفع:\nتم رفع {{name}} بنجاح",
        "failed": "فشل الرفع:\n{{name}}\n{{message}}",
-      "error": "فشل الرفع:\n{{name}}\n{{error}}",
+        "error": "فشل الرفع:\n{{name}}\n{{error}}"
+      },
+      "batch": {
+        "uploading": "جارٍ رفع الملفات...",
+        "success": "تم رفع الملفات بنجاح",
+        "error": "فشل رفع بعض الملفات"
+      },
      "generalError": "فشل الرفع\n{{error}}",
-      "fileTypes": "الأنواع المدعومة: TXT، MD، DOCX، PDF، PPTX، RTF، ODT، EPUB، HTML، HTM، TEX، JSON، XML، YAML، YML، CSV، LOG، CONF، INI، PROPERTIES، SQL، BAT، SH، C، CPP، PY، JAVA، JS، TS، SWIFT، GO، RB، PHP، CSS، SCSS، LESS"
+      "fileTypes": "الأنواع المدعومة: TXT، MD، DOCX، PDF، PPTX، RTF، ODT، EPUB، HTML، HTM، TEX، JSON، XML، YAML، YML، CSV، LOG، CONF، INI، PROPERTIES، SQL، BAT، SH، C، CPP، PY، JAVA، JS، TS، SWIFT، GO، RB، PHP، CSS، SCSS، LESS",
+      "fileUploader": {
+        "singleFileLimit": "لا يمكن رفع أكثر من ملف واحد في المرة الواحدة",
+        "maxFilesLimit": "لا يمكن رفع أكثر من {{count}} ملفات",
+        "fileRejected": "تم رفض الملف {{name}}",
+        "dropHere": "أفلت الملفات هنا",
+        "dragAndDrop": "اسحب وأفلت الملفات هنا، أو انقر للاختيار",
+        "removeFile": "إزالة الملف",
+        "uploadDescription": "يمكنك رفع {{isMultiple ? 'عدة' : count}} ملفات (حتى {{maxSize}} لكل منها)"
+      }
    },
    "documentManager": {
      "title": "إدارة المستندات",
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -48,12 +48,28 @@
      "tooltip": "Upload documents",
      "title": "Upload Documents",
      "description": "Drag and drop your documents here or click to browse.",
+      "single": {
        "uploading": "Uploading {{name}}: {{percent}}%",
        "success": "Upload Success:\n{{name}} uploaded successfully",
        "failed": "Upload Failed:\n{{name}}\n{{message}}",
-      "error": "Upload Failed:\n{{name}}\n{{error}}",
+        "error": "Upload Failed:\n{{name}}\n{{error}}"
+      },
+      "batch": {
+        "uploading": "Uploading files...",
+        "success": "Files uploaded successfully",
+        "error": "Some files failed to upload"
+      },
      "generalError": "Upload Failed\n{{error}}",
-      "fileTypes": "Supported types: TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS"
+      "fileTypes": "Supported types: TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS",
+      "fileUploader": {
+        "singleFileLimit": "Cannot upload more than 1 file at a time",
+        "maxFilesLimit": "Cannot upload more than {{count}} files",
+        "fileRejected": "File {{name}} was rejected",
+        "dropHere": "Drop the files here",
+        "dragAndDrop": "Drag and drop files here, or click to select files",
+        "removeFile": "Remove file",
+        "uploadDescription": "You can upload {{isMultiple ? 'multiple' : count}} files (up to {{maxSize}} each)"
+      }
    },
    "documentManager": {
      "title": "Document Management",
@@ -95,15 +111,15 @@
    "pipelineStatus": {
      "title": "Pipeline Status",
      "busy": "Pipeline Busy",
-      "requestPending": "Reques Pending",
+      "requestPending": "Request Pending",
      "jobName": "Job Name",
      "startTime": "Start Time",
      "progress": "Progress",
      "unit": "batch",
      "latestMessage": "Latest Message",
-      "historyMessages": "History Message",
+      "historyMessages": "History Messages",
      "errors": {
-        "fetchFailed": "Fail to get pipeline status\n{{error}}"
+        "fetchFailed": "Failed to get pipeline status\n{{error}}"
      }
    }
  },
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -48,12 +48,28 @@
      "tooltip": "Télécharger des documents",
      "title": "Télécharger des documents",
      "description": "Glissez-déposez vos documents ici ou cliquez pour parcourir.",
+      "single": {
        "uploading": "Téléchargement de {{name}} : {{percent}}%",
        "success": "Succès du téléchargement :\n{{name}} téléchargé avec succès",
        "failed": "Échec du téléchargement :\n{{name}}\n{{message}}",
-      "error": "Échec du téléchargement :\n{{name}}\n{{error}}",
+        "error": "Échec du téléchargement :\n{{name}}\n{{error}}"
+      },
+      "batch": {
+        "uploading": "Téléchargement des fichiers...",
+        "success": "Fichiers téléchargés avec succès",
+        "error": "Certains fichiers n'ont pas pu être téléchargés"
+      },
      "generalError": "Échec du téléchargement\n{{error}}",
-      "fileTypes": "Types pris en charge : TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS"
+      "fileTypes": "Types pris en charge : TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS",
+      "fileUploader": {
+        "singleFileLimit": "Impossible de télécharger plus d'un fichier à la fois",
+        "maxFilesLimit": "Impossible de télécharger plus de {{count}} fichiers",
+        "fileRejected": "Le fichier {{name}} a été rejeté",
+        "dropHere": "Déposez les fichiers ici",
+        "dragAndDrop": "Glissez et déposez les fichiers ici, ou cliquez pour sélectionner",
+        "removeFile": "Supprimer le fichier",
+        "uploadDescription": "Vous pouvez télécharger {{isMultiple ? 'plusieurs' : count}} fichiers (jusqu'à {{maxSize}} chacun)"
+      }
    },
    "documentManager": {
      "title": "Gestion des documents",
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -48,12 +48,28 @@
      "tooltip": "上传文档",
      "title": "上传文档",
      "description": "拖拽文件到此处或点击浏览",
+      "single": {
        "uploading": "正在上传 {{name}}：{{percent}}%",
        "success": "上传成功：\n{{name}} 上传完成",
        "failed": "上传失败：\n{{name}}\n{{message}}",
-      "error": "上传失败：\n{{name}}\n{{error}}",
+        "error": "上传失败：\n{{name}}\n{{error}}"
+      },
+      "batch": {
+        "uploading": "正在上传文件...",
+        "success": "文件上传完成",
+        "error": "部分文件上传失败"
+      },
      "generalError": "上传失败\n{{error}}",
-      "fileTypes": "支持的文件类型：TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS"
+      "fileTypes": "支持的文件类型：TXT, MD, DOCX, PDF, PPTX, RTF, ODT, EPUB, HTML, HTM, TEX, JSON, XML, YAML, YML, CSV, LOG, CONF, INI, PROPERTIES, SQL, BAT, SH, C, CPP, PY, JAVA, JS, TS, SWIFT, GO, RB, PHP, CSS, SCSS, LESS",
+      "fileUploader": {
+        "singleFileLimit": "一次只能上传一个文件",
+        "maxFilesLimit": "最多只能上传 {{count}} 个文件",
+        "fileRejected": "文件 {{name}} 被拒绝",
+        "dropHere": "将文件拖放到此处",
+        "dragAndDrop": "拖放文件到此处，或点击选择文件",
+        "removeFile": "移除文件",
+        "uploadDescription": "您可以上传{{isMultiple ? '多个' : count}}个文件（每个文件最大{{maxSize}}）"
+      }
    },
    "documentManager": {
      "title": "文档管理",