I'm trying to get the input of a .csv File, after I choose it with my Html 5 input field. Therefor I use a onFileChange method and a FileReader().
Here is an example I used: http://codepen.io/Atinux/pen/qOvawK/ (except that I want to read the text input, and not an image file).

My Problem is, that I get an empty input on the first try, but on the second try it works. Why is that? Any ideas? (I'm a javascript beginner ;) )

html:

<form enctype=multipart/form-data>

    <input type=file @change=onFileChange>

</form>

js:

new Vue({

    el: '#app',

    data: {

        fileinput: ''

    },

    methods: {

        onFileChange(e) {

            var files = e.target.files || e.dataTransfer.files;

            if (!files.length)

                return;

            this.createInput(files[0]);

        },

        createInput(file) {

            var reader = new FileReader();

            var vm = this;

            reader.onload = (e) => {



            vm.fileinput = reader.result;

            }

            reader.readAsText(file);



            console.log(this.fileinput);

        }



    }

})