🖼️ feat: Add Optional Client-Side Image Resizing to Prevent Upload Errors (#7909)

* feat: Add optional client-side image resizing to prevent upload errors

* Addressing comments from author

* Addressing eslint errors

* Fixing the naming to clientresize from clientsideresize

client/src/utils/__tests__/imageResize.test.ts

@@ -0,0 +1,108 @@
+/**
+ * Tests for client-side image resizing utility
+ */
+
+import { shouldResizeImage, supportsClientResize } from '../imageResize';
+
+// Mock browser APIs for testing
+Object.defineProperty(global, 'HTMLCanvasElement', {
+  value: function () {
+    return {
+      getContext: () => ({
+        drawImage: jest.fn(),
+      }),
+      toBlob: jest.fn(),
+    };
+  },
+  writable: true,
+});
+
+Object.defineProperty(global, 'FileReader', {
+  value: function () {
+    return {
+      readAsDataURL: jest.fn(),
+    };
+  },
+  writable: true,
+});
+
+Object.defineProperty(global, 'Image', {
+  value: function () {
+    return {};
+  },
+  writable: true,
+});
+
+describe('imageResize utility', () => {
+  describe('supportsClientResize', () => {
+    it('should return true when all required APIs are available', () => {
+      const result = supportsClientResize();
+      expect(result).toBe(true);
+    });
+
+    it('should return false when HTMLCanvasElement is not available', () => {
+      const originalCanvas = global.HTMLCanvasElement;
+      // @ts-ignore
+      delete global.HTMLCanvasElement;
+
+      const result = supportsClientResize();
+      expect(result).toBe(false);
+
+      global.HTMLCanvasElement = originalCanvas;
+    });
+  });
+
+  describe('shouldResizeImage', () => {
+    it('should return true for large image files', () => {
+      const largeImageFile = new File([''], 'test.jpg', {
+        type: 'image/jpeg',
+        lastModified: Date.now(),
+      });
+
+      // Mock large file size
+      Object.defineProperty(largeImageFile, 'size', {
+        value: 100 * 1024 * 1024, // 100MB
+        writable: false,
+      });
+
+      const result = shouldResizeImage(largeImageFile, 50 * 1024 * 1024); // 50MB limit
+      expect(result).toBe(true);
+    });
+
+    it('should return false for small image files', () => {
+      const smallImageFile = new File([''], 'test.jpg', {
+        type: 'image/jpeg',
+        lastModified: Date.now(),
+      });
+
+      // Mock small file size
+      Object.defineProperty(smallImageFile, 'size', {
+        value: 1024, // 1KB
+        writable: false,
+      });
+
+      const result = shouldResizeImage(smallImageFile, 50 * 1024 * 1024); // 50MB limit
+      expect(result).toBe(false);
+    });
+
+    it('should return false for non-image files', () => {
+      const textFile = new File([''], 'test.txt', {
+        type: 'text/plain',
+        lastModified: Date.now(),
+      });
+
+      const result = shouldResizeImage(textFile);
+      expect(result).toBe(false);
+    });
+
+    it('should return false for GIF files', () => {
+      const gifFile = new File([''], 'test.gif', {
+        type: 'image/gif',
+        lastModified: Date.now(),
+      });
+
+      const result = shouldResizeImage(gifFile);
+      expect(result).toBe(false);
+    });
+  });
+});

client/src/utils/imageResize.ts

@@ -0,0 +1,215 @@
+/**
+ * Client-side image resizing utility for LibreChat
+ * Resizes images to prevent backend upload errors while maintaining quality
+ */
+
+export interface ResizeOptions {
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+  format?: 'jpeg' | 'png' | 'webp';
+}
+
+export interface ResizeResult {
+  file: File;
+  originalSize: number;
+  newSize: number;
+  originalDimensions: { width: number; height: number };
+  newDimensions: { width: number; height: number };
+  compressionRatio: number;
+}
+
+/**
+ * Default resize options based on backend 'high' resolution settings
+ * Backend 'high' uses maxShortSide=768, maxLongSide=2000
+ * We use slightly smaller values to ensure no backend resizing is triggered
+ */
+const DEFAULT_RESIZE_OPTIONS: ResizeOptions = {
+  maxWidth: 1900, // Slightly less than backend maxLongSide=2000
+  maxHeight: 1900, // Slightly less than backend maxLongSide=2000
+  quality: 0.92, // High quality while reducing file size
+  format: 'jpeg', // Most compatible format
+};
+
+/**
+ * Checks if the browser supports canvas-based image resizing
+ */
+export function supportsClientResize(): boolean {
+  try {
+    // Check for required APIs
+    if (typeof HTMLCanvasElement === 'undefined') return false;
+    if (typeof FileReader === 'undefined') return false;
+    if (typeof Image === 'undefined') return false;
+
+    // Test canvas creation
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    return !!(ctx && ctx.drawImage && canvas.toBlob);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Calculates new dimensions while maintaining aspect ratio
+ */
+function calculateDimensions(
+  originalWidth: number,
+  originalHeight: number,
+  maxWidth: number,
+  maxHeight: number,
+): { width: number; height: number } {
+  const { width, height } = { width: originalWidth, height: originalHeight };
+
+  // If image is smaller than max dimensions, don't upscale
+  if (width <= maxWidth && height <= maxHeight) {
+    return { width, height };
+  }
+
+  // Calculate scaling factor
+  const widthRatio = maxWidth / width;
+  const heightRatio = maxHeight / height;
+  const scalingFactor = Math.min(widthRatio, heightRatio);
+
+  return {
+    width: Math.round(width * scalingFactor),
+    height: Math.round(height * scalingFactor),
+  };
+}
+
+/**
+ * Resizes an image file using canvas
+ */
+export function resizeImage(
+  file: File,
+  options: Partial<ResizeOptions> = {},
+): Promise<ResizeResult> {
+  return new Promise((resolve, reject) => {
+    // Check browser support
+    if (!supportsClientResize()) {
+      reject(new Error('Browser does not support client-side image resizing'));
+      return;
+    }
+
+    // Only process image files
+    if (!file.type.startsWith('image/')) {
+      reject(new Error('File is not an image'));
+      return;
+    }
+
+    const opts = { ...DEFAULT_RESIZE_OPTIONS, ...options };
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      const img = new Image();
+
+      img.onload = () => {
+        try {
+          const originalDimensions = { width: img.width, height: img.height };
+          const newDimensions = calculateDimensions(
+            img.width,
+            img.height,
+            opts.maxWidth!,
+            opts.maxHeight!,
+          );
+
+          // If no resizing needed, return original file
+          if (
+            newDimensions.width === originalDimensions.width &&
+            newDimensions.height === originalDimensions.height
+          ) {
+            resolve({
+              file,
+              originalSize: file.size,
+              newSize: file.size,
+              originalDimensions,
+              newDimensions,
+              compressionRatio: 1,
+            });
+            return;
+          }
+
+          // Create canvas and resize
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d')!;
+
+          canvas.width = newDimensions.width;
+          canvas.height = newDimensions.height;
+
+          // Use high-quality image smoothing
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = 'high';
+
+          // Draw resized image
+          ctx.drawImage(img, 0, 0, newDimensions.width, newDimensions.height);
+
+          // Convert to blob
+          canvas.toBlob(
+            (blob) => {
+              if (!blob) {
+                reject(new Error('Failed to create blob from canvas'));
+                return;
+              }
+
+              // Create new file with same name but potentially different extension
+              const extension = opts.format === 'jpeg' ? '.jpg' : `.${opts.format}`;
+              const baseName = file.name.replace(/\.[^/.]+$/, '');
+              const newFileName = `${baseName}${extension}`;
+
+              const resizedFile = new File([blob], newFileName, {
+                type: `image/${opts.format}`,
+                lastModified: Date.now(),
+              });
+
+              resolve({
+                file: resizedFile,
+                originalSize: file.size,
+                newSize: resizedFile.size,
+                originalDimensions,
+                newDimensions,
+                compressionRatio: resizedFile.size / file.size,
+              });
+            },
+            `image/${opts.format}`,
+            opts.quality,
+          );
+        } catch (error) {
+          reject(error);
+        }
+      };
+
+      img.onerror = () => reject(new Error('Failed to load image'));
+      img.src = event.target?.result as string;
+    };
+
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Determines if an image should be resized based on size and dimensions
+ */
+export function shouldResizeImage(
+  file: File,
+  fileSizeLimit: number = 512 * 1024 * 1024, // 512MB default
+): boolean {
+  // Don't resize if file is already small
+  if (file.size < fileSizeLimit * 0.1) {
+    // Less than 10% of limit
+    return false;
+  }
+
+  // Don't process non-images
+  if (!file.type.startsWith('image/')) {
+    return false;
+  }
+
+  // Don't process GIFs (they might be animated)
+  if (file.type === 'image/gif') {
+    return false;
+  }
+
+  return true;
+}