How do I use Quasar q-file picker to display an image?

Question

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>

score 7 · Accepted Answer · answered Jan 27 '22 at 11:45

Try @update:model-value instead of @change:

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    const image = ref(null);
    const imageUrl = ref('');
    const handleUpload = () => {
      console.log('handleUpload is triggered');
      if (image.value) {
      
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    return {
      image, imageUrl, handleUpload
    }
  }
})

app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div>
    <q-file
      v-model="image"
      label="Pick one file"
      filled
      style="max-width: 300px"
      @update:model-value="handleUpload()"
   ></q-file>
  </div>
  <div>
    <q-img
      :src="imageUrl"
      spinner-color="white"
      style="height: 140px; max-width: 150px"
    ></q-img>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.umd.prod.js"></script>

Thanks, that worked great. I also have a follow up question here if you're interested: https://stackoverflow.com/questions/70887661/how-do-i-trigger-a-hidden-quasar-q-file-input-from-an-external-q-btn — TinyTiger, Jan 28 '22 at 00:51

How do I use Quasar q-file picker to display an image?

1 Answers1