Vue-material: How to use md-file to get a text file?

[capttrousers]

I have a similar question as #379.

My use case has an md-file component, and then a "Submit" button that I want to use to send the file to the server in an AJAX call, usually with other props attached to the request body object.

How can I use the md-file component and an event method to get the file reference, but only read the file when I send it by clicking Submit? It seems this is getting out of the md-vue library, but any help would be greatly appreciated.

After reading more about the File / FileReader APIs, I think it should go like so: user clicks md-file, selects a file. The file name is displayed, and user enters stuff in other input fields, then clicks submit, and the method called when the button is clicked, does the FileReader.readAsText() stuff.

The documentation for the required v-model prop of the md-file could be improved, because I believe that just models the name of the file, which isn't the same as the html5 File api. Is that correct?

[fortil]

I believe that you should to do these

Template

<md-input-container>
  <label>Single</label>
  <md-file v-model="file.name" @selected="onFileUpload($event)" ></md-file>
</md-input-container>
<md-button class="md-raised" @click.native="submit()">Send</md-button>

JavaScript

:
data () {
 return {
  file: {name: ''},
 }
},
methods: {
  onFileUpload (evt) {
    this.file = evet[0]
  },
  submit () {
    functionSend({file: this.file, otherParams})
  }
...

[capttrousers]

thanks that helped

[ozankonur]

For new release change this

to this