Skip to content

Instantly share code, notes, and snippets.

@isuke01
Forked from raisiqueira/fileUpload.vue
Created August 23, 2018 11:37
Show Gist options
  • Save isuke01/82dff2c36e2018f8c2522eb167222b82 to your computer and use it in GitHub Desktop.
Save isuke01/82dff2c36e2018f8c2522eb167222b82 to your computer and use it in GitHub Desktop.
Simple file upload with Vue and Axios
<style>
input[type="file"]{
position: absolute;
top: -500px;
}
div.file-listing{
width: 200px;
}
span.remove-file{
color: red;
cursor: pointer;
float: right;
}
</style>
<template>
<div class="container">
<div class="large-12 medium-12 small-12 cell">
<label>Files
<input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()"/>
</label>
</div>
<div class="large-12 medium-12 small-12 cell">
<div v-for="(file, key) in files" class="file-listing">{{ file.name }} <span class="remove-file" v-on:click="removeFile( key )">Remove</span></div>
</div>
<br>
<div class="large-12 medium-12 small-12 cell">
<button v-on:click="addFiles()">Add Files</button>
</div>
<br>
<div class="large-12 medium-12 small-12 cell">
<button v-on:click="submitFiles()">Submit</button>
</div>
</div>
</template>
<script>
export default {
/*
Defines the data used by the component
*/
data(){
return {
files: []
}
},
/*
Defines the method used by the component
*/
methods: {
/*
Adds a file
*/
addFiles(){
this.$refs.files.click();
},
/*
Submits files to the server
*/
submitFiles(){
/*
Initialize the form data
*/
let formData = new FormData();
/*
Iteate over any file sent over appending the files
to the form data.
*/
for( var i = 0; i < this.files.length; i++ ){
let file = this.files[i];
formData.append('files[' + i + ']', file);
}
/*
Make the request to the POST /select-files URL
*/
axios.post( '/select-files',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(){
console.log('SUCCESS!!');
})
.catch(function(){
console.log('FAILURE!!');
});
},
/*
Handles the uploading of files
*/
handleFilesUpload(){
let uploadedFiles = this.$refs.files.files;
/*
Adds the uploaded file to the files array
*/
for( var i = 0; i < uploadedFiles.length; i++ ){
this.files.push( uploadedFiles[i] );
}
},
/*
Removes a select file the user has uploaded
*/
removeFile( key ){
this.files.splice( key, 1 );
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment