javascript - How do I trigger a hidden Quasar q-file input from an external q-btn? - Stack Overflow

admin管理员组

文章数量:1410697

I have a q-file element for selecting an image file, and a q-img element for displaying the image.

I don't like the q-file input style, so I want to hide it and trigger the image upload from an external q-btn.

But I don't know how to trigger the q-file from an external q-btn.

const { ref } = Vue
const app = Vue.createApp({
  setup () {
  
    const image = ref(null);
    const imageUrl = ref('');
    
    const handleUpload = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    const handleUploadBtnClick = () => {
      // Somehow trigger the hidden q-file selection window
    }
    
    return {
      image, imageUrl, handleUpload
    }
  }
})

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

<link href=":100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div>
    <q-file
      style="display: none"
      v-model="image"
      @update:model-value="handleUpload()"
   ></q-file>
  </div>
  <div>
    <q-btn
      type="button"
      label="Upload Photo"
      @click="handleUploadBtnClick"
   ></q-btn>
  </div>
  <div>
    <q-img
      :src="imageUrl"
      spinner-color="white"
      style="height: 140px; max-width: 150px"
    ></q-img>
  </div>
</div>

<script src="@3/dist/vue.global.prod.js"></script>
<script src="/[email protected]/dist/quasar.umd.prod.js"></script>

I have a q-file element for selecting an image file, and a q-img element for displaying the image.

I don't like the q-file input style, so I want to hide it and trigger the image upload from an external q-btn.

But I don't know how to trigger the q-file from an external q-btn.

const { ref } = Vue
const app = Vue.createApp({
  setup () {
  
    const image = ref(null);
    const imageUrl = ref('');
    
    const handleUpload = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    const handleUploadBtnClick = () => {
      // Somehow trigger the hidden q-file selection window
    }
    
    return {
      image, imageUrl, handleUpload
    }
  }
})

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

<link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div>
    <q-file
      style="display: none"
      v-model="image"
      @update:model-value="handleUpload()"
   ></q-file>
  </div>
  <div>
    <q-btn
      type="button"
      label="Upload Photo"
      @click="handleUploadBtnClick"
   ></q-btn>
  </div>
  <div>
    <q-img
      :src="imageUrl"
      spinner-color="white"
      style="height: 140px; max-width: 150px"
    ></q-img>
  </div>
</div>

<script src="https://cdn.jsdelivr/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/quasar.umd.prod.js"></script>

• javascript
• vue.js
• vuejs3
• quasar-framework

Share Improve this question Follow edited Aug 29, 2022 at 16:58 Nikola Pavicevic 23.5k99 gold badges2929 silver badges5151 bronze badges asked Jan 28, 2022 at 0:50 TinyTigerTinyTiger 2,1711212 gold badges6666 silver badges131131 bronze badges 1

• Just wrap both the input and button in a label, then the button will automatically trigger the input. – Coz Commented Oct 12, 2022 at 10:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Hi @TinyTiger I was searching for the same with Script Setup and TypeScript and ended implementing this with Yusuf Kandemir help.

<template>
  <q-card>
    <q-avatar
      color="red"
      v-on:click="selectFile()"
    >
      <q-img
        v-bind:src="img"
        v-bind:fit="'contain'"
        v-bind:ratio="1"
      />
    </q-avatar>

    <q-file
      ref="fileRef"
      v-model="fileModel"
      style="display: none"
      v-bind:max-files="1"
      accept="image/*"
      v-on:update:model-value="fileOnUpdate"
    />
  </q-card>
</template>

<script setup lang="ts">
import { Ref, ref, onUnmounted } from 'vue'
import { QFile } from 'quasar'

const fileModel = ref<File>()
const fileRef = ref() as Ref<QFile>
const img = ref<string>()

function selectFile() {
  fileRef.value.pickFiles()
}

function fileOnUpdate(selectedFile: File) {
  if (img.value) {
    URL.revokeObjectURL(img.value)
  }
  img.value = URL.createObjectURL(selectedFile)
}

onUnmounted(() => {
  if (img.value) {
    URL.revokeObjectURL(img.value)
  }
})
</script>

You can create ref to q-file , then from q-btn call it with file.value.pickFiles()

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup () {
  
    const image = ref(null);
    const imageUrl = ref('');
    const file = ref(null)
    
    const handleUpload = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    const handleUploadBtnClick = () => {
      file.value.pickFiles()
    }
    
    return {
      image, imageUrl, handleUpload, handleUploadBtnClick, file
    }
  }
})

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

<link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <div>
    <q-file
      style="display: none"
      v-model="image"
      @update:model-value="handleUpload"
      ref="file"
   ></q-file>
  </div>
  <div>
    <q-btn
      type="button"
      label="Upload Photo"
      @click="handleUploadBtnClick"
   ></q-btn>
  </div>
  <div>
    <q-img
      :src="imageUrl"
      spinner-color="white"
      style="height: 140px; max-width: 150px"
    ></q-img>
  </div>
</div>

<script src="https://cdn.jsdelivr/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/quasar.umd.prod.js"></script>

本文标签： javascriptHow do I trigger a hidden Quasar qfile input from an external qbtnStack Overflow