title: Vuetify File Uploads
body: <p>I'm trying to upload a file in Vue.js using vuetify and then save the uploaded file in my data object.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="file-upload" type="file" @change="onFileChange"&gt;
  </code></pre>
  
  <p>In my methods I call:</p>
  
  <pre><code>onFileChange(e) {
  
    var files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
      return;
    }   
    this.editedPerson.id_file = e.target.files[0].name;
  },
  </code></pre>
  
  <p>This works 100%.</p>
  
  <p>I do, however, want to use the Vuetify component:</p>
  
  <pre><code>&lt;v-btn color="blue-grey" class="white--text" @click.native="openFileDialog"&gt;Upload&lt;v-icon right dark&gt;cloud_upload&lt;/v-icon&gt;&lt;/v-btn&gt;
  </code></pre>
  
  <p>I hide the original file input tag but on this v-btn component I call the following method:</p>
  
  <pre><code>openFileDialog() {
    document.getElementById('file-upload').click();
  },
  </code></pre>
  
  <p>So when I click on the v-btn component it simulates a click on the hidden file input tag and I can choose a file. </p>
  
  <p>On change of the input tag I can still console.log the uploaded file but </p>
  
  <pre><code>this.editedPerson.id_file = e.target.files[0].name;
  </code></pre>
  
  <p>no longer works.</p>
  
  <p>Is there any reason why this happens?</p>