Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment