From 97fbc1d402e611103787abaa0a63b1c7fef47bd0 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Mon, 4 Feb 2019 10:45:26 -0500
Subject: [PATCH] #312 - media uploader not working with same file in adjacent
 order

---
 src/components/media_upload/media_upload.js   | 25 +++++++++++--------
 src/components/media_upload/media_upload.vue  |  2 +-
 .../post_status_form/post_status_form.js      |  1 +
 .../post_status_form/post_status_form.vue     |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 42d900d3..1c874faa 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -3,19 +3,10 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
 const mediaUpload = {
-  mounted () {
-    const input = this.$el.querySelector('input')
-
-    input.addEventListener('change', ({target}) => {
-      for (var i = 0; i < target.files.length; i++) {
-        let file = target.files[i]
-        this.uploadFile(file)
-      }
-    })
-  },
   data () {
     return {
-      uploading: false
+      uploading: false,
+      uploadReady: true
     }
   },
   methods: {
@@ -56,6 +47,18 @@ const mediaUpload = {
       } else {
         e.dataTransfer.dropEffect = 'none'
       }
+    },
+    clearFile () {
+      this.uploadReady = false
+      this.$nextTick(() => {
+        this.uploadReady = true
+      })
+    },
+    change ({target}) {
+      for (var i = 0; i < target.files.length; i++) {
+        let file = target.files[i]
+        this.uploadFile(file)
+      }
     }
   },
   props: [
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 768d3565..fcdc3471 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -3,7 +3,7 @@
     <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
       <i class="icon-spin4 animate-spin" v-if="uploading"></i>
       <i class="icon-upload" v-if="!uploading"></i>
-      <input type="file" style="position: fixed; top: -100em" multiple="true"></input>
+      <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
     </label>
   </div>
 </template>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 88bc736f..5e8c2252 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -250,6 +250,7 @@ const PostStatusForm = {
             visibility: newStatus.visibility,
             contentType: newStatus.contentType
           }
+          this.$refs.mediaUpload.clearFile()
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')
           el.style.height = 'auto'
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 398f1871..e09ad37f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -64,7 +64,7 @@
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
+        <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
 
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
         <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>