add spinner to upload photo button

This commit is contained in:
MarcZierle 2022-01-21 21:55:32 +01:00
parent 72a3859be8
commit 80f1ff56ee

View File

@ -72,7 +72,7 @@
<template #footer> <template #footer>
<n-space justify-content="end"> <n-space justify-content="end">
<n-button size="large" @click="showPhotoTakenModal = false; isPhotoTaken = false">Back</n-button> <n-button size="large" @click="showPhotoTakenModal = false; isPhotoTaken = false">Back</n-button>
<n-button type="primary" size="large" @click="uploadPhoto">Upload</n-button> <n-button type="primary" size="large" @click="uploadPhoto" :loading="isUploading">Upload</n-button>
</n-space> </n-space>
</template> </template>
</n-modal> </n-modal>
@ -125,6 +125,7 @@ export default {
}, },
showPhotoTakenModal: false, showPhotoTakenModal: false,
isUploading: false,
} }
}, },
beforeMount() { beforeMount() {
@ -229,6 +230,7 @@ export default {
this.showPhotoTakenModal = true this.showPhotoTakenModal = true
}, },
uploadPhoto() { uploadPhoto() {
this.isUploading = true
const dataURLtoFile = (dataurl, filename) => { const dataURLtoFile = (dataurl, filename) => {
const arr = dataurl.split(',') const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1] const mime = arr[0].match(/:(.*?);/)[1]
@ -248,6 +250,7 @@ export default {
this.message.success('Done!') this.message.success('Done!')
this.isPhotoTaken = false this.isPhotoTaken = false
this.showPhotoTakenModal = false this.showPhotoTakenModal = false
this.isUploading = false
}).catch((error) => { }).catch((error) => {
this.message.error('There was an error uploading the photo: ' + error) this.message.error('There was an error uploading the photo: ' + error)
}) })