Skip to content

Instantly share code, notes, and snippets.

@stevebauman
Created July 11, 2017 16:08
Show Gist options
  • Save stevebauman/aa770404124c0e89f5b10eed36aefd57 to your computer and use it in GitHub Desktop.
Save stevebauman/aa770404124c0e89f5b10eed36aefd57 to your computer and use it in GitHub Desktop.
Markdown Text Area Upload VueJS 2 Component
<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';
e.target.value = event.target.value + placeholder;
let form = new FormData();
form.append('file', file);
axios.post(this.url, form).then(({data}) => {
event.target.value = e.target.value.replace(placeholder, `![${data.name}](${data.location})\n`);
}).catch(() => {
event.target.value = e.target.value.replace(placeholder, '![Failed to upload ' + file.name + ']\n');
});
},
update(event) {
this.$emit('input', event.target.value);
},
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment