Make drag&drop work on more browsers/platforms, make the Upload button accept drops as well.

4 files changed, 19 insertions, 2 deletions

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 3f6fec5b..2f312ec9 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -33,6 +33,20 @@ const mediaUpload = {
           self.$emit('upload-failed')
           self.uploading = false
         })
+    },
+    fileDrop (e) {
+      if(e.dataTransfer.files.length > 0) {
+        e.preventDefault()  // allow dropping text like before
+        this.uploadFile(e.dataTransfer.files[0])
+      }
+    },
+    fileDrag (e) {
+      let types = e.dataTransfer.types
+      if(types.contains('Files')) {
+        e.dataTransfer.dropEffect = 'copy'
+      } else {
+        e.dataTransfer.dropEffect = 'none'
+      }
     }
   },
   props: [
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 3302db37..b839067b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media-upload">
+  <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
     <label class="btn btn-default">
       <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
       <i class="fa icon-upload" v-if="!uploading"></i>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e798b196..21d9759f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -148,6 +148,9 @@ const PostStatusForm = {
         e.preventDefault()  // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
+    },
+    fileDrag (e) {
+      e.dataTransfer.dropEffect = 'copy';
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 57572f65..fa471ec5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control"  @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">