Laravel uploading file using vue3 - laravel

Question

i am trying to upload file in Laravel storage folder using vue3 composition API. i have added code but file is not being uploaded.
routes are correct, only null value is being added in mysql.
i have 3 columns in mysql database.
id | file_name | file_path
html
<input ref="file" v-on:change="handleFileUpload()" type="file" />
<button #click="senddata" class="">UPLOAD</button>
Vue function:
<script>
import axios from "axios";
import { defineComponent,ref } from 'vue'
export default defineComponent({
setup() {
const file = ref(null)
const handleFileUpload = async() => {
// debugger;
console.log("selected file",file.value.files)
//Upload to server
}
function senddata() {
axios.post('http://127.0.0.1:8000/api/store-files',{
file:this.file,
}).then(response=>{
message=response.data.message;
alert(message);
});
}
return {
senddata,
handleFileUpload,
file
};
}
})
</script>
Laravel Store Controller:
public function store(Request $request)
{
$file=new Files();
if($request->file()) {
$file=new Files();
$file_name = time().'_'.$request->file->getClientOriginalName();
$file_path = $request->file('file_link')->storeAs('uploads', $file_name, 'public');
$file->file_name = time().'_'.$request->file->getClientOriginalName();
$file->file_path = '/storage/' . $file_path;
$file->save();
return response()->json([
'message' => 'File added'
]);
}
}

Answer 1

you cannot send file in json, you need to send via FormData
you need to write code like
html
<input ref="file" v-on:change="handleFileUpload" type="file" />
<button #click="senddata" class="">UPLOAD</button>
Vue function
handleFileUpload() {
const file = ref(null)
this.file = file.value.files;
}
function senddata() {
let formData = new FormData();
formData.append('file',file)
axios.post('http://127.0.0.1:8000/api/store-files',formData).then(response=>{
message=response.data.message;
alert(message);
});
}
ref link https://developer.mozilla.org/en-US/docs/Web/API/FormData