🛠️ 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:
Danny Avila 2023-11-24 16:45:06 -05:00 committed by GitHub
parent 650759306d
commit cc39074e0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 160 additions and 66 deletions

View file

@ -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) {