Created
November 19, 2018 16:35
-
-
Save amitavroy/a5b88533e3428bf0bd7fc5e91a93e896 to your computer and use it in GitHub Desktop.
Vue.js component for a File field which makes an Ajax request to server
This file contains hidden or 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="container"> | |
<div class="row justify-content-center"> | |
<div class="col-md-8"> | |
<div class="card card-default"> | |
<div class="card-header">Example Component</div> | |
<div class="card-body upload-file-wrapper"> | |
<input | |
type="file" | |
name="file" | |
ref="file" | |
multiple | |
v-on:change="handleFileUpload" | |
> | |
<button class="btn btn-primary" @click="handleButtonClick" v-text="buttonTxt" /> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
buttonTxt: 'Upload' | |
} | |
}, | |
methods: { | |
handleButtonClick(event) { | |
this.$refs.file.click(); | |
}, | |
handleFileUpload(event) { | |
this.buttonTxt = 'Uploading...'; | |
let files = this.$refs.file.files; | |
let formData = new FormData(); | |
let headers = {'Content-Type': 'multipart/form-data'}; | |
for (let i = 0; i < files.length; i++) { | |
formData.append('files[' + i + ']', files[i]); | |
} | |
formData.append('_hidden', 'Amitav Roy'); | |
window.axios.post('/file/upload', formData, headers) | |
.then(response => { | |
console.log('response', response); | |
event.target.value = null; | |
setTimeout(() => { | |
this.buttonTxt = 'Upload'; | |
}, 400); | |
}) | |
.catch(error => console.error('error uploading file', error.response)); | |
} | |
} | |
} | |
</script> | |
<style lang="scss" scoped> | |
.upload-file-wrapper { | |
input[type=file] { | |
display: none; | |
} | |
} | |
</style> |
This file contains hidden or 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
Route::post('/file/upload', function(Request $request) { | |
$files = $request->file('files'); | |
foreach ($files as $file) { | |
$filename = $file->getClientOriginalName(); | |
$file->storeAs('/uploads', $filename); | |
} | |
return response()->json([], 201); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I saw your video- https://www.youtube.com/watch?v=9B-xriETQ9M, You are using php, vue and laravel in this project. Actually, i am also doing image upload in vuejs but in above code you are calling php in line no.47- window.axios.post('/file/upload', formData, headers) , in my scenario i am not using php with vuejs. In vuejs $file->storeAs('/uploads', $filename) - storeAs is not function in Vuejs, it is use in php.
I am doing image upload, when i upload the image that image can transfer to local drive (absolute)path to the project's folder path in vuejs. actually i want image path , that path i am giving backend and backend person are access that image path and copy to according use. I have tried multer and fs-extra npm packge for upload image move local drive to another folder(inside project folder) but these libaries not working.