<template>
    <div class='add_photo'>
        <img :src="photoURL" class="photo"/>
        <input
                type="file"
                name="file"
                accept="image/*"
                class="photo"
                @change="onRead"/>
    </div>
</template>

<script>
    export default {
        name: "addPhoto",
        data() {
            return {
                photoURL: require('../assets/camera.png')
            }
        },
        model: {
            prop: 'chosen',
            event: 'onRead'
        },
        props: {
            chosen: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onRead: function (e) {
                let f = e.target.files[0];
                console.log(f);

                let reads = new FileReader();
                reads.readAsDataURL(f);
                let that = this;
                reads.onload = function (e) {
                    console.log(this.result);
                    that.photoURL = this.result;
                };
                this.chosen = true;
                this.$emit('onRead', f);
                // console.log(this.chosen);
            }
        }
    }
</script>

<style scoped>
    .photo {
        width: 20%;
        height: 70px;
        position: absolute;
    }

    [name='file'] {
        opacity: 0;
    }
</style>