422 Unprocessable Entity Error. I tried upload Excel file to import data but it is not working-CodePudding

This is my code, i use vuejs and laravel. The function I am doing is both saving the Course and also importing the Excel file to get the data in the file. But when saving the Course is normal, but when it comes to running the validate excel file line, the error is not received. Even though I gave it a name and console.log came out. Can you help me fix it? Thank you so much.

Component - template tag

<form @submit.prevent="store()" @keydown="form.onKeydown($event)">
  <div class="form-group">
    <label class="form-label">Courses</label>
    <select class="form-control" name="education_program_course" v-model="form.education_program_course">
        <option value="" disabled selected="">Select option</option>
        <option value="" disabled>-------</option>
        <option v-for="course in courses" :key="course.course_code" :value="course.course_code">{{ course.course_name }}</option>
    </select>
  </div>

  <div class="form-group">
    <label class="form-label">Excel File</label>
       <input type="file" class="form-control" id="file_data" name="file_data" ref="fileupload" @change="onFileChange">
  </div>

  <div class="card-footer text-right">
     <button :disabled="form.busy" class="btn btn-success btn-lg mt-1" type="submit">Save</button>
  </div>
</form>

Component - script tag

export default: {
    data() {
       return {
        file_data: "",
        form: new Form({
          education_program_course
      }),
    },
    methods: {
      onFileChange(e) {
           this.file_data = e.target.files[0];
      },  
      store() {     
            this.form.busy = true;
            let formData = new FormData();
            formData.append('file_data', this.file_data);
            this.form.post('../../api/admin/program/education', formData, {
                    headers: { 'content-type': 'multipart/form-data' }
                })
                .then(res => {
                if(this.form.successful){
                    this.$snotify.success('Sucessful!');
                    this.form.clear();
                    this.form.reset();
                }
            })
            .catch(err => {
                this.$snotify.error(err.response.data.errors.file_data[0]);
            });
        },
    }
  }
}

Controller

$data = $request->validate([
    'education_program_course' => ['required'],
    'file_data' => ['required', 'file', 'mimes:xls,xlsx']
]);
$program = new EducationProgram();
$program->education_program_course = $data['education_program_course'];
$path = $request->file($data['file_data'])->getRealPath();
Excel::import(new ProgramDetailImport, $path);

CodePudding user response：

You should append 'education_program_course' on your formdata.

    formData.append('education_program_course', this.form.education_program_course);

CodePudding user response：

I have solved this problem. Change change at script tag -> store()

from:

let formData = new FormData();
formData.append('file_data', this.file_data);

to:

if(document.getElementById("file_data").files[0]){
   this.form.file_data = document.getElementById("file_data").files[0];
}

Adding file_date in form: new Form and remove formData in this.form.post