How to preview image when using q-file picker? [resolved]

[Gorgc]

i want q-file picker to preview image picked just like q-uploader, how can i achieve that?

[s.molinari]

You can’t. There isn’t a facility for that with QFilePicker.

Scott

[Gorgc]

I see, alrightt thanks

[Lurrik]

Hi @Gorgc

Without q-file you can do something like that :

TEMPLATE

    <q-card style="width:500px">
          <q-card-section class="text-subitle2">
            <div :style="{ 'background-image': `url(${imageData})` }" @click="choosepicture">
              <span
                v-if="!imageData"
                class="placeholder"
                style="cursor: pointer"
              >Choose a picture</span>
              <input hidden class="file-input" ref="fileInput" type="file" @input="onSelectFile" />
            </div>
            <q-img :src="imageData" style="cursor: pointer" @click="choosepicture" />
          </q-card-section>
      </q-card>

SCRIPT

<script>
export default {
  name: '',
  data() {
    return {
      imageData: null,
    }
  },
  methods: {
    onSelectFile() {
      const input = this.$refs.fileInput;
      const files = input.files;
      this.FileImage = files[0];
      if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
        };
        reader.readAsDataURL(files[0]);
        this.$emit("input", files[0]);
      }
    },
    choosepicture() {
      this.$refs.fileInput.click();
    },
  },
}
</script>