refactor: simplify file upload logic in DocumentUploadTab by removing file count and size limits; update file size limit messages in multiple languages

This commit is contained in:
Anish Sarkar 2026-04-03 17:24:06 +05:30
parent c964b47f99
commit 1c50106c81
7 changed files with 30 additions and 120 deletions

View file

@ -125,7 +125,7 @@ const DocumentUploadPopupContent: FC<{
onPointerDownOutside={(e) => e.preventDefault()}
onInteractOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()}
className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(460px,75dvh)] sm:h-[min(520px,80vh)] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-3 sm:[&>button]:top-5 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5"
className="select-none max-w-2xl w-[95vw] sm:w-[640px] h-[min(440px,75dvh)] sm:h-[min(500px,80vh)] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-6 [&>button]:top-3 sm:[&>button]:top-5 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5"
>
<DialogTitle className="sr-only">Upload Document</DialogTitle>

View file

@ -121,10 +121,6 @@ interface FileWithId {
file: File;
}
const MAX_FILES = 50;
const MAX_TOTAL_SIZE_MB = 200;
const MAX_TOTAL_SIZE_BYTES = MAX_TOTAL_SIZE_MB * 1024 * 1024;
const MAX_FILE_SIZE_MB = 500;
const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
@ -204,7 +200,6 @@ export function DocumentUploadTab({
accept: acceptedFileTypes,
maxSize: MAX_FILE_SIZE_BYTES,
noClick: isElectron,
disabled: files.length >= MAX_FILES,
});
const handleFileInputClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
@ -224,24 +219,8 @@ export function DocumentUploadTab({
id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`,
file: new File([fd.data], fd.name, { type: fd.mimeType }),
}));
setFiles((prev) => {
const merged = [...prev, ...newFiles];
if (merged.length > MAX_FILES) {
toast.error(t("max_files_exceeded"), {
description: t("max_files_exceeded_desc", { max: MAX_FILES }),
});
return prev;
}
const totalSize = merged.reduce((sum, e) => sum + e.file.size, 0);
if (totalSize > MAX_TOTAL_SIZE_BYTES) {
toast.error(t("max_size_exceeded"), {
description: t("max_size_exceeded_desc", { max: MAX_TOTAL_SIZE_MB }),
});
return prev;
}
return merged;
});
}, [t]);
setFiles((prev) => [...prev, ...newFiles]);
}, []);
const handleBrowseFolder = useCallback(async () => {
const api = window.electronAPI;
@ -288,14 +267,6 @@ export function DocumentUploadTab({
const totalFileSize = files.reduce((total, entry) => total + entry.file.size, 0);
const isFileCountLimitReached = files.length >= MAX_FILES;
const isSizeLimitReached = totalFileSize >= MAX_TOTAL_SIZE_BYTES;
const remainingFiles = MAX_FILES - files.length;
const remainingSizeMB = Math.max(
0,
(MAX_TOTAL_SIZE_BYTES - totalFileSize) / (1024 * 1024)
).toFixed(1);
const hasContent = files.length > 0 || selectedFolder !== null;
const handleAccordionChange = useCallback(
@ -392,8 +363,6 @@ export function DocumentUploadTab({
const renderBrowseButton = (options?: { compact?: boolean; fullWidth?: boolean }) => {
const { compact, fullWidth } = options ?? {};
if (isFileCountLimitReached) return null;
const sizeClass = compact ? "h-7" : "h-8";
const widthClass = fullWidth ? "w-full" : "";
@ -478,7 +447,6 @@ export function DocumentUploadTab({
<div className="sm:hidden">
{hasContent ? (
!selectedFolder &&
!isFileCountLimitReached &&
(isElectron ? (
<div className="w-full">{renderBrowseButton({ compact: true, fullWidth: true })}</div>
) : (
@ -502,12 +470,8 @@ export function DocumentUploadTab({
<p className="text-base font-medium">
{isElectron ? "Select files or folder" : "Tap to select files or folder"}
</p>
<p className="text-sm text-muted-foreground inline-flex items-center flex-wrap justify-center">
<span>{t("file_size_limit")}</span>
<Dot className="h-4 w-4 shrink-0" />
<span>
{t("upload_limits", { maxFiles: MAX_FILES, maxSizeMB: MAX_TOTAL_SIZE_MB })}
</span>
<p className="text-sm text-muted-foreground">
{t("file_size_limit")}
</p>
</div>
<div className="w-full mt-1" onClick={(e) => e.stopPropagation()}>
@ -520,11 +484,7 @@ export function DocumentUploadTab({
{/* DESKTOP DROP ZONE */}
<div
{...getRootProps()}
className={`hidden sm:block border-2 border-dashed rounded-lg transition-colors ${
isFileCountLimitReached || isSizeLimitReached
? "border-destructive/50 bg-destructive/5 cursor-not-allowed"
: "border-muted-foreground/30 hover:border-foreground/70 cursor-pointer"
} ${hasContent ? "p-3" : "py-20 px-4"}`}
className={`hidden sm:block border-2 border-dashed rounded-lg transition-colors border-muted-foreground/30 hover:border-foreground/70 cursor-pointer ${hasContent ? "p-3" : "py-20 px-4"}`}
>
{hasContent ? (
<div className="flex items-center gap-3">
@ -532,20 +492,10 @@ export function DocumentUploadTab({
<span className="text-xs text-muted-foreground flex-1 truncate">
{isDragActive
? t("drop_files")
: isFileCountLimitReached
? t("file_limit_reached")
: t("remaining_capacity", { files: remainingFiles, sizeMB: remainingSizeMB })}
: t("drag_drop_more")}
</span>
{renderBrowseButton({ compact: true })}
</div>
) : isFileCountLimitReached ? (
<div className="flex flex-col items-center gap-2 text-center">
<Upload className="h-8 w-8 text-destructive/70" />
<p className="text-sm font-medium text-destructive">{t("file_limit_reached")}</p>
<p className="text-xs text-muted-foreground">
{t("file_limit_reached_desc", { max: MAX_FILES })}
</p>
</div>
) : isDragActive ? (
<div className="flex flex-col items-center gap-2">
<Upload className="h-8 w-8 text-primary" />
@ -555,12 +505,8 @@ export function DocumentUploadTab({
<div className="flex flex-col items-center gap-2">
<Upload className="h-8 w-8 text-muted-foreground" />
<p className="text-sm font-medium">{t("drag_drop")}</p>
<p className="text-xs text-muted-foreground text-center inline-flex items-center flex-wrap justify-center">
<span>{t("file_size_limit")}</span>
<Dot className="h-4 w-4 shrink-0" />
<span>
{t("upload_limits", { maxFiles: MAX_FILES, maxSizeMB: MAX_TOTAL_SIZE_MB })}
</span>
<p className="text-xs text-muted-foreground">
{t("file_size_limit")}
</p>
<div className="mt-1">{renderBrowseButton()}</div>
</div>
@ -632,8 +578,7 @@ export function DocumentUploadTab({
<div className="rounded-lg border border-border p-3 space-y-2">
<div className="flex items-center justify-between">
<p className="text-sm font-medium">
{t("selected_files", { count: files.length })} &middot;{" "}
{formatFileSize(totalFileSize)}
{t("selected_files", { count: files.length })}<Dot className="inline h-4 w-4" />{formatFileSize(totalFileSize)}
</p>
<Button
variant="ghost"

View file

@ -376,14 +376,14 @@
"upload_documents": {
"title": "Upload Documents",
"subtitle": "Upload your files to make them searchable and accessible through AI-powered conversations.",
"file_size_limit": "Maximum file size: 50MB per file",
"upload_limits": "Upload limit: {maxFiles} files, {maxSizeMB}MB total",
"file_size_limit": "Maximum file size: 500MB per file",
"drop_files": "Drop files or folders here",
"drag_drop": "Drag & drop files or folders here",
"drag_drop_more": "Drop or browse to add more files",
"or_browse": "or click to browse",
"browse_files": "Browse Files",
"browse_folder": "Browse Folder",
"selected_files": "Selected Files ({count})",
"selected_files": "{count} selected {count, plural, one {file} other {files}}",
"total_size": "Total size",
"clear_all": "Clear all",
"uploading_files": "Uploading files",
@ -397,14 +397,7 @@
"file_types_desc": "These file types are supported based on your current ETL service configuration.",
"file_too_large": "File Too Large",
"file_too_large_desc": "\"{name}\" exceeds the {maxMB}MB per-file limit.",
"no_supported_files_in_folder": "No supported file types found in the selected folder.",
"remaining_capacity": "{files} files, {sizeMB}MB remaining",
"file_limit_reached": "File limit reached",
"file_limit_reached_desc": "Maximum of {max} files allowed",
"max_files_exceeded": "Too many files",
"max_files_exceeded_desc": "You can upload a maximum of {max} files at once",
"max_size_exceeded": "Total size exceeded",
"max_size_exceeded_desc": "Total upload size cannot exceed {max}MB"
"no_supported_files_in_folder": "No supported file types found in the selected folder."
},
"add_webpage": {
"title": "Add Webpages for Crawling",

View file

@ -376,14 +376,14 @@
"upload_documents": {
"title": "Subir documentos",
"subtitle": "Sube tus archivos para hacerlos buscables y accesibles a través de conversaciones con IA.",
"file_size_limit": "Tamaño máximo de archivo: 50 MB por archivo",
"upload_limits": "Límite de subida: {maxFiles} archivos, {maxSizeMB} MB en total",
"file_size_limit": "Tamaño máximo de archivo: 500 MB por archivo",
"drop_files": "Suelta archivos o carpetas aquí",
"drag_drop": "Arrastra y suelta archivos o carpetas aquí",
"drag_drop_more": "Suelta o explora para agregar más archivos",
"or_browse": "o haz clic para explorar",
"browse_files": "Explorar archivos",
"browse_folder": "Explorar carpeta",
"selected_files": "Archivos seleccionados ({count})",
"selected_files": "{count} {count, plural, one {archivo seleccionado} other {archivos seleccionados}}",
"total_size": "Tamaño total",
"clear_all": "Limpiar todo",
"uploading_files": "Subiendo archivos",
@ -397,14 +397,7 @@
"file_types_desc": "Estos tipos de archivo son soportados según la configuración actual de tu servicio ETL.",
"file_too_large": "Archivo demasiado grande",
"file_too_large_desc": "\"{name}\" excede el límite de {maxMB} MB por archivo.",
"no_supported_files_in_folder": "No se encontraron tipos de archivo compatibles en la carpeta seleccionada.",
"remaining_capacity": "{files} archivos, {sizeMB}MB restante",
"file_limit_reached": "Límite de archivos alcanzado",
"file_limit_reached_desc": "Máximo de {max} archivos permitidos",
"max_files_exceeded": "Demasiados archivos",
"max_files_exceeded_desc": "Puedes subir un máximo de {max} archivos a la vez",
"max_size_exceeded": "Tamaño total excedido",
"max_size_exceeded_desc": "El tamaño total de subida no puede exceder {max}MB"
"no_supported_files_in_folder": "No se encontraron tipos de archivo compatibles en la carpeta seleccionada."
},
"add_webpage": {
"title": "Agregar páginas web para rastreo",

View file

@ -376,14 +376,14 @@
"upload_documents": {
"title": "दस्तावेज़ अपलोड करें",
"subtitle": "AI-संचालित बातचीत के माध्यम से अपनी फ़ाइलों को खोजने योग्य और सुलभ बनाने के लिए अपलोड करें।",
"file_size_limit": "अधिकतम फ़ाइल आकार: प्रति फ़ाइल 50MB",
"upload_limits": "अपलोड सीमा: {maxFiles} फ़ाइलें, कुल {maxSizeMB}MB",
"file_size_limit": "अधिकतम फ़ाइल आकार: प्रति फ़ाइल 500MB",
"drop_files": "फ़ाइलें या फ़ोल्डर यहां छोड़ें",
"drag_drop": "फ़ाइलें या फ़ोल्डर यहां खींचें और छोड़ें",
"drag_drop_more": "और फ़ाइलें जोड़ने के लिए छोड़ें या ब्राउज़ करें",
"or_browse": "या ब्राउज़ करने के लिए क्लिक करें",
"browse_files": "फ़ाइलें ब्राउज़ करें",
"browse_folder": "फ़ोल्डर ब्राउज़ करें",
"selected_files": "चयनित फ़ाइलें ({count})",
"selected_files": "{count} चयनित {count, plural, one {फ़ाइल} other {फ़ाइलें}}",
"total_size": "कुल आकार",
"clear_all": "सभी साफ करें",
"uploading_files": "फ़ाइलें अपलोड हो रही हैं",
@ -397,14 +397,7 @@
"file_types_desc": "ये फ़ाइल प्रकार आपकी वर्तमान ETL सेवा कॉन्फ़िगरेशन के आधार पर समर्थित हैं।",
"file_too_large": "फ़ाइल बहुत बड़ी है",
"file_too_large_desc": "\"{name}\" प्रति फ़ाइल {maxMB}MB की सीमा से अधिक है।",
"no_supported_files_in_folder": "चयनित फ़ोल्डर में कोई समर्थित फ़ाइल प्रकार नहीं मिला।",
"remaining_capacity": "{files} फ़ाइलें, {sizeMB}MB शेष",
"file_limit_reached": "फ़ाइल सीमा पूरी हो गई",
"file_limit_reached_desc": "अधिकतम {max} फ़ाइलें अनुमत हैं",
"max_files_exceeded": "बहुत सारी फ़ाइलें",
"max_files_exceeded_desc": "आप एक बार में अधिकतम {max} फ़ाइलें अपलोड कर सकते हैं",
"max_size_exceeded": "कुल आकार सीमा पार",
"max_size_exceeded_desc": "कुल अपलोड आकार {max}MB से अधिक नहीं हो सकता"
"no_supported_files_in_folder": "चयनित फ़ोल्डर में कोई समर्थित फ़ाइल प्रकार नहीं मिला।"
},
"add_webpage": {
"title": "क्रॉलिंग के लिए वेबपेज जोड़ें",

View file

@ -376,14 +376,14 @@
"upload_documents": {
"title": "Enviar documentos",
"subtitle": "Envie seus arquivos para torná-los pesquisáveis e acessíveis através de conversas com IA.",
"file_size_limit": "Tamanho máximo do arquivo: 50 MB por arquivo",
"upload_limits": "Limite de envio: {maxFiles} arquivos, {maxSizeMB} MB no total",
"file_size_limit": "Tamanho máximo do arquivo: 500 MB por arquivo",
"drop_files": "Solte arquivos ou pastas aqui",
"drag_drop": "Arraste e solte arquivos ou pastas aqui",
"drag_drop_more": "Solte ou navegue para adicionar mais arquivos",
"or_browse": "ou clique para navegar",
"browse_files": "Navegar arquivos",
"browse_folder": "Navegar pasta",
"selected_files": "Arquivos selecionados ({count})",
"selected_files": "{count} {count, plural, one {arquivo selecionado} other {arquivos selecionados}}",
"total_size": "Tamanho total",
"clear_all": "Limpar tudo",
"uploading_files": "Enviando arquivos",
@ -397,14 +397,7 @@
"file_types_desc": "Estes tipos de arquivo são suportados com base na configuração atual do seu serviço ETL.",
"file_too_large": "Arquivo muito grande",
"file_too_large_desc": "\"{name}\" excede o limite de {maxMB} MB por arquivo.",
"no_supported_files_in_folder": "Nenhum tipo de arquivo suportado encontrado na pasta selecionada.",
"remaining_capacity": "{files} arquivos, {sizeMB}MB restante",
"file_limit_reached": "Limite de arquivos atingido",
"file_limit_reached_desc": "Máximo de {max} arquivos permitidos",
"max_files_exceeded": "Muitos arquivos",
"max_files_exceeded_desc": "Você pode enviar no máximo {max} arquivos de uma vez",
"max_size_exceeded": "Tamanho total excedido",
"max_size_exceeded_desc": "O tamanho total do envio não pode exceder {max}MB"
"no_supported_files_in_folder": "Nenhum tipo de arquivo suportado encontrado na pasta selecionada."
},
"add_webpage": {
"title": "Adicionar páginas web para rastreamento",

View file

@ -360,14 +360,14 @@
"upload_documents": {
"title": "上传文档",
"subtitle": "上传您的文件,使其可通过 AI 对话进行搜索和访问。",
"file_size_limit": "最大文件大小:每个文件 50MB",
"upload_limits": "上传限制:最多 {maxFiles} 个文件,总大小不超过 {maxSizeMB}MB",
"file_size_limit": "最大文件大小:每个文件 500MB",
"drop_files": "将文件或文件夹拖放到此处",
"drag_drop": "拖放文件或文件夹到这里",
"drag_drop_more": "拖放或浏览以添加更多文件",
"or_browse": "或点击浏览",
"browse_files": "浏览文件",
"browse_folder": "浏览文件夹",
"selected_files": "已选择的文件 ({count})",
"selected_files": "已选择 {count} 个文件",
"total_size": "总大小",
"clear_all": "全部清除",
"uploading_files": "正在上传文件...",
@ -381,14 +381,7 @@
"file_types_desc": "根据您当前的 ETL 服务配置支持这些文件类型。",
"file_too_large": "文件过大",
"file_too_large_desc": "\"{name}\" 超过了每个文件 {maxMB}MB 的限制。",
"no_supported_files_in_folder": "所选文件夹中没有找到支持的文件类型。",
"remaining_capacity": "剩余 {files} 个文件,{sizeMB}MB",
"file_limit_reached": "已达文件数量上限",
"file_limit_reached_desc": "最多允许 {max} 个文件",
"max_files_exceeded": "文件数量过多",
"max_files_exceeded_desc": "一次最多上传 {max} 个文件",
"max_size_exceeded": "总大小超出限制",
"max_size_exceeded_desc": "总上传大小不能超过 {max}MB"
"no_supported_files_in_folder": "所选文件夹中没有找到支持的文件类型。"
},
"add_webpage": {
"title": "添加网页爬取",