Multiple images can now be selected in file chooser and drag/drop

_locales/en/messages.json

@@ -561,11 +561,6 @@
       }
     }
   },
-  "maxOneAttachmentToast": {
-    "message": "The limit is one attachment per message.",
-    "description":
-      "An error popup when the user has attempted to add an attachment"
-  },
   "oneNonImageAtATimeToast": {
     "message":
       "When including a non-image attachment, the limit is one attachment per message.",

background.html

@@ -132,7 +132,7 @@
                 </div>
                 <div class='choose-file'>
                     <button class='paperclip thumbnail'></button>
-                    <input type='file' class='file-input'>
+                    <input type='file' class='file-input' multiple='multiple'>
                 </div>
               </div>
             </form>

js/views/conversation_view.js

@@ -288,9 +288,15 @@
     },
     async onChoseAttachment() {
       const fileField = this.$('input.file-input');
-      const file = fileField.prop('files')[0];
+      const files = fileField.prop('files');
-      await this.fileInput.maybeAddAttachment(file);
+
-      this.toggleMicrophone();
+      for (let i = 0, max = files.length; i < max; i += 1) {
+        const file = files[i];
+        // eslint-disable-next-line no-await-in-loop
+        await this.fileInput.maybeAddAttachment(file);
+        this.toggleMicrophone();
+      }
+
       fileField.val(null);
     },
 

js/views/file_input_view.js

@@ -42,9 +42,6 @@
   Whisper.MaxAttachmentsToast = Whisper.ToastView.extend({
     template: i18n('maximumAttachments'),
   });
-  Whisper.MaxOneAttachmentToast = Whisper.ToastView.extend({
-    template: i18n('maxOneAttachmentToast'),
-  });
 
   Whisper.FileInputView = Backbone.View.extend({
     tagName: 'span',
@@ -155,7 +152,7 @@
       this.$el.removeClass('dropoff');
     },
 
-    onDrop(e) {
+    async onDrop(e) {
       if (e.originalEvent.dataTransfer.types[0] !== 'Files') {
         return;
       }
@@ -163,9 +160,13 @@
       e.stopPropagation();
       e.preventDefault();
 
-      // eslint-disable-next-line prefer-destructuring
+      const { files } = e.originalEvent.dataTransfer;
-      const file = e.originalEvent.dataTransfer.files[0];
+      for (let i = 0, max = files.length; i < max; i += 1) {
-      this.maybeAddAttachment(file);
+        const file = files[i];
+        // eslint-disable-next-line no-await-in-loop
+        await this.maybeAddAttachment(file);
+      }
+
       this.$el.removeClass('dropoff');
     },
 
@@ -255,12 +256,6 @@
       toast.render();
     },
 
-    showMaxOneAttachmentError() {
-      const toast = new Whisper.MaxOneAttachmentToast();
-      toast.$el.insertAfter(this.$el);
-      toast.render();
-    },
-
     // Housekeeping
 
     addAttachment(attachment) {
@@ -280,12 +275,6 @@
       const fileName = file.name;
       const contentType = file.type;
 
-      // TODO: remove this when clients are ready to remove multiple image attachments
-      // if (this.attachments.length > 0) {
-      //   this.showMaxOneAttachmentError();
-      //   return;
-      // }
-
       if (window.Signal.Util.isFileDangerous(fileName)) {
         this.showDangerousError();
         return;