How to bind click function of a file input to a "v-on" event?

Question

I trying to write a pretty uploader in Vue.js. I just hide <input type="file"> element and trigger click function while mdl-button is clicked.

Following code is my implementation.

template:

<form method="post" action="#" @submit.prevent="">
  <input id="fileInput" type="file">
  <mdl-button type="submit" @click="onClick" colored raised>
    <span>Upload</span>
  </mdl-button>
</form>

script:

export default {
  data () {
    return {
      filePath: null
    }
  },
  methods: {
    onClick: function (e) {
      document.getElementById('fileInput').click()
    }
  }
}

style:

#fileInput {
  display: none;
}

We can notice that document.getElementById is not Vue-style.

How about binding fileInput's click function to mdl-button's click event?

nils · Accepted Answer · 2016-08-08 07:53:43Z

1

You could simply turn your mdl-button into a <label> tag. That would make it semantically more valuable and accessible as well:

<form method="post" action="#" @submit.prevent="">
  <input id="fileInput" type="file">
  <mdl-button type="submit" colored raised>
    <label for="fileInput">Upload</label>
  </mdl-button>
</form>

I'm not sure what kind of markup your <mdl-button> component contains, but you might just want to replace whatever you use as the button element with the <label> element.

answered Aug 8, 2016 at 7:53

nils

27.4k6 gold badges73 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Squeezing9134 Over a year ago

Only works when you click on the label. Click on the mdl-button, file selection window doesn't pop up.

nils Over a year ago

Well yes, as I wrote, you would probably need to replace the base element of <mdl-button> with a label. Since I don't know what mdl-button looks like, I don't know if that is possible…

Collectives™ on Stack Overflow

How to bind click function of a file input to a "v-on" event?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related