6

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>
0

1 Answer 1

8

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/[email protected]/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/[email protected]/dist/quasar.umd.prod.js"></script>

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.