🛠️ 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

api/server/routes/files/files.js

@@ -8,8 +8,8 @@ const router = express.Router();
 
 const isUUID = z.string().uuid();
 
-const isValidPath = (base, subfolder, filepath) => {
-  const normalizedBase = path.resolve(base, subfolder, 'temp');
+const isValidPath = (req, base, subfolder, filepath) => {
+  const normalizedBase = path.resolve(base, subfolder, req.user.id);
   const normalizedFilepath = path.resolve(filepath);
   return normalizedFilepath.startsWith(normalizedBase);
 };
@@ -20,7 +20,7 @@ const deleteFile = async (req, file) => {
   const subfolder = parts[1];
   const filepath = path.join(publicPath, file.filepath);
 
-  if (!isValidPath(publicPath, subfolder, filepath)) {
+  if (!isValidPath(req, publicPath, subfolder, filepath)) {
     throw new Error('Invalid file path');
   }
 
@@ -40,6 +40,11 @@ router.delete('/', async (req, res) => {
       return isUUID.safeParse(file.file_id).success;
     });
 
+    if (files.length === 0) {
+      res.status(204).json({ message: 'Nothing provided to delete' });
+      return;
+    }
+
     const file_ids = files.map((file) => file.file_id);
     const promises = [];
     promises.push(await deleteFiles(file_ids));

api/server/routes/files/images.js

@@ -33,7 +33,7 @@ router.post('/', upload.single('file'), async (req, res) => {
     uuidSchema.parse(metadata.file_id);
     metadata.temp_file_id = metadata.file_id;
     metadata.file_id = req.file_id;
-    await localStrategy({ res, file, metadata });
+    await localStrategy({ req, res, file, metadata });
   } catch (error) {
     console.error('Error processing file:', error);
     try {

api/server/services/Files/images/convert.js

@@ -1,16 +1,35 @@
 const path = require('path');
 const sharp = require('sharp');
-const fs = require('fs').promises;
+const fs = require('fs');
 const { resizeImage } = require('./resize');
 
-async function convertToWebP(inputFilePath, resolution = 'high') {
+async function convertToWebP(req, file, resolution = 'high') {
+  const inputFilePath = file.path;
   const { buffer: resizedBuffer, width, height } = await resizeImage(inputFilePath, resolution);
-  const outputFilePath = inputFilePath.replace(/\.[^/.]+$/, '') + '.webp';
+  const extension = path.extname(inputFilePath);
+
+  const { imageOutput } = req.app.locals.config;
+  const userPath = path.join(imageOutput, req.user.id);
+
+  if (!fs.existsSync(userPath)) {
+    fs.mkdirSync(userPath, { recursive: true });
+  }
+
+  const newPath = path.join(userPath, path.basename(inputFilePath));
+
+  if (extension.toLowerCase() === '.webp') {
+    const bytes = Buffer.byteLength(resizedBuffer);
+    await fs.promises.writeFile(newPath, resizedBuffer);
+    const filepath = path.posix.join('/', 'images', req.user.id, path.basename(newPath));
+    return { filepath, bytes, width, height };
+  }
+
+  const outputFilePath = newPath.replace(extension, '.webp');
   const data = await sharp(resizedBuffer).toFormat('webp').toBuffer();
-  await fs.writeFile(outputFilePath, data);
+  await fs.promises.writeFile(outputFilePath, data);
   const bytes = Buffer.byteLength(data);
-  const filepath = path.posix.join('/', 'images', 'temp', path.basename(outputFilePath));
-  await fs.unlink(inputFilePath);
+  const filepath = path.posix.join('/', 'images', req.user.id, path.basename(outputFilePath));
+  await fs.promises.unlink(inputFilePath);
   return { filepath, bytes, width, height };
 }
 

api/server/services/Files/images/encode.js

@@ -14,7 +14,7 @@ function encodeImage(imagePath) {
   });
 }
 
-async function encodeAndMove(req, file) {
+async function updateAndEncode(req, file) {
   const { publicPath, imageOutput } = req.app.locals.config;
   const userPath = path.join(imageOutput, req.user.id);
 
@@ -23,24 +23,16 @@ async function encodeAndMove(req, file) {
   }
   const filepath = path.join(publicPath, file.filepath);
 
-  if (!filepath.includes('temp')) {
-    const base64 = await encodeImage(filepath);
-    return [file, base64];
-  }
-
-  const newPath = path.join(userPath, path.basename(file.filepath));
-  await fs.promises.rename(filepath, newPath);
-  const newFilePath = path.posix.join('/', 'images', req.user.id, path.basename(file.filepath));
   const promises = [];
-  promises.push(updateFile({ file_id: file.file_id, filepath: newFilePath }));
-  promises.push(encodeImage(newPath));
+  promises.push(updateFile({ file_id: file.file_id }));
+  promises.push(encodeImage(filepath));
   return await Promise.all(promises);
 }
 
 async function encodeAndFormat(req, files) {
   const promises = [];
   for (let file of files) {
-    promises.push(encodeAndMove(req, file));
+    promises.push(updateAndEncode(req, file));
   }
 
   // TODO: make detail configurable, as of now resizing is done

api/server/services/Files/localStrategy.js

@@ -7,16 +7,18 @@ const { convertToWebP } = require('./images/convert');
  * Files must be deleted from the server filesystem manually.
  *
  * @param {Object} params - The parameters object.
+ * @param {Express.Request} params.req - The Express request object.
  * @param {Express.Response} params.res - The Express response object.
  * @param {Express.Multer.File} params.file - The uploaded file.
  * @param {ImageMetadata} params.metadata - Additional metadata for the file.
  * @returns {Promise<void>}
  */
-const localStrategy = async ({ res, file, metadata }) => {
+const localStrategy = async ({ req, res, file, metadata }) => {
   const { file_id, temp_file_id } = metadata;
-  const { filepath, bytes, width, height } = await convertToWebP(file.path);
+  const { filepath, bytes, width, height } = await convertToWebP(req, file);
   const result = await createFile(
     {
+      user: req.user.id,
       file_id,
       temp_file_id,
       bytes,