video upload to S3 with vue js

video-upload.js

<template>
  <div id="video-uploader" class="row-multiple --last">
    <div v-show="ShowProgressBar">
      <progress max="100" :value="progressPercentage"></progress>
      <span>{{ progressPercentage }} % (veuillez patienter...)</span>
    </div>
    <input class="button secondary hollow --alt-margin" type='file' v-on:change='onFileChange'></input>
    <input type='hidden' name="tutorial[video]" :value="videoData"></input>
  </div>
</template>

<script>
import * as axios from 'axios'
export default {
  props: {
    cachedVideoData: String
  },
  data: () => {
    return {
      videoData: "",
      progressPercentage: 0,
      ShowProgressBar: false
    }
  },
  methods: {
    uploadAttachment (file) {
      let data = new FormData();
      axios.defaults.baseURL = ""

      // GET PRESIGN FIELDS
      axios.get("/presign",  {}).then(response => {
        const endpoint = response.data.url
        for (const [key, value] of Object.entries(response.data.fields)) {
          data.append(key, value);
        }
        data.append('file', file);
        data.append('content-type', file.type);

        // SEND TO S3
        axios({
          method: 'POST',
          url: endpoint,
          data: data,
          headers: {
            'X-CSRF-Token': document.querySelector("meta[name=csrf-token]").content,
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: progressEvent => {
            document.getElementById("submit-btn").setAttribute("disabled", "disabled")
            this.ShowProgressBar = true
            this.progressPercentage = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
          },
        }).then(response => {
          this.ShowProgressBar = false
          document.getElementById("submit-btn").removeAttribute("disabled")

          const file = {
            id:       data.get('key').match(/cache\/(.+)/)[1], // we have to remove the prefix part
            storage:  'cache',
            metadata: {
              size:      data.get('file').size,
              filename:  data.get('file').name.match(/[^\/\\]+$/)[0], // IE return full path
              mime_type: data.get('file').type
            }
          }
          this.videoData = JSON.stringify(file);
        })
      })
    },

    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.uploadAttachment(files[0])
    },

  },
  mounted: () => {
    this.videoData = this.cachedVideoData
  }
}
</script>