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
This commit is contained in:
lambadalambda 2017-02-21 15:51:44 -05:00
commit 3b2e79f6f7
3 changed files with 30 additions and 8 deletions

View file

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

View file

@ -84,6 +84,7 @@ const PostStatusForm = {
} }
return { return {
dropFiles: [],
submitDisabled: false, submitDisabled: false,
newStatus: { newStatus: {
status: statusText, status: statusText,
@ -141,6 +142,12 @@ const PostStatusForm = {
}, },
type (fileInfo) { type (fileInfo) {
return fileTypeService.fileType(fileInfo.mimetype) 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
}
} }
} }
} }

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)"></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>
<div class="attachments"> <div class="attachments">
<div class="attachment" v-for="file in newStatus.files"> <div class="attachment" v-for="file in newStatus.files">
@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div class='form-bottom'> <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> <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
</div> </div>
</form> </form>