fix: disable compressing gif (#1854)

* fix: disable compressing gif

* fix: large GIF rejection error message

---------

Co-authored-by: James Browning <jamesbrowning91@gmail.com>

Author: flaviomoceri

src/components/CreateContent/Section/_FooterArea.tsx

@@ -152,15 +152,22 @@ export default function FooterArea({
           }
 
           if (isImage && file.size > maxImageSizeInBytes) {
+            let loadingAlertId: number | undefined;
             try {
-              const loadingAlertId = addAlert(`Compressing image ${i + 1}/${filesArray.length}...`, 'loading');
+              loadingAlertId = addAlert(`Compressing image ${i + 1}/${filesArray.length}...`, 'loading');
               setIsCompressing(true);
               setFilesBeingCompressed && setFilesBeingCompressed((prev) => prev + 1);
               const resizedFile = await Utils.resizeImageFile(file, maxImageSizeInBytes);
               removeAlert(loadingAlertId);
               validFiles.push(resizedFile);
             } catch (error) {
-              addAlert('The maximum allowed size for images is 5 MB', 'warning');
+              // Remove the loading alert if it exists
+              if (loadingAlertId) {
+                removeAlert(loadingAlertId);
+              }
+              // Show the actual error message from the compression function
+              const errorMessage = error instanceof Error ? error.message : String(error);
+              addAlert(errorMessage, 'warning');
               continue;
             } finally {
               setFilesBeingCompressed && setFilesBeingCompressed((prev) => Math.max(0, prev - 1));

src/components/CreateContent/Section/_InputArea.tsx

@@ -136,18 +136,22 @@ export default function InputArea({
           }
 
           if (isImage && file.size > maxImageSizeInBytes) {
+            let loadingAlertId: number | undefined;
             try {
-              const loadingAlertId = addAlert(
-                `Compressing image ${validFiles.length + 1}/${files.length}...`,
-                'loading'
-              );
+              loadingAlertId = addAlert(`Compressing image ${validFiles.length + 1}/${files.length}...`, 'loading');
               setIsCompressing(true);
               setFilesBeingCompressed && setFilesBeingCompressed((prev) => prev + 1);
               const resizedFile = await Utils.resizeImageFile(file, maxImageSizeInBytes);
               removeAlert(loadingAlertId);
               validFiles.push(resizedFile);
             } catch (error) {
-              addAlert('The maximum allowed size for images is 5 MB', 'warning');
+              // Remove the loading alert if it exists
+              if (loadingAlertId) {
+                removeAlert(loadingAlertId);
+              }
+              // Show the actual error message from the compression function
+              const errorMessage = error instanceof Error ? error.message : String(error);
+              addAlert(errorMessage, 'warning');
               continue;
             } finally {
               setFilesBeingCompressed && setFilesBeingCompressed((prev) => Math.max(0, prev - 1));

src/components/CreateContent/index.tsx

@@ -296,15 +296,22 @@ export default function CreateContent({
           const isVideo = file.type.startsWith('video/');
 
           if (isImage && file.size > maxImageSizeInBytes) {
+            let loadingAlertId: number | undefined;
             try {
-              const loadingAlertId = addAlert(`Compressing image ${i + 1}/${filesToProcess.length}...`, 'loading');
+              loadingAlertId = addAlert(`Compressing image ${i + 1}/${filesToProcess.length}...`, 'loading');
               setIsCompressing(true);
               setFilesBeingCompressed((prev) => prev + 1);
               const resizedFile = await Utils.resizeImageFile(file, maxImageSizeInBytes);
               removeAlert(loadingAlertId);
               validFiles.push(resizedFile);
             } catch (error) {
-              addAlert('The maximum allowed size for images is 5 MB', 'warning');
+              // Remove the loading alert if it exists
+              if (loadingAlertId) {
+                removeAlert(loadingAlertId);
+              }
+              // Show the actual error message from the compression function
+              const errorMessage = error instanceof Error ? error.message : String(error);
+              addAlert(errorMessage, 'warning');
               continue;
             } finally {
               setFilesBeingCompressed((prev) => Math.max(0, prev - 1));

src/components/Modal/_CreateArticle/_Content.tsx

@@ -244,7 +244,9 @@ export default function ContentCreateArticle({
           processedFile = await Utils.resizeImageFile(file, maxImageSizeInBytes);
           removeAlert(loadingAlertId);
         } catch (error) {
-          setErrorFile('The maximum allowed size for images is 5 MB');
+          // Show the actual error message from the compression function
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          addAlert(errorMessage, 'warning');
           return;
         } finally {
           setIsCompressing(false);
@@ -379,7 +381,9 @@ export default function ContentCreateArticle({
             processedFile = await Utils.resizeImageFile(file, maxImageSizeInBytes);
             removeAlert(loadingAlertId);
           } catch (error) {
-            addAlert('The maximum allowed size for images is 5 MB', 'warning');
+            // Show the actual error message from the compression function
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            addAlert(errorMessage, 'warning');
             return;
           } finally {
             setIsCompressing(false);

src/components/utils-shared/lib/Helper/resizeImageFile.ts

@@ -1,6 +1,12 @@
 // Utility to resize an image file to fit within a maximum file size while maintaining aspect ratio
 export async function resizeImageFile(file: File, maxSizeInBytes: number = 5 * 1024 * 1024): Promise<File> {
   return new Promise((resolve, reject) => {
+    // Check if file is a GIF and exceeds size limit
+    if (file.type === 'image/gif' && file.size > maxSizeInBytes) {
+      reject('GIF files cannot be compressed as it would lose the animation. Please use a GIF under 5 MB.');
+      return;
+    }
+
     const img = new window.Image();
     const reader = new FileReader();