diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 3f2e3964..3f6fec5b 100644 --- a/src/components/media_upload/media_upload.js +++ b/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,15 @@ const mediaUpload = { self.$emit('upload-failed') self.uploading = false }) - }) + } }, - data () { - return { - uploading: false + props: [ + 'dropFiles' + ], + watch: { + 'dropFiles': function (fileInfos) { + if (!this.uploading) + this.uploadFile(fileInfos[0]) } } } diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 3365c569..e798b196 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/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 + } } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 1bad41c7..57572f65 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 @@