MediaUpload: Allow drag-and-drop of multiple files at once

Closes #572 (closed)

src/components/media_upload/media_upload.js

@@ -5,10 +5,15 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 const mediaUpload = {
   data () {
     return {
-      uploading: false,
+      uploadCount: 0,
       uploadReady: true
     }
   },
+  computed: {
+    uploading () {
+      return this.uploadCount > 0
+    }
+  },
   methods: {
     uploadFile (file) {
       const self = this
@@ -23,21 +28,27 @@ const mediaUpload = {
       formData.append('file', file)
 
       self.$emit('uploading')
-      self.uploading = true
+      self.uploadCount++
 
       statusPosterService.uploadMedia({ store, formData })
         .then((fileData) => {
           self.$emit('uploaded', fileData)
-          self.uploading = false
+          self.decreaseUploadCount()
         }, (error) => { // eslint-disable-line handle-callback-err
           self.$emit('upload-failed', 'default')
-          self.uploading = false
+          self.decreaseUploadCount()
         })
     },
+    decreaseUploadCount () {
+      this.uploadCount--
+      if (this.uploadCount === 0) {
+        this.$emit('all-uploaded')
+      }
+    },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
         e.preventDefault() // allow dropping text like before
-        this.uploadFile(e.dataTransfer.files[0])
+        this.multiUpload(e.dataTransfer.files)
       }
     },
     fileDrag (e) {
@@ -54,11 +65,13 @@ const mediaUpload = {
         this.uploadReady = true
       })
     },
-    change ({ target }) {
-      for (var i = 0; i < target.files.length; i++) {
-        let file = target.files[i]
+    multiUpload (files) {
+      for (const file of files) {
         this.uploadFile(file)
       }
+    },
+    change ({ target }) {
+      this.multiUpload(target.files)
     }
   },
   props: [
@@ -67,7 +80,7 @@ const mediaUpload = {
   watch: {
     'dropFiles': function (fileInfos) {
       if (!this.uploading) {
-        this.uploadFile(fileInfos[0])
+        this.multiUpload(fileInfos)
       }
     }
   }