From dad39d11298b1550704d8f27f43e49885491a6d3 Mon Sep 17 00:00:00 2001
From: doouding <github@douding.io>
Date: Wed, 19 Feb 2025 03:47:48 +0000
Subject: [PATCH] fix: handle unsupported image upload (#10272)

---
 .../affine/block-image/src/image-service.ts   | 21 ++++++++++---------
 blocksuite/affine/block-image/src/utils.ts    | 10 ++++++++-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/blocksuite/affine/block-image/src/image-service.ts b/blocksuite/affine/block-image/src/image-service.ts
index 4d63cd768..962c5bb28 100644
--- a/blocksuite/affine/block-image/src/image-service.ts
+++ b/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;
     }
 
diff --git a/blocksuite/affine/block-image/src/utils.ts b/blocksuite/affine/block-image/src/utils.ts
index eb5d43027..9719cb70b 100644
--- a/blocksuite/affine/block-image/src/utils.ts
+++ b/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