Image CRUD in laravel 9 with vue Js - laravel

Question

I have a form that and I want it to have a CRUD function, I have made the function for the text, but I have no idea how to do CRUD with images,
Here is my code :
Model
protected $fillable= [
'nama',
'alamat',
'nomor',
'email',
];
Controller :
public function index()
{
return Form::all();
}
public function store(Request $request)
{
$data = $request->all();
$response = Form::create($data);
return response()->json([
'status' => 'success',
'data' => $response
], 200);
}
The Form :
<Form #submit="saveData()">
<div class="form-row form-section" id="formParent">
<div class="col-12 mb-3">
<Field name="nama" type="text" class="form-control1" v-model="form.nama" placeholder=" Nama Lengkap" :rules="isRequired" />
<br>
<ErrorMessage name="nama" />
<br>
<Field name="alamat" type="text" class="form-control2" v-model="form.alamat" placeholder=" Alamat" :rules="isRequired" />
<br>
<ErrorMessage name="alamat" />
<br>
<Field name="nomor" type="text" class="form-control3" v-model="form.nomor" placeholder=" Nomor Telfon" :rules="isRequired" />
<br>
<ErrorMessage name="nomor" />
<br>
<Field name="nomor" type="file" class="form-control3" v-model="form.nomor" placeholder=" Nomor Telfon" :rules="isRequired" />
<Field name="email" type="text" class="form-control4" v-model="form.email" placeholder=" Email" :rules="validateEmail" />
<br>
<ErrorMessage name="email" />
</div>
<button class="btnSubmit" type="submit">
Gabung Mitra
</button>
</div>
</Form>
Script :
<script>
import axios from 'axios';
import { Form, Field, ErrorMessage} from 'vee-validate';
export default {
components: {
Form,
Field,
ErrorMessage
},
data() {
return {
form: {
nama: '',
alamat: '',
nomor: '',
email: '',
},
};
},
methods: {
isRequired(value){
if (value && value.trim()){
return true;
}
return 'This is required';
},
validateEmail(value) {
// if the field is empty
if (!value) {
return 'This field is required';
}
// if the field is not a valid email
const regex = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (!regex.test(value)) {
return 'This field must be a valid email';
}
// All is good
return true;
},
saveData(){
axios.post('/form/submit', this.form).then(
response => {
console.log(response);
this.$toast.success(`Data berhasil dikirim`,{
position: "bottom",
});
}
). catch(error => {
console.log('error');
this.$toast.error(`Terjadi kegagalan`,{
position: "bottom",
});
})
}
}
};
</script>
What should I do so that the user can upload an image to the form and save it to the database. I tried to change the field type to file, but I have no idea how the function works in the controller.

Answer 1

For storing images with Form you need to add few lines inside contoller for handling and storing image and also you need to add enctype inside form submit.
First you need to change :
<Form #submit="saveData()" enctype="multipart/form-data">
Now you need to change image input field :
<Field name="image" type="file" class="form-control3" v-model="form.image" :rules="isRequired" />
And inside the controller you need to change code for request :
public function store(Request $request)
{
$data = $request->all();
if ($request->hasFile('image')) {
$image = $request->file('image');
$path = $image->store('public/images');
$data['image'] = $path;
}
$response = Form::create($data);
return response()->json([
'status' => 'success',
'data' => $response
], 200);
}
And finally in your model :
protected $fillable = [
'nama',
'alamat',
'nomor',
'email',
'image',
];