Quasar: how to display an image when using q-file to pick the image?

Question

New to Quasar & Vue.

I am using q-file which allow pick file & drag to drop file. However, how do i display the image for preview?

Q-uploader seems work but how do i change the ui of it?

Link to component from Quasar: https://quasar.dev/vue-components/file-picker

Answer 1

In you template define a q-file and q-img element. Add a @change handler and updateFile function. The q-img will contain the picture you selected.

import { ref } from 'vue';
import { defineComponent } from 'vue';
<script lang="ts">
export default defineComponent({
  name: 'Component Name',
  components: {},

setup () {

    const image = ref(null);
    const image1Url = ref('')

    return {
      image,
      image1Url,

      updateFile() {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
  }
})
</script>

<div>
  <q-file
    v-model="image"
    label="Pick one file"
    filled
    style="max-width: 300px"
    @change="updateFile()"
  />
</div>
<div>
  <q-img
    :src="imageUrl"
    spinner-color="white"
    style="height: 140px; max-width: 150px"
  />
</div>

Create an @change hook on q-file:

In the script set the url from the file passed in from q-file: