Uploading multiple dynamic files to laravel from vue

Question

I'm trying to upload multiple files with it's respective data from vue to laravel. I'm getting the files in vue (on vue console) but when submitting the form and doing dd($request['new_members']); on the laravel controller, it returns the result below:

The other data is available but the file value is gone.

Vue

<div class="row mt-2" v-for="(new_member,index) in new_members" :key="index">
    <div class="col-md-4">
        <label>NAME</label>
        <input class="form-control" type="text" v-model="new_member.name" required/>
    </div>
    <div class="col-md-4">
        <label>POSITION</label>
        <input class="form-control" type="text" v-model="new_member.position" required/>
    </div>
    <div class="col-md-4">
        <label>IMAGE</label>
        <input type="file" @change="onFileChange(index,$event)" name="file" ref="fileInput" required/>
    </div>
</div>
<button class="btn btn-primary col-md-2 col-12 rounded-0 float-right"  @click.prevent="addMoreMember()">ADD MORE</button>

<script>
data(){
    return{
        new_members:[{
            name:'',
            position:'',
            file:''
        }]
    }
},
methods:{
    addMoreMember(){
        this.new_members.push({name:'',position:'',file:''})
    },
    onFileChange(index,$event) {
        this.new_members[index].file =  $event.target.files[0]
    },
    submit(){
        let form = new FormData()
        form.append('new_members',JSON.stringify(this.new_members));
        form.append('content_team', this.content_team);
        axios.post('/api/mainpage/addNewMember',form).then(res=>{

        }) 
    },
}
</script>

Vikas Ukani Vikas Ukani · Accepted Answer · 2020-09-10T06:19:52

For multiple file uploading concepts,

You need to create an API service for upload files only and returning that response return string for accessing uploaded file path,

For every file uploading, You need to call this API services that you created. And the final page submission you just send the file path string where you got from the file uploading API services

I hope you are getting my points ❤

Uploading multiple dynamic files to laravel from vue

1 Answers