Markdown Text Area Upload VueJS 2 Component

TextareaUpload.vue

<template>
    <textarea
            :id="id"
            :name="name"
            :value="value"
            :placeholder="placeholder"
            :rows="rows"
            :cols="cols"
            class="form-control"
            @dragover.prevent
            @dragenter.prevent
            @drop.prevent="drop"
            @input="update"
    ></textarea>
</template>

<script>
    export default {
        props: {
            id: String,
            name: String,
            value: String,
            placeholder: String,
            rows: {
                type: [Number, String],
                default: 10,
            },
            cols: {
                type: [Number, String],
                default: 30,
            },
            url: String,
        },

        methods: {
            drop(event) {
                let file = event.dataTransfer.files[0];

                let placeholder = '![Uploading ' + file.name + ']\n';

                event.target.value = event.target.value + placeholder;

                let form = new FormData();

                form.append('file', file);

                axios.post(this.url, form).then(({data}) => {
                    event.target.value = event.target.value.replace(placeholder, `![${data.name}](${data.location})\n`);
                }).catch(() => {
                    event.target.value = event.target.value.replace(placeholder, '![Failed to upload ' + file.name + ']\n');
                });

            },

            update(event) {
                this.$emit('input', event.target.value);
            },
        }
    }
</script>