Is there any documentation or tutorial related this?
Hi Everyone, I have a Dynamic vue form with two text input fields. Name and Position. If i click on the Add new button it adds 1 more Name and on more Position fields to my form and so on. If i click Delete it removes one Name and one Position fields as i expected. It works fine.
<div id="app">
<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data" @submit.prevent="onSubmit" >
@csrf
<div class="col-6" v-for="(team, index) in team">
<label class="lable mt-3" for="tname"><strong>Name:</strong></label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="John Smith" v-model="team.name">
</div>
<label class="lable" for="tposition"><strong>Position:</strong></label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="UX Designer" v-model="team.position">
</div>
<div class="row justify-content-center">
<button type=button class="btn btn-success btn-sm col-5" @click="addNewForm">Add new</button><button type=button class="col-5 btn btn-danger btn-sm" @click="deleteForm(index)"><i class="far fa-window-close"> </i> DELETE</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
app.js
var vm = new Vue({
el: '#app',
data: {
team:[
{
name: '',
position: '',
}
],
},
methods: {
addNewForm () {
this.team.push({
name: '',
position: '',
})
},
deleteteamform (index) {
this.team.splice(index, 1)
},
},
onSubmit(){
axios.defaults.headers.common["X-CSRF-TOKEN"] = document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content");
var teams= JSON.stringify(this.team);
formData.append('team', teams);
axios.post('register', formData, { headers: {
'Content-type': 'multipart/form-data'
} })
So my question is that is there any way to have profile image upload to each team member? Is there any documentation or tutorial related this problem? I have tried to add like this but it does not work as i want the profile image optional.
<label for="customLogo"><strong>Profile Pic:</strong></label>
<div class="form-group mt-3">
<input type="file" class="form-control customLogo" @change="onfilechangev" v-model="team.profileimg" >
</div>
in this case my app.js looks like this:
var vm = new Vue({
el: '#app',
data: {
selectedFile: [],
team:[
{
name: '',
position: '',
profileimg: '',
}
],
},
methods: {
addNewForm () {
this.team.push({
name: '',
position: '',
profileimg: '',
})
},
deleteteamform (index) {
this.team.splice(index, 1)
},
},
onfilechangev(event) {
let uploads = event.target.files[0]
this.selectedFile.push( uploads );
},
onSubmit(){
axios.defaults.headers.common["X-CSRF-TOKEN"] = document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content");
var teams= JSON.stringify(this.team);
formData.append('team', teams);
axios.post('register', formData, { headers: {
'Content-type': 'multipart/form-data'
} })
I don't know how to save on the Laravel back end each team member with profile img as maybe there are some case when I dont want to upload img to my team member. or the other problem i have experienced if i have choose an image and before i upload it i change the image i will end up 2 file object in selectedFile[] with one team member. I have tried on the back end to save a each team member and each time i have saved one member loop trough the selectedFile: [] and compare the basename(profileimg) to foreach ($data['selectedFile'] as $pic) { $pic = $pic->getClientOriginalName(); But as @Cronix told me profileimg contains OS specific path so can't use the basename function.
So i anyone know any tutorial what is covers this related matter please let me know. Thanks
Please or to participate in this conversation.