Quasar toggle q-file when another button is clicked

Question

In Quasar framework how can I toggle the file selector q-file when I click certain button.

My effort so far:

when this buton is click it should toggle the q-file

<button @click="toggleFileSelector">toggle file selector</button>

so I have this File-selector and I want this to toggle when I click on a button

<q-file outlined class="field" ref="myFileSelector" :label="label" v-model="myFile">
  <template v-slot:append>
    <div class="attachment notosanskr-medium">File</div>
  </template>
</q-file>

the method to toggle:

  methods: {
    toggleFileSelector() {
      this.$refs.myFileSelector.toggle();
    },
  },

but I get an error:

"TypeError: this.$refs.myFileSelector.toggle is not a function"

Answer 1

Yes, you can toggle input by ref. You need to call pickFiles function.

Example - this.$refs.file.pickFiles();

<q-file ref="file" clearable filled color="purple-12" v-model="model" label="Label"></q-file>

      
<q-btn @click="testclick" color="primary" label="Click"></q-btn>


methods:{
    testclick(){
      this.$refs.file.pickFiles();
    }
  }

codepen- https://codepen.io/Pratik__007/pen/dyXpXgr