I'm trying to use the Quasar q-file picker to display a profile picture.
I am using code from this answer and I have adpated it slightly to my needs.
But my handleUpload
function is never triggered.
What's going on? How do I fix this?
<template>
<div>
<q-file
v-model="image"
label="Pick one file"
filled
style="max-width: 300px"
@change="handleUpload"
/>
</div>
<div>
<q-img
:src="imageUrl"
spinner-color="white"
style="height: 140px; max-width: 150px"
/>
</div>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue';
const image: Ref<File | null> = ref(null);
const imageUrl = ref('');
const handleUpload = () => {
console.log('handleUpload is triggered');
if (image.value) {
imageUrl.value = URL.createObjectURL(image.value);
}
};
</script>