fix(ui): error handling if unable to convert image URL to blob

invoke-ai · Aug 20, 2024 · ba955cc · ba955cc
1 parent 6649b83
commit ba955cc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts b/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts
@@ -8,7 +8,7 @@ import { $authToken } from 'app/store/nanostores/authToken';
  */
 
 export const convertImageUrlToBlob = async (url: string) =>
-  new Promise<Blob | null>((resolve) => {
+  new Promise<Blob | null>((resolve, reject) => {
     const img = new Image();
     img.onload = () => {
       const canvas = document.createElement('canvas');
@@ -17,17 +17,23 @@ export const convertImageUrlToBlob = async (url: string) =>
 
       const context = canvas.getContext('2d');
       if (!context) {
+        reject(new Error('Failed to get canvas context'));
         return;
       }
       context.drawImage(img, 0, 0);
-      resolve(
-        new Promise<Blob | null>((resolve) => {
-          canvas.toBlob(function (blob) {
-            resolve(blob);
-          }, 'image/png');
-        })
-      );
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Failed to convert image to blob'));
+        }
+      }, 'image/png');
     };
+
+    img.onerror = () => {
+      reject(new Error('Image failed to load. The URL may be invalid or the object may not exist.'));
+    };
+
     img.crossOrigin = $authToken.get() ? 'use-credentials' : 'anonymous';
     img.src = url;
   });
diff --git a/...ai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx b/...ai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx
@@ -48,9 +48,13 @@ export const StylePresetModal = () => {
       } else {
         let file = null;
         if (data.imageUrl) {
-          const blob = await convertImageUrlToBlob(data.imageUrl);
-          if (blob) {
-            file = new File([blob], 'style_preset.png', { type: 'image/png' });
+          try {
+            const blob = await convertImageUrlToBlob(data.imageUrl);
+            if (blob) {
+              file = new File([blob], 'style_preset.png', { type: 'image/png' });
+            }
+          } catch (error) {
+            // do nothing
           }
         }
         setFormData({