Unable to access uploaded files from axios request to laravel

Question

I'm building the curriculum section for one project where multiple lectures in a section can have multiple files. I'm unable to send files to the Laravel controller.

Vue form

<input type="file" id="files" name="files[]" ref="resources" multiple @change="onFilesSelect($event, lec_index)">

Method

onFilesSelect(event, lec_index){
            let files_count = event.target.files.length;
            var files_data = [];
            for(let i = 0;i<files_count;i++){
                files_data[i] = event.target.files[i];
            }
            Vue.set(this.selected_files, lec_index, files_data);
            //this.course_files = this.$refs.resources.files;
        },

Formdata

let formData = new FormData();
            var selected_files_count = this.selected_files.length;
            for(let j=0;j<selected_files_count;j++){
                let resources = this.selected_files[j];
                formData.append('files['+ j +']', resources);
            }

Axios post request

const id = this.current_course_id;
            const url = `/create-curriculum/${id}`;
            //const url = 'course-uploadfile';
            axios.post(url, formData,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                    }
                })
                .then(response=>{
                    console.log(response);
                })
                .catch(error=>{
                    console.log(error);
                });

Vue dev tools showing files

Laravel controller

public function create_curriculum(Request $request, $id){
        $data = $request->all();
        print_r($data);
}

Output

Array
(
    [files] => Array
        (
            [0] => [object File],[object File]
            [1] => [object File],[object File]
        )

)

I'm unable to see file information in [Object File].

$data = $request->all(); @KevinBui $request->allFiles() return empty array []. — Prudhvi Mallavarapu

Prudhvi Mallavarapu Prudhvi Mallavarapu · Accepted Answer · 2020-02-01T15:26:15

Got solution after below changes in two methods.

Added form: new FormData in Vue data object.

On files select

onFilesSelect(event, lec_index){
            let files_count = event.target.files.length;
            var files_data = [];
            for(let i = 0;i<files_count;i++){
                files_data.push(event.target.files[i]);
            }
            Vue.set(this.selected_files, lec_index, files_data);
        },

On file upload

files_store(){
 for(let i = 0; i< this.selected_files.length; i++){
                    for (let j = 0; j < this.selected_files[i].length; j++) {
                        this.form.append('files['+ i +']['+ j +']', this.selected_files[i][j]);
    }
}

Unable to access uploaded files from axios request to laravel

1 Answers