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

This commit is contained in:
shpuld 2017-02-22 14:53:05 +02:00
parent ca71722c1e
commit 6c385ae80a
4 changed files with 19 additions and 2 deletions

View File

@ -33,6 +33,20 @@ const mediaUpload = {
self.$emit('upload-failed') self.$emit('upload-failed')
self.uploading = false 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: [ props: [

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="media-upload"> <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
<label class="btn btn-default"> <label class="btn btn-default">
<i class="fa icon-spin4 animate-spin" v-if="uploading"></i> <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
<i class="fa icon-upload" v-if="!uploading"></i> <i class="fa icon-upload" v-if="!uploading"></i>

View File

@ -148,6 +148,9 @@ const PostStatusForm = {
e.preventDefault() // allow dropping text like before e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files this.dropFiles = e.dataTransfer.files
} }
},
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy';
} }
} }
} }

View File

@ -2,7 +2,7 @@
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group" > <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>
<div class="attachments"> <div class="attachments">
<div class="attachment" v-for="file in newStatus.files"> <div class="attachment" v-for="file in newStatus.files">