Level 88
Well the process is pretty simple. You just need to send the correct data and handle it in your controller ;)
// VueJS
<template>
<input class="input" type="text" name="name" placeholder="File name" v-model="fileName" required>
<input class="file-input" type="file" ref="file" name="file">
</template>
<script>
data() {
fileName: '',
attachment: '',
},
submitForm() {
this.formData = new FormData();
this.formData.append('name', this.fileName);
this.formData.append('file', this.$refs.file.files[0];);
axios.post('files/add', this.formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
// handle success response
}).catch(error => {
// handle failed response
});
},
</script>
I hope you get the idea ;)
// Controller
public function store(Request $request)
{
$file = $request->file('file');
$ext = $file->getClientOriginalExtension();
$type = $this->getType($ext);
$fileName = $request['name'] . '.' . $ext;
if (Storage::putFileAs('/storage/uploads', $file, fileName)) {
// Make sure you storage the location of the file somewhere. For example in your database
}
// Return a proper response
return response()->json([
'success' => true,
]);
}
Documentation: https://laravel.com/docs/5.6/filesystem#file-uploads
1 like