q-input and type file

  • Hi
    I’m using

    <q-input v-model="thefile" @change="onFileChange" type="file"/>


      onFileChange(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) {

    in the component. However, neither ist “thefile” bound to the input value, nor is the onFileChange method triggered. Any pointers on what I am doing wrong?

  • It seems like QInput is not working with file inputs. Use a normal input instead.
    Also if you use a normal input, Vue will tell you

    File inputs are read only. Use a v-on:change listener instead.

    So you need to delete the v-model

  • I guess I should open an issue on github then…?

  • There is http://quasar-framework.org/components/uploader.html so I think this is kind of intended.
    And also what should be displayed in the input? It would be more like a button and does not integrate well with the q-input design.
    But maybe @rstoenescu can tell you if it is intended.

Log in to reply