59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<script setup>
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
import {reactive} from "vue";
|
|
|
|
const props = defineProps({
|
|
flight: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
isRequestPending: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
}
|
|
)
|
|
const formData = reactive({
|
|
photos: []
|
|
});
|
|
|
|
const inlinePreview = (photo) => {
|
|
return URL.createObjectURL(photo);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData" :is-request-pending="isRequestPending" :save-button='{
|
|
label: "Nahrát",
|
|
icon: "upload",
|
|
align: "left"
|
|
}'>
|
|
|
|
<div class="flex flex-center">
|
|
<div v-for="photo in formData.photos" :key="photo.name" style="width: 70px" class="q-ma-sm">
|
|
<q-img
|
|
:src="inlinePreview(photo)"
|
|
fit="fill"
|
|
>
|
|
<div class="absolute-top absolute-bottom text-center" v-if="isRequestPending">
|
|
<q-spinner/>
|
|
</div>
|
|
</q-img>
|
|
</div>
|
|
</div>
|
|
<q-file
|
|
class="q-my-lg"
|
|
outlined
|
|
standout
|
|
multiple
|
|
accept=".jpg, .jpeg"
|
|
v-model="formData.photos"
|
|
label="Vybert fotky k nahrání"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="upload"/>
|
|
</template>
|
|
</q-file>
|
|
</FormWrapper>
|
|
</template>
|