<div id="app">
    <textarea rows="10" v-model="text"></textarea>
    <file-reader @load="text = $event"></file-reader>
</div>


<template id="fileReader">
    <label class="text-reader">
        Read File
        <input type="file" @change="loadTextFromFile" />
    </label>
</template>

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto:700');

body {
  margin: 0;
  padding: 0;
  background-color: #777;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
}

#app {
  width: 40vw;
  max-width: 100%;
  position: relative;
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 20px;
  font-size: 0.85em;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  background-color: #f4f7fc;
  position: relative;
  transition: all ease-in 0.25s;
}
.text-reader {
    position: relative;
    overflow: hidden;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    color: #333;
    float: right;

    input {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
    }
  
  
}

textarea {
    width: 100%;
    min-height: 80px;
    margin-bottom: 20px;
    position: relative;
    text-align: left;
    border-radius: 3px;
    background: #fff;
    letter-spacing: 2px;
    transition: all ease-in 0.3s;
    border: 1px solid #bdcce6;
    display: block;
    resize: vertical;
}

Vue.component('file-reader',{
    template: '#fileReader',
    methods: {
        loadTextFromFile: function (e) {
            const file = e.target.files[0]
            const reader = new FileReader()

            reader.onload = e => this.$emit('load', e.target.result)
            reader.readAsText(file)
        }
    }
})

let app = new Vue({
    el: '#app',
    data () {
        return {
            text: ''
        }
    }
})