compose: Prototype upload-file UI

Fixes: zulip#57

Author: chrisbobbe

lib/widgets/compose_box.dart

@@ -1,3 +1,6 @@
+import 'dart:math';
+
+import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'dialog.dart';
 
@@ -44,21 +47,75 @@ class TopicTextEditingController extends TextEditingController {
 
 enum ContentValidationError {
   empty,
-  tooLong;
+  tooLong,
+  uploadInProgress;
 
-  // Later: upload in progress; quote-and-reply in progress
+  // Later: quote-and-reply in progress
 
   String message() {
     switch (this) {
       case ContentValidationError.tooLong:
         return "Message length shouldn't be greater than 10000 characters.";
       case ContentValidationError.empty:
         return 'You have nothing to send!';
+      case ContentValidationError.uploadInProgress:
+        return 'Please wait for the upload to complete.';
     }
   }
 }
 
 class ContentTextEditingController extends TextEditingController {
+  int _uploadCounter = 0;
+
+  final Map<int, ({String filename, String placeholder})> _uploads = {};
+
+  /// The cursor position, if selection is valid and collapsed, else text.length.
+  TextRange _cursorPositionOrEnd() {
+    final TextRange selection = value.selection;
+    final String text = value.text;
+    final int index = (selection.isValid && selection.end < text.length && selection.isCollapsed)
+      ? selection.end
+      : text.length;
+    return TextRange.collapsed(index);
+  }
+
+  /// Tells the controller that a file upload has started.
+  ///
+  /// Returns an int "tag" that should be passed to registerUploadEnd on the
+  /// upload's success or failure.
+  int registerUploadStart(String filename) {
+    final tag = _uploadCounter;
+    _uploadCounter += 1;
+    final placeholder = '[Uploading $filename...]()\n\n'; // TODO(i18n)
+    _uploads[tag] = (filename: filename, placeholder: placeholder);
+    notifyListeners(); // _uploads change could affect validationErrors
+    value = value.replaced(_cursorPositionOrEnd(), placeholder);
+    return tag;
+  }
+
+  /// Tells the controller that a file upload has ended, with success or error.
+  ///
+  /// To indicate success, pass the URL to be used for the Markdown link.
+  /// Without that, failure is assumed.
+  void registerUploadEnd(int tag, Uri? url) {
+    final val = _uploads[tag];
+    assert(val != null, 'registerUploadEnd called twice for same tag');
+    final (filename: filename, placeholder: placeholder) = val!;
+    final int startIndex = text.indexOf(placeholder);
+    final replacementRange = startIndex >= 0
+      ? TextRange(start: startIndex, end: startIndex + placeholder.length)
+      : _cursorPositionOrEnd();
+
+    // TODO(i18n)
+    value = value.replaced(
+      replacementRange,
+      url == null
+        ? '[Failed to upload file: $filename]()\n\n'
+        : '[$filename](${url.toString()})\n\n');
+    _uploads.remove(tag);
+    notifyListeners(); // _uploads change could affect validationErrors
+  }
+
   String textNormalized() {
     return text.trim();
   }
@@ -74,6 +131,9 @@ class ContentTextEditingController extends TextEditingController {
       // be conservative and may cut the user off shorter than necessary.
       if (normalized.length > kMaxMessageLengthCodePoints)
         ContentValidationError.tooLong,
+
+      if (_uploads.isNotEmpty)
+        ContentValidationError.uploadInProgress,
     ];
   }
 }
@@ -257,6 +317,91 @@ class _StreamSendButtonState extends State<_StreamSendButton> {
   }
 }
 
+class _AttachFileButton extends StatelessWidget {
+  const _AttachFileButton({required this.contentController});
+
+  final ContentTextEditingController contentController;
+
+  _handlePress(BuildContext context) async {
+    FilePickerResult? result;
+    try {
+      result = await FilePicker.platform.pickFiles(allowMultiple: true, withReadStream: true);
+    } catch (e) {
+      // TODO(i18n)
+      showErrorDialog(context: context, title: 'Error', message: e.toString());
+      return;
+    }
+
+    if (result == null) {
+      return; // User cancelled; do nothing
+    }
+
+    if (context.mounted) {} // https://github.com/dart-lang/linter/issues/4007
+    else {
+      return;
+    }
+
+    final store = PerAccountStoreWidget.of(context);
+    final account = store.account;
+    final realmUrl = Uri.parse(account.realmUrl);
+
+    final List<PlatformFile> tooLargeFiles = [];
+    final List<PlatformFile> rightSizeFiles = [];
+
+    for (PlatformFile file in result.files) {
+      if ((file.size / pow(2, 20)) > store.maxFileUploadSizeMib) {
+        tooLargeFiles.add(file);
+      } else {
+        rightSizeFiles.add(file);
+      }
+    }
+
+
+    if (tooLargeFiles.isNotEmpty) {
+      final listMessage = tooLargeFiles
+        .map((file) => '${file.name}: ${(file.size / pow(2, 20)).toStringAsFixed(1)} MiB')
+        .join('\n');
+      showErrorDialog( // TODO(i18n)
+        context: context,
+        title: 'File(s) too large',
+        message:
+          '${tooLargeFiles.length} file(s) are larger than the server\'s limit of ${store.maxFileUploadSizeMib} MiB and will not be uploaded:\n\n$listMessage');
+    }
+
+    final List<(int, PlatformFile)> uploadsInProgress = [];
+    for (final file in rightSizeFiles) {
+      final tag = contentController.registerUploadStart(file.name);
+      uploadsInProgress.add((tag, file));
+    }
+
+    for (final (tag, file) in uploadsInProgress) {
+      final readStream = file.readStream;
+      final size = file.size;
+      final name = file.name;
+
+      // Will fail if we didn't pass `withReadStream: true` to pickFiles
+      assert(readStream != null, 'readStream missing');
+      Uri? url;
+      try {
+        final result = await uploadFile(store.connection, content: readStream!, length: size, filename: name);
+        url = realmUrl.resolve(result.uri);
+      } catch (e) {
+        if (!context.mounted) return;
+        // TODO: Specifically handle `413 Payload Too Large`
+        // TODO: On API errors, quote `msg` from server, with "The server said:"
+        showErrorDialog(context: context, title: 'Failed to upload file: $name', message: e.toString());
+      } finally {
+        contentController.registerUploadEnd(tag, url);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(icon: const Icon(Icons.attach_file), onPressed: () => _handlePress(context));
+  }
+}
+
 /// The compose box for writing a stream message.
 class StreamComposeBox extends StatefulWidget {
   const StreamComposeBox({super.key});
@@ -310,18 +455,29 @@ class _StreamComposeBoxState extends State<StreamComposeBox> {
           minimum: const EdgeInsets.fromLTRB(8, 0, 8, 8),
           child: Padding(
             padding: const EdgeInsets.only(top: 8.0),
-            child: Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
-              Expanded(
-                child: Theme(
-                    data: inputThemeData,
-                    child: Column(
-                        children: [
-                          topicInput,
-                          const SizedBox(height: 8),
-                          _StreamContentInput(topicController: _topicController, controller: _contentController),
-                        ]))),
-              const SizedBox(width: 8),
-              _StreamSendButton(topicController: _topicController, contentController: _contentController),
-            ]))));
+            child: Column(
+              children: [
+                Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
+                  Expanded(
+                    child: Theme(
+                        data: inputThemeData,
+                        child: Column(
+                            children: [
+                              topicInput,
+                              const SizedBox(height: 8),
+                              _StreamContentInput(topicController: _topicController, controller: _contentController),
+                            ]))),
+                  const SizedBox(width: 8),
+                  _StreamSendButton(topicController: _topicController, contentController: _contentController),
+                ]),
+                Theme(
+                  data: themeData.copyWith(
+                    iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
+                  child: Row(
+                    children: [
+                      _AttachFileButton(contentController: _contentController),
+                    ])),
+              ],
+            ))));
   }
 }