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); });
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].
Advertisement
Answer
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]); } }