mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 02:10:15 +01:00
🛠️ refactor: Handle .webp, Improve File Life Cycle 📁 (#1213)
* fix: handle webp images correctly * refactor: use the userPath from the start of the filecycle to avoid handling the blob, whose loading may fail upon user request * refactor: delete temp files on reload and new chat
This commit is contained in:
parent
650759306d
commit
cc39074e0a
15 changed files with 160 additions and 66 deletions
|
|
@ -5,6 +5,7 @@ import type { ExtendedFile } from '~/common';
|
|||
import { useToastContext } from '~/Providers/ToastContext';
|
||||
import { useChatContext } from '~/Providers/ChatContext';
|
||||
import { useUploadImageMutation } from '~/data-provider';
|
||||
import useSetFilesToDelete from './useSetFilesToDelete';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
|
||||
const sizeMB = 20;
|
||||
|
|
@ -19,6 +20,7 @@ const useFileHandling = () => {
|
|||
const [errors, setErrors] = useState<string[]>([]);
|
||||
const setError = (error: string) => setErrors((prevErrors) => [...prevErrors, error]);
|
||||
const { files, setFiles, setFilesLoading } = useChatContext();
|
||||
const setFilesToDelete = useSetFilesToDelete();
|
||||
|
||||
const displayToast = useCallback(() => {
|
||||
if (errors.length > 1) {
|
||||
|
|
@ -82,6 +84,11 @@ const useFileHandling = () => {
|
|||
}
|
||||
updatedFiles.set(fileId, { ...currentFile, ...updates });
|
||||
|
||||
if (updates['filepath'] && updates['progress'] !== 1) {
|
||||
const files = Object.fromEntries(updatedFiles);
|
||||
setFilesToDelete(files);
|
||||
}
|
||||
|
||||
return updatedFiles;
|
||||
});
|
||||
};
|
||||
|
|
@ -94,6 +101,9 @@ const useFileHandling = () => {
|
|||
} else {
|
||||
console.warn(`File with id ${fileId} not found.`);
|
||||
}
|
||||
|
||||
const files = Object.fromEntries(updatedFiles);
|
||||
setFilesToDelete(files);
|
||||
return updatedFiles;
|
||||
});
|
||||
};
|
||||
|
|
@ -107,14 +117,11 @@ const useFileHandling = () => {
|
|||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const file = files.get(data.temp_file_id);
|
||||
updateFileById(data.temp_file_id, {
|
||||
progress: 1,
|
||||
file_id: data.file_id,
|
||||
temp_file_id: data.temp_file_id,
|
||||
filepath: data.filepath,
|
||||
// filepath: file?.preview,
|
||||
preview: file?.preview,
|
||||
type: data.type,
|
||||
height: data.height,
|
||||
width: data.width,
|
||||
|
|
@ -231,8 +238,7 @@ const useFileHandling = () => {
|
|||
replaceFile(extendedFile);
|
||||
|
||||
await uploadFile(extendedFile);
|
||||
// This gets cleaned up in the Image component, after receiving the server image
|
||||
// URL.revokeObjectURL(preview);
|
||||
URL.revokeObjectURL(preview);
|
||||
};
|
||||
img.src = preview;
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue