compose: Allow multiple file selection when uploading pictures

Fixes: #2366
Co-authored-by: Akash Dhiman <akash.d0407@gmail.com>

Author: chrisbobbe

src/compose/ComposeMenu.js

@@ -124,11 +124,7 @@ export default function ComposeMenu(props: Props): Node {
 
       const { assets } = response;
 
-      // TODO: support sending multiple files; see library's docs for how to
-      // let `assets` have more than one item in `response`.
-      const firstAsset = assets && assets[0];
-
-      if (!firstAsset) {
+      if (!assets || !assets[0]) {
         // TODO: See if we these unexpected situations actually happen. …Ah,
         //   yep, reportedly (and we've seen in Sentry):
         //   https://github.com/react-native-image-picker/react-native-image-picker/issues/1945
@@ -139,22 +135,39 @@ export default function ComposeMenu(props: Props): Node {
         return;
       }
 
-      const { uri, fileName } = firstAsset;
+      const attachments = [];
+      let numMalformed = 0;
+      assets.forEach((asset, i) => {
+        const { uri, fileName } = asset;
 
-      if (uri == null || fileName == null) {
-        // TODO: See if these unexpected situations actually happen.
-        showErrorAlert(_('Error'), _('Failed to attach your file.'));
-        logging.error(
-          'First (should be only) asset returned from image picker had nullish `url` and/or `fileName`',
-          {
+        if (uri == null || fileName == null) {
+          // TODO: See if these unexpected situations actually happen.
+          logging.error('An asset returned from image picker had nullish `url` and/or `fileName`', {
             'uri == null': uri == null,
             'fileName == null': fileName == null,
-          },
-        );
-        return;
+            i,
+          });
+          numMalformed++;
+          return;
+        }
+
+        attachments.push({ name: chooseUploadImageFilename(uri, fileName), url: uri });
+      });
+
+      if (numMalformed > 0) {
+        if (assets.length === 1 && numMalformed === 1) {
+          showErrorAlert(_('Error'), _('Failed to attach your file.'));
+          return;
+        } else if (assets.length === numMalformed) {
+          showErrorAlert(_('Error'), _('Failed to attach your files.'));
+          return;
+        } else {
+          showErrorAlert(_('Error'), _('Failed to attach some of your files.'));
+          // no return; `attachments` will have some items that we can insert
+        }
       }
 
-      insertAttachments([{ name: chooseUploadImageFilename(uri, fileName), url: uri }]);
+      insertAttachments(attachments);
     },
     [_, insertAttachments],
   );
@@ -167,6 +180,17 @@ export default function ComposeMenu(props: Props): Node {
 
         quality: 1.0,
         includeBase64: false,
+
+        // From the doc:
+        //   https://github.com/react-native-image-picker/react-native-image-picker/tree/v4.8.4#options
+        // > […] use `0` to allow any number of files. Only iOS version >=
+        // > 14 support `0` and also it supports providing any integer value
+        //
+        // On Android, the implementation now seems to put you into a kind
+        // of file picker UI filtered down to images, instead of into the
+        // Gallery app. See screen recordings on a recent Android:
+        //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Android.20select.20multiple.20photos/near/1423109
+        selectionLimit: 0,
       },
       handleImagePickerResponse,
     );

static/translations/messages_en.json

@@ -1,6 +1,8 @@
 {
   "Confirm": "Confirm",
   "Failed to attach your file.": "Failed to attach your file.",
+  "Failed to attach your files.": "Failed to attach your files.",
+  "Failed to attach some of your files.": "Failed to attach some of your files.",
   "Configure permissions": "Configure permissions",
   "You": "You",
   "Discard changes": "Discard changes",