<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>