<template>
    <div class="container">
        <h1 @drop.prevent="onDrop($event)"
            @dragover.prevent="dragOn"
            @dragenter.prevent="dragOn"
            @dragleave.prevent="dragOff">
            <img :src="currentImage" v-if="hasImage" />
            <span v-else-if="dragOver">DROP HERE !</span>
            <span v-else="dragOver">WAITING ...</span>
            <input type="file" id="fileUpload"/>
        </h1>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                dragOver: false,
                hasImage: false,
                fileUpload: {},
                fileUploadEvent: {},
                currentImage: ''
            }
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods: {
            onDrop(e) {
                this.dragOff()
                this.hasImage = true
                this.fileUpload = e.dataTransfer.files
                this.fileUploadEvent = e
                $('#fileUpload')[0].files = e.dataTransfer.files
                this.readImage(e.dataTransfer.files[0])
            },
            dragOn() {
                this.dragOver = true
            },
            dragOff() {
                this.dragOver = false
            },
            onDragOver(e) {
                //console.log(e)
            },
            readImage(file) {
                var reader = new FileReader()
                var vm = this

                reader.onload = function(e) {
                    vm.currentImage = e.target.result
                }

                reader.readAsDataURL(file)
            }
        }
    }
</script>