diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 746970aa..985916cf 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 d55525bb..42ebcd48 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 eceef4a2..d345ec13 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.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">