<commit_before>module.exports = {
    name: 'v-image',

    template: '<div>\
        <div v-if="!internal_image">\
            <img src="https://placehold.it/180x180" v-bind:alt="alt" v-bind:style="imgStyle" />\
            <br>\
            <label v-bind:for="name" v-bind:class="buttonStyle">Select Image</label>\
            <input type="file" v-bind:name="name" v-bind:id="name" style="display:none;" accept="image/*" v-on:change="onFileChange">\
        </div>\
        <div v-else>\
            <img v-bind:src="internal_image" v-bind:alt="alt" v-bind:style="imgStyle" />\
            <br>\
            <button v-bind:class="buttonStyle" v-on:click="removeImage">Remove image</button>\
        </div>\
    </div>',

    props: {
        image: {
            type: String,
            default: null,
            required: false,
        },

        name: {
            type: String,
            default: 'name',
            required: true,
        },

        alt: {
            type: String,
            default: 'Very Interesting Image',
            required: false,
        },

        imgStyle: {
            type: Object,
            required: false
        },

        buttonStyle: {
            type: Object,
            required: false
        }
    },
    data: function() {
        return {
            internal_image: null,
        }
    },
    methods: {
        onFileChange: function(e) {
            const files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },

        createImage: function(file) {
            const image = new Image();
            const reader = new FileReader();
            const vm = this;

            reader.onload = function(e) {
                vm.internal_image = e.target.result;
                vm.$emit('loadImage', e.target.result);
            };
            reader.readAsDataURL(file);
        },

        removeImage: function() {
            this.image = null;
            this.internal_image = null;
        }

    }
};<commit_msg>Changed the binding for button from class to style.<commit_after>module.exports = {
    name: 'v-image',

    template: '<div>\
        <div v-if="!internal_image">\
            <img src="https://placehold.it/180x180" v-bind:alt="alt" v-bind:style="imgStyle" />\
            <br>\
            <label v-bind:for="name" v-bind:style="buttonStyle">Select Image</label>\
            <input type="file" v-bind:name="name" v-bind:id="name" style="display:none;" accept="image/*" v-on:change="onFileChange">\
        </div>\
        <div v-else>\
            <img v-bind:src="internal_image" v-bind:alt="alt" v-bind:style="imgStyle" />\
            <br>\
            <button v-bind:style="buttonStyle" v-on:click="removeImage">Remove image</button>\
        </div>\
    </div>',

    props: {
        image: {
            type: String,
            default: null,
            required: false,
        },

        name: {
            type: String,
            default: 'name',
            required: true,
        },

        alt: {
            type: String,
            default: 'Very Interesting Image',
            required: false,
        },

        imgStyle: {
            type: Object,
            required: false
        },

        buttonStyle: {
            type: Object,
            required: false
        }
    },
    data: function() {
        return {
            internal_image: null,
        }
    },
    methods: {
        onFileChange: function(e) {
            const files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },

        createImage: function(file) {
            const image = new Image();
            const reader = new FileReader();
            const vm = this;

            reader.onload = function(e) {
                vm.internal_image = e.target.result;
                vm.$emit('loadImage', e.target.result);
            };
            reader.readAsDataURL(file);
        },

        removeImage: function() {
            this.image = null;
            this.internal_image = null;
        }

    }
};
{'fraction_non_alphanumeric': 0.1402467963929758, 'fraction_numerical': 0.0033222591362126247, 'mean_word_length': 1.430795847750865, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2167505', 'n_tokens_mistral': 1215, 'n_tokens_neox': 1182, 'n_words': 234}