Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Danny Avila 2024-11-12 16:41:04 -05:00 • committed by GitHub
parent 3c94ff2c04
commit d012da0065
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 373 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

28
client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
View file

@ -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}