🛡️ fix: Enhance File Upload Security & Error Handling (#4705)

* fix: sanitize filename in multer storage callback

* fix: ensure temporary image upload file is deleted after processing

* fix: prevent cleanup flag from being set to false before actually deleted

* refactor: user avatar, typing, use 'file' for formData instead of 'input', add disk storage, use localization

* fix: update Avatar component to include image dimensions in formData and refactor editor reference type

* fix: refactor avatar upload handling to use fs for file reading and enhance file validation

* fix: ensure temporary image upload file is deleted after processing

* fix: refactor avatar upload routes and handlers for agents and assistants, improve file handling and validation

* fix: improve audio file validation and cleanup

* fix: add filename sanitization utility and integrate it into multer storage configuration

* fix: update group project ID check for null and refactor delete prompt group response type

* fix: invalid access control for deleting prompt groups

* fix: add error handling and logging to checkBan middleware

* fix: catch conversation parsing errors

* chore: revert unnecessary height and width parameters from avatar upload

* chore: update librechat-data-provider version to 0.7.55

* style: ensure KaTeX can spread across visible space

client/src/components/Chat/Messages/Content/Container.tsx

@@ -3,7 +3,7 @@ import Files from './Files';
 
 const Container = ({ children, message }: { children: React.ReactNode; message?: TMessage }) => (
   <div
-    className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto [.text-message+&]:mt-5"
+    className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-visible [.text-message+&]:mt-5"
     dir="auto"
   >
     {message?.isCreatedByUser === true && <Files message={message} />}

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -27,7 +27,7 @@ export const ErrorMessage = ({
     return (
       <Suspense
         fallback={
-          <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto">
+          <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
             <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
               <div className="absolute">
                 <p className="submitting relative">

client/src/components/Nav/SettingsTabs/Account/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { FileImage, RotateCw, Upload } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
 import AvatarEditor from 'react-avatar-editor';
+import { FileImage, RotateCw, Upload } from 'lucide-react';
 import { fileConfig as defaultFileConfig, mergeFileConfig } from 'librechat-data-provider';
 import type { TUser } from 'librechat-data-provider';
 import {
@@ -20,16 +20,23 @@ import { cn, formatBytes } from '~/utils';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
 
+interface AvatarEditorRef {
+  getImageScaledToCanvas: () => HTMLCanvasElement;
+  getImage: () => HTMLImageElement;
+}
+
 function Avatar() {
   const setUser = useSetRecoilState(store.user);
-  const [image, setImage] = useState<string | File | null>(null);
-  const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
+
   const [scale, setScale] = useState<number>(1);
   const [rotation, setRotation] = useState<number>(0);
-  const editorRef = useRef<AvatarEditor | null>(null);
+  const editorRef = useRef<AvatarEditorRef | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const openButtonRef = useRef<HTMLButtonElement>(null);
 
+  const [image, setImage] = useState<string | File | null>(null);
+  const [isDialogOpen, setDialogOpen] = useState<boolean>(false);
+
   const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
     select: (data) => mergeFileConfig(data),
   });
@@ -55,12 +62,13 @@ function Avatar() {
   };
 
   const handleFile = (file: File | undefined) => {
-    if (fileConfig.avatarSizeLimit && file && file.size <= fileConfig.avatarSizeLimit) {
+    if (fileConfig.avatarSizeLimit != null && file && file.size <= fileConfig.avatarSizeLimit) {
       setImage(file);
       setScale(1);
       setRotation(0);
     } else {
-      const megabytes = fileConfig.avatarSizeLimit ? formatBytes(fileConfig.avatarSizeLimit) : 2;
+      const megabytes =
+        fileConfig.avatarSizeLimit != null ? formatBytes(fileConfig.avatarSizeLimit) : 2;
       showToast({
         message: localize('com_ui_upload_invalid_var', megabytes + ''),
         status: 'error',
@@ -82,7 +90,7 @@ function Avatar() {
       canvas.toBlob((blob) => {
         if (blob) {
           const formData = new FormData();
-          formData.append('input', blob, 'avatar.png');
+          formData.append('file', blob, 'avatar.png');
           formData.append('manual', 'true');
           uploadAvatar(formData);
         }
@@ -134,11 +142,11 @@ function Avatar() {
       <OGDialogContent className="w-11/12 max-w-sm" style={{ borderRadius: '12px' }}>
         <OGDialogHeader>
           <OGDialogTitle className="text-lg font-medium leading-6 text-text-primary">
-            {image ? localize('com_ui_preview') : localize('com_ui_upload_image')}
+            {image != null ? localize('com_ui_preview') : localize('com_ui_upload_image')}
           </OGDialogTitle>
         </OGDialogHeader>
         <div className="flex flex-col items-center justify-center">
-          {image ? (
+          {image != null ? (
             <>
               <div className="relative overflow-hidden rounded-full">
                 <AvatarEditor
@@ -155,7 +163,7 @@ function Avatar() {
               </div>
               <div className="mt-4 flex w-full flex-col items-center space-y-4">
                 <div className="flex w-full items-center justify-center space-x-4">
-                  <span className="text-sm">Zoom:</span>
+                  <span className="text-sm">{localize('com_ui_zoom')}</span>
                   <Slider
                     value={[scale]}
                     min={1}

client/src/components/Prompts/Groups/DashGroupItem.tsx

@@ -38,7 +38,7 @@ export default function DashGroupItem({
   const [nameInputField, setNameInputField] = useState(group.name);
   const isOwner = useMemo(() => user?.id === group.author, [user, group]);
   const groupIsGlobal = useMemo(
-    () => instanceProjectId && group.projectIds?.includes(instanceProjectId),
+    () => instanceProjectId != null && group.projectIds?.includes(instanceProjectId),
     [group, instanceProjectId],
   );
 

client/src/localization/languages/Eng.ts

@@ -222,6 +222,7 @@ export default {
   com_ui_latest_footer: 'Every AI for Everyone.',
   com_ui_enter: 'Enter',
   com_ui_submit: 'Submit',
+  com_ui_zoom: 'Zoom',
   com_ui_none_selected: 'None selected',
   com_ui_upload_success: 'Successfully uploaded file',
   com_ui_upload_error: 'There was an error uploading your file',

client/src/mobile.css

@@ -337,4 +337,4 @@
 
 .shake {
   animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
-}
+}

client/src/style.css

@@ -2399,3 +2399,10 @@ button.scroll-convo {
   scale: 1;
   translate: 0;
 }
+
+/** Note: ensure KaTeX can spread across visible space */
+.message-content pre:has(> span.katex) {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+}