compose: Support images from keyboard for Android

PIG208 · sm-sayedi · commit 5561fca20eb1 · 2025-08-15T06:42:05.000+04:30
Fixes: #419 Fixes: #1173 Signed-off-by: Zixuan James Li <zixuan@zulip.com>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -762,6 +762,14 @@
   "@topicValidationErrorMandatoryButEmpty": {
     "description": "Topic validation error when topic is required but was empty."
   },
+  "errorContentNotInsertedTitle": "Content not inserted",
+  "@errorContentNotInsertedTitle": {
+    "description": "Title for error dialog when an attempt to insert rich content failed."
+  },
+  "errorContentToInsertIsEmpty": "The file to be inserted is empty or cannot be accessed.",
+  "@errorContentToInsertIsEmpty": {
+    "description": "Error message when the rich content to be inserted is empty or cannot be accessed."
+  },
   "errorServerVersionUnsupportedMessage": "{url} is running Zulip Server {zulipVersion}, which is unsupported. The minimum supported version is Zulip Server {minSupportedZulipVersion}.",
   "@errorServerVersionUnsupportedMessage": {
     "description": "Error message in the dialog for when the Zulip Server version is unsupported.",
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1165,6 +1165,18 @@ abstract class ZulipLocalizations {
   /// **'Topics are required in this organization.'**
   String get topicValidationErrorMandatoryButEmpty;
 
+  /// Title for error dialog when an attempt to insert rich content failed.
+  ///
+  /// In en, this message translates to:
+  /// **'Content not inserted'**
+  String get errorContentNotInsertedTitle;
+
+  /// Error message when the rich content to be inserted is empty or cannot be accessed.
+  ///
+  /// In en, this message translates to:
+  /// **'The file to be inserted is empty or cannot be accessed.'**
+  String get errorContentToInsertIsEmpty;
+
   /// Error message in the dialog for when the Zulip Server version is unsupported.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -625,6 +625,13 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -641,6 +641,13 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Themen sind in dieser Organisation erforderlich.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -625,6 +625,13 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_fr.dart b/lib/generated/l10n/zulip_localizations_fr.dart
@@ -639,6 +639,13 @@ class ZulipLocalizationsFr extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -636,6 +636,13 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'In questa organizzazione sono richiesti degli argomenti.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -622,6 +622,13 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -625,6 +625,13 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -634,6 +634,13 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Wątki są wymagane przez tę organizację.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -638,6 +638,13 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Темы обязательны в этой организации.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -625,6 +625,13 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -646,6 +646,13 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Teme so v tej organizaciji obvezne.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -638,6 +638,13 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Теми обовʼязкові в цій організації.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -625,6 +625,13 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   String get topicValidationErrorMandatoryButEmpty =>
       'Topics are required in this organization.';
 
+  @override
+  String get errorContentNotInsertedTitle => 'Content not inserted';
+
+  @override
+  String get errorContentToInsertIsEmpty =>
+      'The file to be inserted is empty or cannot be accessed.';
+
   @override
   String errorServerVersionUnsupportedMessage(
     String url,
diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:mime/mime.dart';
+import 'package:path/path.dart' as path;
 
 import '../api/exception.dart';
 import '../api/model/model.dart';
@@ -508,6 +509,38 @@ class _ContentInput extends StatelessWidget {
   final String? hintText;
   final bool enabled;
 
+  void _handleContentInserted(BuildContext context, KeyboardInsertedContent content) async {
+    if (content.data == null || content.data!.isEmpty) {
+      // As of writing, the engine implementation never leaves `content.data` as
+      // `null`, but ideally it should be when the data cannot be read for
+      // errors.
+      //
+      // When `content.data` is empty, the data is not literally empty — this
+      // can also happen when the data can't be read from the input stream
+      // provided by the Android SDK because of an IO exception.
+      //
+      // See Flutter engine implementation that prepares this data:
+      //   https://github.com/flutter/flutter/blob/0ffc4ce00/engine/src/flutter/shell/platform/android/io/flutter/plugin/editing/InputConnectionAdaptor.java#L497-L548
+      // TODO(upstream): improve the API for this
+      final zulipLocalizations = ZulipLocalizations.of(context);
+      showErrorDialog(context: context,
+        title: zulipLocalizations.errorContentNotInsertedTitle,
+        message: zulipLocalizations.errorContentToInsertIsEmpty);
+      return;
+    }
+
+    final file = FileToUpload(
+      content: Stream.fromIterable([content.data!]),
+      length: content.data!.length,
+      filename: path.basename(content.uri),
+      mimeType: content.mimeType);
+
+    await controller.uploadFiles(
+      context: context,
+      files: [file],
+      shouldRequestFocus: true);
+  }
+
   static double maxHeight(BuildContext context) {
     final clampingTextScaler = MediaQuery.textScalerOf(context)
       .clamp(maxScaleFactor: 1.5);
@@ -552,6 +585,8 @@ class _ContentInput extends StatelessWidget {
               enabled: enabled,
               controller: controller.content,
               focusNode: controller.contentFocusNode,
+              contentInsertionConfiguration: ContentInsertionConfiguration(
+                onContentInserted: (content) => _handleContentInserted(context, content)),
               // Let the content show through the `contentPadding` so that
               // our [InsetShadowBox] can fade it smoothly there.
               clipBehavior: Clip.none,
diff --git a/test/widgets/compose_box_test.dart b/test/widgets/compose_box_test.dart
@@ -6,6 +6,7 @@ import 'package:checks/checks.dart';
 import 'package:collection/collection.dart';
 import 'package:crypto/crypto.dart';
 import 'package:file_picker/file_picker.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:http/http.dart' as http;
@@ -1189,6 +1190,106 @@ void main() {
         .equals('[한국어 파일.txt]('
           '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/한국어 파일.txt)\n\n');
     });
+
+    group('attach from keyboard', () {
+      // This is adapted from:
+      //   https://github.com/flutter/flutter/blob/0ffc4ce00/packages/flutter/test/widgets/editable_text_test.dart#L724-L740
+      Future<void> insertContentFromKeyboard(WidgetTester tester, {
+        required List<int>? data,
+        required String attachedFileUrl,
+        required String mimeType,
+      }) async {
+        await tester.showKeyboard(contentInputFinder);
+        // This invokes [EditableText.performAction] on the content [TextField],
+        // which did not expose an API for testing.
+        // TODO(upstream): support a better API for testing this
+        await tester.binding.defaultBinaryMessenger.handlePlatformMessage(
+          SystemChannels.textInput.name,
+          SystemChannels.textInput.codec.encodeMethodCall(
+            MethodCall('TextInputClient.performAction', <dynamic>[
+              -1,
+              'TextInputAction.commitContent',
+              // This fakes data originally provided by the Flutter engine:
+              //   https://github.com/flutter/flutter/blob/0ffc4ce00/engine/src/flutter/shell/platform/android/io/flutter/plugin/editing/InputConnectionAdaptor.java#L497-L548
+              {
+                "mimeType": mimeType,
+                "data": data,
+                "uri": attachedFileUrl,
+              },
+            ])),
+          (ByteData? data) {});
+      }
+
+      testWidgets('success', (tester) async {
+        const fileContent = [1, 0, 1, 0, 0];
+        await prepare(tester);
+        const uploadUrl = '/user_uploads/1/4e/m2A3MSqFnWRLUf9SaPzQ0Up_/test.gif';
+        connection.prepare(json: UploadFileResult(url: uploadUrl).toJson());
+        await insertContentFromKeyboard(tester,
+          data: fileContent,
+          attachedFileUrl:
+            'content://com.zulip.android.zulipboard.provider'
+            '/root/com.zulip.android.zulipboard/candidate_temp/test.gif',
+          mimeType: 'image/gif');
+
+        await tester.pump();
+        check(controller!.content.text)
+          .equals('see image: [Uploading test.gif…]()\n\n');
+        // (the request is checked more thoroughly in API tests)
+        check(connection.lastRequest!).isA<http.MultipartRequest>()
+          ..method.equals('POST')
+          ..files.single.which((it) => it
+            ..field.equals('file')
+            ..length.equals(fileContent.length)
+            ..filename.equals('test.gif')
+            ..contentType.asString.equals('image/gif')
+            ..has<Future<List<int>>>((f) => f.finalize().toBytes(), 'contents')
+              .completes((it) => it.deepEquals(fileContent))
+          );
+        checkAppearsLoading(tester, true);
+
+        await tester.pump(Duration.zero);
+        check(controller!.content.text)
+          .equals('see image: [test.gif]($uploadUrl)\n\n');
+        checkAppearsLoading(tester, false);
+      });
+
+      testWidgets('data is null', (tester) async {
+        await prepare(tester);
+        await insertContentFromKeyboard(tester,
+          data: null,
+          attachedFileUrl:
+            'content://com.zulip.android.zulipboard.provider'
+            '/root/com.zulip.android.zulipboard/candidate_temp/test.gif',
+          mimeType: 'image/jpeg');
+
+        await tester.pump();
+        check(controller!.content.text).equals('see image: ');
+        check(connection.takeRequests()).isEmpty();
+        checkErrorDialog(tester,
+          expectedTitle: 'Content not inserted',
+          expectedMessage: 'The file to be inserted is empty or cannot be accessed.');
+        checkAppearsLoading(tester, false);
+      });
+
+      testWidgets('data is empty', (tester) async {
+        await prepare(tester);
+        await insertContentFromKeyboard(tester,
+          data: [],
+          attachedFileUrl:
+            'content://com.zulip.android.zulipboard.provider'
+            '/root/com.zulip.android.zulipboard/candidate_temp/test.gif',
+          mimeType: 'image/jpeg');
+
+        await tester.pump();
+        check(controller!.content.text).equals('see image: ');
+        check(connection.takeRequests()).isEmpty();
+        checkErrorDialog(tester,
+          expectedTitle: 'Content not inserted',
+          expectedMessage: 'The file to be inserted is empty or cannot be accessed.');
+        checkAppearsLoading(tester, false);
+      });
+    });
   });
 
   group('error banner', () {
