From e6a27bcaca57c4c6351f7c41c2892c4e5222829e Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 13:30:16 +0200
Subject: MediaUpload: Allow drag-and-drop of multiple files at once

---
 src/components/media_upload/media_upload.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components/media_upload/media_upload.js')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index f457d022..4568224b 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -37,7 +37,9 @@ const mediaUpload = {
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
         e.preventDefault() // allow dropping text like before
-        this.uploadFile(e.dataTransfer.files[0])
+        for (const file of e.dataTransfer.files) {
+          this.uploadFile(file)
+        }
       }
     },
     fileDrag (e) {
-- 
cgit v1.2.3-70-g09d2


From e45f7fe8772f538c6824718ec26067849bde34c6 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 18:22:17 +0200
Subject: MediaUpload: Correctly handle multiple uploads.

---
 src/components/media_upload/media_upload.js        | 33 ++++++++++++++--------
 .../post_status_form/post_status_form.js           |  2 --
 .../post_status_form/post_status_form.vue          |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

(limited to 'src/components/media_upload/media_upload.js')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 4568224b..16e47ef7 100644
--- a/src/components/media_upload/media_upload.js
+++ b/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,23 +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
-        for (const file of e.dataTransfer.files) {
-          this.uploadFile(file)
-        }
+        this.multiUpload(e.dataTransfer.files)
       }
     },
     fileDrag (e) {
@@ -56,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: [
@@ -69,7 +80,7 @@ const mediaUpload = {
   watch: {
     'dropFiles': function (fileInfos) {
       if (!this.uploading) {
-        this.uploadFile(fileInfos[0])
+        this.multiUpload(fileInfos)
       }
     }
   }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index a98e1e31..6164caa0 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -218,7 +218,6 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
-      this.enableSubmit()
     },
     removeMediaFile (fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
@@ -227,7 +226,6 @@ const PostStatusForm = {
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
       this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
-      this.enableSubmit()
     },
     disableSubmit () {
       this.submitDisabled = true
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9789a481..5629ceac 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -172,6 +172,7 @@
             @uploading="disableSubmit"
             @uploaded="addMediaFile"
             @upload-failed="uploadFailed"
+            @all-uploaded="enableSubmit"
           />
           <div
             class="emoji-icon"
-- 
cgit v1.2.3-70-g09d2


From fbc4889ece185bbe6386493562b89c83d6a89916 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 18:26:16 +0200
Subject: Linting.

---
 src/components/media_upload/media_upload.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/media_upload/media_upload.js')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 16e47ef7..5849b065 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -39,7 +39,7 @@ const mediaUpload = {
           self.decreaseUploadCount()
         })
     },
-    decreaseUploadCount() {
+    decreaseUploadCount () {
       this.uploadCount--
       if (this.uploadCount === 0) {
         this.$emit('all-uploaded')
-- 
cgit v1.2.3-70-g09d2


From cd9d732afa6d33f5db70161992a20e56ffd1d8cc Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 11:01:38 +0300
Subject: add better visual indication for dropping files, make dropzone bigger

---
 src/components/media_upload/media_upload.js        | 14 ----------
 src/components/media_upload/media_upload.vue       |  7 +----
 .../post_status_form/post_status_form.js           | 19 +++++++++++--
 .../post_status_form/post_status_form.vue          | 32 ++++++++++++++++++++--
 4 files changed, 47 insertions(+), 25 deletions(-)

(limited to 'src/components/media_upload/media_upload.js')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 5849b065..fbb2d03d 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -45,20 +45,6 @@ const mediaUpload = {
         this.$emit('all-uploaded')
       }
     },
-    fileDrop (e) {
-      if (e.dataTransfer.files.length > 0) {
-        e.preventDefault() // allow dropping text like before
-        this.multiUpload(e.dataTransfer.files)
-      }
-    },
-    fileDrag (e) {
-      let types = e.dataTransfer.types
-      if (types.contains('Files')) {
-        e.dataTransfer.dropEffect = 'copy'
-      } else {
-        e.dataTransfer.dropEffect = 'none'
-      }
-    },
     clearFile () {
       this.uploadReady = false
       this.$nextTick(() => {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 0fc305ac..5e31730b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="media-upload"
-    @drop.prevent
-    @dragover.prevent="fileDrag"
-    @drop="fileDrop"
-  >
+  <div class="media-upload">
     <label
       class="label"
       :title="$t('tool_tip.media_upload')"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6164caa0..3de6f70a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -82,7 +82,9 @@ const PostStatusForm = {
         contentType
       },
       caret: 0,
-      pollFormVisible: false
+      pollFormVisible: false,
+      showDropIcon: false,
+      dropStopTimeout: null
     }
   },
   computed: {
@@ -248,13 +250,26 @@ const PostStatusForm = {
       }
     },
     fileDrop (e) {
-      if (e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = false
       }
     },
+    fileDragStop (e) {
+      // The false-setting is done with delay because just using leave-events
+      // directly caused unwanted flickering, this is not perfect either but
+      // much less noticable.
+      clearTimeout(this.dropStopTimeout)
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+    },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = true
+      }
     },
     onEmojiInputInput (e) {
       this.$nextTick(() => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5629ceac..8e71d7b4 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,7 +6,14 @@
     <form
       autocomplete="off"
       @submit.prevent="postStatus(newStatus)"
+      @dragover.prevent.capture="fileDrag"
     >
+      <div
+        v-show="showDropIcon"
+        class="drop-indicator icon-upload"
+        @dragleave.capture="fileDragStop"
+        @drop.stop="fileDrop"
+      />
       <div class="form-group">
         <i18n
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@@ -97,8 +104,6 @@
             class="form-post-body"
             @keydown.meta.enter="postStatus(newStatus)"
             @keyup.ctrl.enter="postStatus(newStatus)"
-            @drop="fileDrop"
-            @dragover.prevent="fileDrag"
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
@@ -447,7 +452,8 @@
   form {
     display: flex;
     flex-direction: column;
-    padding: 0.6em;
+    margin: 0.6em;
+    position: relative;
   }
 
   .form-group {
@@ -505,5 +511,25 @@
     cursor: pointer;
     z-index: 4;
   }
+
+  .drop-indicator {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    opacity: 0.6;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border: 2px dashed $fallback--text;
+    border: 2px dashed var(--text, $fallback--text);
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2