Norbertho's avatar

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

0 likes
0 replies

Please or to participate in this conversation.