fix: handle unsupported image upload (#10272)

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

@@ -40,10 +40,8 @@ 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(
+      addImages(std, files, { point, maxWidth: MAX_IMAGE_WIDTH })
-        console.error
+        .then(() => {
-      );
-
           std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
             control: 'canvas:drop',
             page: 'whiteboard editor',
@@ -51,6 +49,9 @@ export const ImageDropOption = FileDropConfigExtension({
             segment: 'toolbar',
             type: 'image',
           });
+        })
+        .catch(console.error);
+
       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