I want to add a input file for a vueJS component including a form. Here is my component :
<form @submit.prevent="sendForm" enctype="multipart/form-data">
<div class="col-md-6">
<div class="form-group">
<label for="title">Nom de l'évènement</label>
<input id="title" name="title" type="text" class="form-control" v-bind:class="{ 'is-invalid': errors.title }" v-model="fields.title">
<div v-if="errors && errors.title" class="text-danger py-2">{{ errors.title[0] }}</div>
</div>
</div>
<div class="col-md-6">
<label for="image">Image ou flyer de l'évènement</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image" name="image" @change="imageChange" accept=".png, .jpg, .jpeg" v-bind:class="{ 'is-invalid': errors.image }">
<label class="custom-file-label" for="image">{{ imageLabel }}</label>
<div v-if="errors && errors.image" class="text-danger py-2">{{ errors.image[0] }}</div>
</div>
</div>
</form>
<script>
import {LMap, LTileLayer} from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer,
},
data () {
return {
// Some data are not usefull for this question
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 5,
center: [47, 2.5],
bounds: null,
markerLatLng: null,
city: null,
error: null,
errors: {},
fields: {},
mapLoading: false,
typingTimer: 1000,
imageLabel: 'Sélectionner un fichier'
};
},
methods: {
sendForm() {
axios.post('/events', this.fields)
.then(response => {
this.field = {}
console.log(response)
})
.catch(err => {
if (err.response.status === 422) {
this.errors = err.response.data.errors || { }
}
});
},
imageChange(event) {
this.imageLabel = event.target.files[0].name,
this.fields.image = event.target.files[0];
}
}
}
Here is my controller :
public function store(Request $request)
{
// var_dump($request->image());
$this->validate($request, [
'title' => 'required|string|unique:events',
'description' => 'required',
'start_date' => 'required|date',
'end_date' => 'date',
'latitude' => 'required|numeric',
'longitude' => 'required|numeric',
'image' => 'required|image'
]);
// $imageName = Str::slug($request->get('title'), '-') . '.' .$request->image->getClientOriginalExtension();
// $request->image->move(public_path('images/events'), $imageName);
return response()->json(null, 200);
}
When i fill and submit my form i got the following message : The image field is required.
It's just like the image is didn't send, someone have an idea please ? I tryied to follow this tutorial for the image upload : https://www.itsolutionstuff.com/post/laravel-vue-js-image-upload-example-with-demoexample.html.
Thank's a lot for everyone who read this entierely and will try to help me.
Florent