aws-upload.vue

<template>
  <div class='vue-aws-uploader' :class='wrapperCss'> 
    <label for="vue-aws-upload" class='fa fa-upload'> Click here to upload your <b>{{ folder }}</b> files </label>
    <input type="file" name="file" id="vue-aws-upload" class="vue-aws-upload"  @change='init($event)' />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'VueAWSUpload',

  props: {

    /**
     * @url 
     * 
     * 
     */
    text: {
      type: String, 
      required: false, 
      default: ''
    },
    
    url: {
      type     : String, 
      required : true,
      default  : ''
    },

    wrapperCss: {
      type: String, 
      required: false,
      input: '',
    },

    folder: {
      type: String, 
      require: false, 
      default: 'Uncategorized'
    }

  },

  data () {
    return {
     /**
      * Signed request for aws upload
      */
      signedRequest: null,

      /**
       * response
       */
      response: null, 

      /**
       * file info to be uploaded
       */
      file: null,
    }
  },
  methods: {
    /**
     * Initialize upload
     */
    init (event) {
      this.file = event.target.files[0]; 

      if(null === this.file) {
        console.error('No files found')
        return 
      }

      // try {
      //   let getSigned = await 
      // }

      let getSigned = this.getSignedRequest()
    },

    async upload(signedRequest, file) {
      try {

        let response = await axios.put(signedRequest, file);
        this.$emit('uploaded', response)

        } catch(error) {
          console.log('response', error)
      }
    },

    getSignedRequest() {
      let {url, file} = this; 
      const awsUrl = url + '?file-name=' + file.name + '&file-type=' + file.type + '&folder=' + this.folder; 

      return axios.get(awsUrl, {withCredentials: true}).then(response => {
        this.$emit('signed', response)
        this.upload(response.data.signedRequest, file)
      }).catch(error => {
        console.log('error ', error)
      })

    },

    getFileMimeType (name) {
      if (name) {
        return name.substr(name.indexOf('.'))
      }

      return false
    },

  }
}
</script>

<style scoped>
.vue-aws-upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	z-index: -1;
}

.vue-aws-upload + label {
  color:#000
}
</style>