How upload file PDF in Laravel Using Vue - laravel

Question

I wanna get file pdf document from View use Vue to Laravel. But it still bug. Can help me what is wrong with my code?
This is my Blade
<template>
<form class="form" files="true" method="post" #submit.prevent="onSubmit" enctype="multipart/form-data">
<div class="form-group">
<label>File SK
<input type="file" multiple class="form-control-file" name="fileSk" id="fileSk" ref="fileSk"
#change="fileSkUpload()"/>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
This is my Vue Code for getting file
fileSkUpload(event) {
let files = event.target.files;
if (files.length) this.fileSk = files[0];
},
onSubmit() {
let data = new FormData();
data.append('fileSk', this.fileSK);
data.append('_method', 'put'); // add this
axios.post('/psu/list/store', {
data: this.data,
}).then(response => {
this.data = ''
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
This is my Controller
public function store(Request $request)
{
$dokumen = new Dokumen();
$psu = new Psu();
$fileSk = $request->file('fileSk');
$data = $request->input('fileSk');
$extension = $fileSk->getClientOriginalExtension();
Storage::disk('uploads')->put($fileSk->getFileName() . '.' . $extension, File::get($file));
$dokumen->file_image_dokumen = $fileSk->getFileName() . '.' . $extension;
$dokumen->save();
}
I got this Error:
"Call to a member function getClientOriginalExtension() on null"
Error

Answer 1

In your controller you haven't initialised the $file variable.
Instead of using the Storage facade to store the file you can just use the Request itself:
$fileSk->storeAs('', $fileSk->getFileName() . '.' . $extension, 'uploads');
Storing uploaded files
You seem to have a few of issues in your JS code.
1. Don't include the parentheses in #change="fileSkUpload()" as this will cause the event not to be passed to the method:
#change="fileSkUpload"
alternatively you will have to pass the event yourself:
#change="fileSkUpload($event)"
$event docs
2. I noticed that in your fileSkUpload method you're referencing this.fileSk but in your onSubmit method you're referencing this.fileSK (capitalised K) - these should be the same.
3. You don't need to wrap the FormData in a object. Change your axios call to just be:
axios.post('/psu/list/store', data)
.then(response => {
this.data = ''
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});