From a73916dd7f07954ee0305df822baa8068ae1df14 Mon Sep 17 00:00:00 2001 From: Roger Braun <roger@rogerbraun.net> Date: Sun, 6 Nov 2016 19:28:37 +0100 Subject: [PATCH] Add MediaUpload component. --- src/components/media_upload/media_upload.js | 22 ++++++++++++++++++++ src/components/media_upload/media_upload.vue | 17 +++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/components/media_upload/media_upload.js create mode 100644 src/components/media_upload/media_upload.vue diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js new file mode 100644 index 00000000..c24c71e9 --- /dev/null +++ b/src/components/media_upload/media_upload.js @@ -0,0 +1,22 @@ +/* eslint-env browser */ +import statusPosterService from '../../services/status_poster/status_poster.service.js' + +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]; + const formData = new FormData(); + formData.append('media', file); + statusPosterService.uploadMedia({ store, formData }) + .then((fileData) => { + self.$emit('uploaded', fileData) + }) + }) + } +} + +export default mediaUpload diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue new file mode 100644 index 00000000..a62d8316 --- /dev/null +++ b/src/components/media_upload/media_upload.vue @@ -0,0 +1,17 @@ +<template> + <div class="media-upload"> + <label class="btn btn-default"> + <i class="fa icon-upload"></i> + <input type=file style="position: fixed; top: -100em"></input> + </label> + </div> +</template> + +<script src="./media_upload.js" ></script> + +<style> + .media-upload { + font-size: 26px; + flex: 1; + } +</style>