Last active
January 20, 2022 16:03
-
-
Save connor11528/89421dc8982c4404688a87a9b70d70bb to your computer and use it in GitHub Desktop.
Vue.js component for uploading a file to Amazon S3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="row text-center"> | |
<div class="col-md-12 mb-3"> | |
<label>Upload your resume</label> | |
<small>(.pdf or .docx file please)</small> | |
</div> | |
<div class="col-4 offset-4 text-center mb-3"> | |
<!-- Upload resume button. Trigger function on browser file upload --> | |
<input type="file" name="resume" @change="uploadResume" class="form-control-file"> | |
</div> | |
<!-- Render resume to screen if there is one --> | |
<div class="col-12"> | |
<iframe v-if="resume" :src="'https://s3-us-west-1.amazonaws.com/employbl-production/' + resume" | |
width="800px" height="600px" ></iframe> | |
<p v-if="!resume" class="text-danger">You have not uploaded a resume yet</p> | |
<p v-if="resume" class="text-success">Resume uploaded successfully</p> | |
</div> | |
</div> | |
</template> | |
<script> | |
import _ from 'lodash'; | |
export default { | |
props: { | |
'candidate': { | |
required: true, | |
default() { | |
return {}; | |
} | |
} | |
}, | |
data() { | |
const candidate = JSON.parse(this.candidate); | |
return { | |
resume: _.get(candidate, 'resume_file_path') || null, | |
candidateInfo: { | |
id: _.get(candidate, 'id') | |
} | |
}; | |
}, | |
methods: { | |
uploadResume(e) { | |
let reader = new FileReader(); | |
let formData = new FormData(); | |
let files = e.target.files || e.dataTransfer.files; | |
if (!files.length) { | |
return; | |
} | |
// Read contents of file that's stored on user's computers | |
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader | |
reader.onload = (e) => { | |
this.resume = e.target.result; | |
// Prepare form data to be sent via AJAX | |
// https://developer.mozilla.org/en-US/docs/Web/API/FormData | |
formData.append('resume', files[0]); | |
// Async request to upload resume from Laravel backend | |
axios.post(`/candidates/${this.candidateInfo.id}/resume`, formData) | |
.then(response => { | |
this.resume = response.data; | |
}); | |
}; | |
// Read contents of the file | |
// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL | |
reader.readAsDataURL(files[0]); | |
} | |
} | |
</script> |
@connor11528 The blog link is not available anymore. Is this tutorial moved perhaps? Thank you.
hmm whoops. @jorr-it here's a link that works: https://connorleech.medium.com/upload-file-to-s3-with-laravel-and-vue-js-41803e3d55b4
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Full tutorial for uploading files with Laravel and Vue.js: https://employbl.com/blog/laravel-file-upload-s3-bucket