<template>
<div class="row">
<q-btn dense icon="image" @click="$refs.fileUpload.click()" />
<input id="file" ref="fileUpload" style="display: none" class="button" type="file"
:accept="accept" @change="changed">
<div id="drop_zone" @drop="dropHandler" @dragover="dragOverHandler">
{{ $t('Click button or drop file here') }}
</div>
</div>
</template>
<script>
/**
* Vue component for file uploader. Not used in the current version of the application.
* @component
* @name FileUploader
* @example
* <FileUploader />
*/
export default {
props: {
accept: {
type: String,
default: "*.*"
},
},
methods: {
dropHandler(event) {
event.preventDefault();
this.$emit('uploaded', event.dataTransfer.files);
},
dragOverHandler(ev) {
ev.preventDefault();
},
changed() {
this.$emit('uploaded', this.$refs.fileUpload.files);
},
}
};
</script>