fix: handle unsupported image upload (#10272)

blocksuite/affine/block-image/src/image-service.ts

@@ -40,17 +40,18 @@ export const ImageDropOption = FileDropConfigExtension({
     if (isInsideEdgelessEditor(std.host)) {
       const gfx = std.get(GfxControllerIdentifier);
       point = gfx.viewport.toViewCoordFromClientCoord(point);
-      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH }).catch(
-        console.error
-      );
+      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH })
+        .then(() => {
+          std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+            control: 'canvas:drop',
+            page: 'whiteboard editor',
+            module: 'toolbar',
+            segment: 'toolbar',
+            type: 'image',
+          });
+        })
+        .catch(console.error);
 
-      std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
-        control: 'canvas:drop',
-        page: 'whiteboard editor',
-        module: 'toolbar',
-        segment: 'toolbar',
-        type: 'image',
-      });
       return true;
     }
 

blocksuite/affine/block-image/src/utils.ts

@@ -512,9 +512,17 @@ export async function addImages(
   // upload image data and update the image model
   const uploadPromises = imageFiles.map(async (file, index) => {
     const { point, blockId } = dropInfos[index];
+    const block = std.store.getBlock(blockId);
+    const imageSize = await readImageSize(file);
+
+    if (!imageSize.width || !imageSize.height) {
+      std.store.deleteBlock(block!.model);
+
+      toast(std.host, 'Failed to read image size, please try another image');
+      throw new Error('Failed to read image size');
+    }
 
     const sourceId = await std.store.blobSync.set(file);
-    const imageSize = await readImageSize(file);
 
     const center = Vec.toVec(point);
     // If maxWidth is provided, limit the width of the image to maxWidth