No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    4
    1365
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      Gorgc last edited by Gorgc

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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

        Scott

        1 Reply Last reply Reply Quote 0
        • G
          Gorgc last edited by

          I see, alrightt thanks

          Lurrik 1 Reply Last reply Reply Quote 0
          • Lurrik
            Lurrik @Gorgc last edited by 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>
            
            1 Reply Last reply Reply Quote 1
            • First post
              Last post