file upload vue js + laravel api
apiController.php
function fileUpload(Request $request){
$file = new Fileuploads;
try {
$file->user_name = $request->name;
if($request->profile){
$public_des_path='public/files';
$fname = $request->file('profile');
$file->filename = $fname = $request->file('profile')->store('');
$request->file('profile')->storeAs($public_des_path,$fname);
$request->file('profile')->move('files/',$fname);
}
$file->save();
return response()->json([
'status'=>'true',
'message'=>'file uploaded!'
]);
} catch (\Throwable $th) {
return response()->json([
'status'=>'false',
'message'=>$th
]);
}
}
-----------------------------------------------
api.php
Route::post('/profile_upload', [apiController::class, 'fileUpload']);
--------------------------------------------
MyForm.vue
<script>
export default {
name: 'ProfileUpdate',
data() {
return {
name: '',
profile: null
}
},
methods: {
uploadFile(event) {
console.log(event.target.files[0]);
this.profile = event.target.files[0];
},
saveForm() {
const formData = new FormData();
formData.append('name', this.name);
formData.append('profile', this.profile);
fetch("http://localhost:8000/api/profile_upload", {
method: "POST",
headers: {
"Accept": "application/json"
},
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
}
}
}
</script>
<template>
<br>
<br>
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<!-- file upload -->
<form @submit.prevent="saveForm">
<div class="mb-3">
<label for="name" class="form-label">User Name</label>
<input type="text" class="form-control" name="name" id="name" v-model="name">
</div>
<div class="mb-3">
<label for="profile" class="form-label">Select Profile</label>
<input class="form-control" type="file" @change="uploadFile">
</div>
<br>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-2"></div>
</div>
</template>
