Merge branch 'feature/drag_and_drop_for_media_upload' into 'develop'

Dragging and dropping files into text box attempts to upload them.

See merge request !26

src/components/media_upload/media_upload.js

@@ -3,12 +3,22 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
 
 const mediaUpload = {
   mounted () {
-    const store = this.$store
     const input = this.$el.querySelector('input')
-    const self = this
 
     input.addEventListener('change', ({target}) => {
       const file = target.files[0]
+      this.uploadFile(file)
+    })
+  },
+  data () {
+    return {
+      uploading: false
+    }
+  },
+  methods: {
+    uploadFile (file) {
+      const self = this
+      const store = this.$store
       const formData = new FormData()
       formData.append('media', file)
 
@@ -23,11 +33,16 @@ const mediaUpload = {
           self.$emit('upload-failed')
           self.uploading = false
         })
-    })
+    }
   },
-  data () {
+  props: [
-    return {
+    'dropFiles'
-      uploading: false
+  ],
+  watch: {
+    'dropFiles': function (fileInfos) {
+      if (!this.uploading) {
+        this.uploadFile(fileInfos[0])
+      }
     }
   }
 }

src/components/post_status_form/post_status_form.js

@@ -84,6 +84,7 @@ const PostStatusForm = {
     }
 
     return {
+      dropFiles: [],
       submitDisabled: false,
       newStatus: {
         status: statusText,
@@ -141,6 +142,12 @@ const PostStatusForm = {
     },
     type (fileInfo) {
       return fileTypeService.fileType(fileInfo.mimetype)
+    },
+    fileDrop (e) {
+      if (e.dataTransfer.files.length > 0) {
+        e.preventDefault()  // allow dropping text like before
+        this.dropFiles = e.dataTransfer.files
+      }
     }
   }
 }

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)"></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"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit"></media-upload>
+        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
         <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
       </div>
     </form>