title: How to upload file in vue.js version 3
body: <p>I wanted to upload file using vue.js version 3.</p>
  <p>I can able to import <code>ref</code> but not sure how to use it for fetching file data?</p>
  <p><strong>FileUploadTest.vue</strong></p>
  <pre><code>&lt;template&gt;
  &lt;h1&gt;File Upload&lt;/h1&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;div&gt;
        &lt;label&gt;File
          &lt;input type=&quot;file&quot; id=&quot;file&quot; ref=&quot;file&quot; v-on:change=&quot;onChangeFileUpload()&quot;/&gt;
        &lt;/label&gt;
          &lt;button v-on:click=&quot;submitForm()&quot;&gt;Upload&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script src=&quot;./FileUploadTest.ts&quot; lang=&quot;ts&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>FileUploadTest.ts</strong></p>
  <pre><code>import { Options, Vue } from &quot;vue-class-component&quot;;
  import { ref } from 'vue';
  import axios from &quot;../../axios/index&quot;;
  
  @Options({})
  export default class FileUploadTest extends Vue {
  
      protected file: any;
  
      submitForm() {
          const formData = new FormData();
          formData.append('bytes', this.file);
  
          axios.post('https://localhost:44313/api/app/file/save',
              formData,
              {
                  headers: {
                      'Content-Type': 'multipart/form-data'
                  }
              }
          ).then(function (data) {
              console.log(data.data);
          })
          .catch(function () {
              console.log('FAILURE!!');
          });
      }
  
      onChangeFileUpload() {
          debugger;
          this.file = ref([&quot;file&quot;]).value; 
      }
  };
  </code></pre>
  <p>The actual file content is not storing in the this.file variable</p>
  <pre><code>this.file = ref([&quot;file&quot;]).value; 
  </code></pre>