Make drag&drop work on more browsers/platforms, make the Upload button accept drops as well.
This commit is contained in:
parent
ca71722c1e
commit
6c385ae80a
4 changed files with 19 additions and 2 deletions
|
@ -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: [
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue