From 236b5bfe901ce940fbcae43d0a185918117db04b Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Sat, 24 Feb 2024 10:05:20 +0700
Subject: [PATCH] feat: error message should persist on the image block (#4710)

---
 .../image/image_placeholder.dart              | 51 ++++++++++++++-----
 frontend/resources/translations/en.json       |  3 +-
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart
index 064580b752..9c6a9d6fc4 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/image_placeholder.dart
@@ -45,6 +45,7 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
   late final editorState = context.read<EditorState>();
 
   bool showLoading = false;
+  String? errorMessage;
 
   @override
   Widget build(BuildContext context) {
@@ -67,19 +68,7 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
                 size: Size.square(24),
               ),
               const HSpace(10),
-              ...showLoading
-                  ? [
-                      FlowyText(
-                        LocaleKeys.document_imageBlock_imageIsUploading.tr(),
-                      ),
-                      const HSpace(8),
-                      const CircularProgressIndicator.adaptive(),
-                    ]
-                  : [
-                      FlowyText(
-                        LocaleKeys.document_plugins_image_addAnImage.tr(),
-                      ),
-                    ],
+              ..._buildTrailing(context),
             ],
           ),
         ),
@@ -136,6 +125,30 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
     }
   }
 
+  List<Widget> _buildTrailing(BuildContext context) {
+    if (errorMessage != null) {
+      return [
+        FlowyText(
+          '${LocaleKeys.document_plugins_image_imageUploadFailed.tr()}: ${errorMessage!}',
+        ),
+      ];
+    } else if (showLoading) {
+      return [
+        FlowyText(
+          LocaleKeys.document_imageBlock_imageIsUploading.tr(),
+        ),
+        const HSpace(8),
+        const CircularProgressIndicator.adaptive(),
+      ];
+    } else {
+      return [
+        FlowyText(
+          LocaleKeys.document_plugins_image_addAnImage.tr(),
+        ),
+      ];
+    }
+  }
+
   void showUploadImageMenu() {
     if (PlatformExtension.isDesktopOrWeb) {
       controller.show();
@@ -188,8 +201,13 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
 
     final size = url.fileSize;
     if (size == null || size > 10 * 1024 * 1024) {
-      // show error
       controller.close();
+      setState(() {
+        showLoading = false;
+        this.errorMessage =
+            LocaleKeys.document_imageBlock_uploadImageErrorImageSizeTooBig.tr();
+      });
+      // show error
       showSnackBarMessage(
         context,
         LocaleKeys.document_imageBlock_uploadImageErrorImageSizeTooBig.tr(),
@@ -210,10 +228,12 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
       // else we should save the image to cloud storage
       setState(() {
         showLoading = true;
+        this.errorMessage = null;
       });
       (path, errorMessage) = await saveImageToCloudStorage(url);
       setState(() {
         showLoading = false;
+        this.errorMessage = errorMessage;
       });
       imageType = CustomImageType.internal;
     }
@@ -225,6 +245,9 @@ class ImagePlaceholderState extends State<ImagePlaceholder> {
             ? LocaleKeys.document_imageBlock_error_invalidImage.tr()
             : ': $errorMessage',
       );
+      setState(() {
+        this.errorMessage = errorMessage;
+      });
       return;
     }
 
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
index 20c3e1c9e1..98a134dcc0 100644
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@@ -786,7 +786,8 @@
       },
       "image": {
         "copiedToPasteBoard": "The image link has been copied to the clipboard",
-        "addAnImage": "Add an image"
+        "addAnImage": "Add an image",
+        "imageUploadFailed": "Image upload failed"
       },
       "urlPreview": {
         "copiedToPasteBoard": "The link has been copied to the clipboard"