47 lines
975 B
Vue
47 lines
975 B
Vue
<script setup lang="ts">
|
|
import { QFile } from 'quasar';
|
|
import { ref } from 'vue';
|
|
import { MainButton } from '../button';
|
|
|
|
type Value = File[] | File;
|
|
|
|
defineProps<{
|
|
label?: string;
|
|
readonly?: boolean;
|
|
accept?: string;
|
|
multiple?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'file', v: Value): void;
|
|
}>();
|
|
|
|
const file = ref<Value | undefined>();
|
|
|
|
const element = ref<InstanceType<typeof QFile>>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap surface-2"
|
|
>
|
|
<q-img src="/images/upload.png" width="150px" />
|
|
<MainButton
|
|
color="var(--blue-6-hsl)"
|
|
icon="mdi-import"
|
|
solid
|
|
pill
|
|
@click.stop="element?.pickFiles()"
|
|
>
|
|
{{ label }}
|
|
</MainButton>
|
|
<q-file
|
|
:multiple="!!multiple"
|
|
:accept
|
|
ref="element"
|
|
v-show="false"
|
|
v-model="file"
|
|
@update:model-value="(v: Value) => $emit('file', v)"
|
|
/>
|
|
</div>
|
|
</template>
|