upload file / submit form via Vuejs Statamic

template.html

<div class="my-4">
    <div class="row">
        <div class="col-12">
            <div class="my-4">
                {{ content }}
            </div>

            <div class="my-4 ">
                {{# Needed Crypt Lib. #}}
                <upload-file param="<?php echo Crypt::encrypt(['formset'=> 'uploadFile'])  ?>"
                    message="{{ thank-you-note }}">
                </upload-file>
            </div>
        </div>
    </div>

</div>

uploadFile.yaml

title: 'File Uploader'
store: false
fields:
  file:
    type: asset
    container: main
    folder: uploads
columns:
  - file

UploadFileComponent.vue

<template>
  <form action="#" @submit.prevent="submitForm">
    <div class="form-group">
      <label for="my-input">Text</label>
      <input
        id="my-input"
        class="form-control"
        type="file"
        ref="fileUpload"
        @change="handleFileUpload"
      />
    </div>
    <button type="submit">send</button>
  </form>
</template>


<script>
import axios from 'axios'
export default {
  name: 'UploadFile',
  props: {
    param: String,
    message: String,
  },

  data() {
    return {
      form: {
        file: null,
        _params: this.param,
      },
    }
  },
  methods: {
    handleFileUpload() {
      console.log('here file upload', this.$refs.fileUpload.files[0])
      this.form.file = this.$refs.fileUpload.files[0]
    },
    submitForm() {
      let formData = new FormData()
      formData.append('file', this.form.file)
      formData.append('_params', this.param)
      axios
        .post('/!/Form/create', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then(function() {
          console.log('SUCCESS!!')
        })
        .catch(function() {
          console.log('FAILURE!!')
        })
    },
  },
}
</script>