title: How can I get file object properties with a button click?
body: <p>I currently have a form with a file input that I am needing to get the value of on a button click. I am able to get the information using the @change prop that I currently have attached, but I am needing it on a button click on the form.</p>
  
  <pre><code>&lt;v-card&gt;
    &lt;v-card-title&gt;
      &lt;h2&gt;New File Submission&lt;/h2&gt;
    &lt;/v-card-title&gt;
    &lt;v-card-text&gt;
      &lt;v-form v-model='valid' ref='form' lazy-validation&gt;
        &lt;v-container&gt;
          &lt;!-- file input --&gt;
          &lt;v-row&gt;
            &lt;v-col cols='12' md='12'&gt;
              &lt;v-file-input
                v-model='files'
                ref='files'
                color='success'
                counter
                label='File input'
                accept='.csv'
                placeholder='Select your files'
                prepend-icon='mdi-paperclip'
                outlined
                :rules='fileRules'
                :show-size='1000'
                @change='fileSelected($event)'
              &gt;
                &lt;template v-slot:selection='{ index, text }'&gt;
                  &lt;v-chip v-if='index &lt; 2' color='success' dark label small&gt;{{ text }}&lt;/v-chip&gt;
  
                  &lt;span
                    v-else-if='index === 2'
                    class='overline grey--text text--darken-3 mx-2'
                  &gt;+{{ files.length - 2 }} File(s)&lt;/span&gt;
                &lt;/template&gt;
              &lt;/v-file-input&gt;
            &lt;/v-col&gt;
          &lt;/v-row&gt;
        &lt;/v-container&gt;
  
        &lt;v-btn :disabled='!valid' text class='success mx-0 mt-3' @click='submitFile'&gt;Submit File&lt;/v-btn&gt;
        &lt;v-btn text class='error mx-0 ml-3 mt-3' @click='reset'&gt;Reset Form&lt;/v-btn&gt;
      &lt;/v-form&gt;
    &lt;/v-card-text&gt;
  &lt;/v-card&gt;
  </code></pre>
  
  <p>I have put a reference on the file input and tried to access it that way through my submit function as shown in the code below.</p>
  
  <pre><code>data() {
      return {
        files: [],
        fileRules: [v =&gt; !v || v.size &lt; 2000000 || 'A file is required'],
      };
    }
  
  submitFile() {
        if (this.$refs.form.validate()) {
          const file = this.$refs.files.file
          console.log(file)
        }
      }
  </code></pre>
  
  <p>The console logs "undefined" with the code above. If I do <code>const file = this.$refs.files.file[0]</code> I get "Error in v-on handler: "TypeError: Cannot read property '0' of undefined""</p>
  
  <p>Any help would be appreciated, I have been trying to look everywhere for a solution but can't seem to find one. Thanks!</p>