pleroma-fe

commit: b9be4708e6c77f0085a5334710a04dcca7ef94e1
parent: ec5d8b9833034604299496a8ae87741c2efa5b7b
Author: lambadalambda <gitgud@rogerbraun.net>
Date:   Wed, 22 Feb 2017 16:31:59 -0500

Merge branch 'feature/drag_and_drop_for_media_upload' into 'develop'

Proper handling of drag/drop for most platforms

See merge request !28
Diffstat:
M
src/components/media_upload/media_upload.js
14
++++++++++++++
M
src/components/media_upload/media_upload.vue
2
+-
M
src/components/post_status_form/post_status_form.js
3
+++
M
src/components/post_status_form/post_status_form.vue
2
+-

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
@@ -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
@@ -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
@@ -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
@@ -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.meta.enter="postStatus(newStatus)" @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.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">