0

I am having a problem trying to export an excel file to database using axios. Am able to console the file but cant figure out to post the data. I get this error Failed to load resource: the server responded with a status of 422 (Unprocessable Entity) app.js:716

My view

 <form  enctype="multipart/form-data">
   @csrf
    <div class="form-group">
     <table class="table">
      <tr>
       <td width="40%" align="right"><label>Select File for Upload</label></td>
       <td width="30">
        <input type="file"   @change="getExcelData" name="select_file"  />
       </td>
       <td width="30%" align="left">
        <input type="submit" name="upload" class="btn btn-primary" value="Upload">
       </td>
      </tr>
     </table>
    </div>
   </form>

The vue function

getExcelData(e){
       //const formData = new FormData();
    const file = e.target.files[0];
     console.log(file);
    //formData.append('file', file);
 axios.post("/import_excel/import").then(function(response){
   // this.users=response.data;
   console.log("working now");
   console.log(file);
    console.log(response)
          }.bind(this))
    },

My controller file

function import(Request $request)
    {
     $this->validate($request, [
      'select_file'  => 'required|mimes:xls,xlsx'
     ]);

     $path = $request->file('select_file')->getRealPath();

     $data = Excel::load($path)->get();

     if($data->count() > 0)
     {
      foreach($data->toArray() as $key => $value)
      {
       foreach($value as $row)
       {

        $insert_data[] = array(
         'userName'  => $row['userName'],
         'userPassword'   => $row['userPassword'],
         'timePackage'   => $row['timePackage'],
         'location'    => $row['location'],
         'Assigned'    => $row['Assigned']

        );
       }
      }

      if(!empty($insert_data))
      {
       DB::table('hotspot_users')->insert($insert_data);
      }
     }
     return back()->with('success', 'Excel Data Imported successfully.');
    }

Route

Route::post('/import_excel/import', 'ImportExcelController@import');
Hotdot Cyber
  • 361
  • 1
  • 5
  • 21
  • Probably this issue is caused by the different field names you're using in your JS/PHP. You put your file in the "file" form field in JS, but in your controller you're expecting it to be in the "select_file" field. – antrille Dec 31 '20 at 07:45
  • @ antrille thanks I have adjusted the function to this.template = e.target.files[0]; const formData = new FormData(); formData.append('template', this.template); console.log(formData); axios.post("/import_excel/import",formData,{ headers: { 'Content-Type': 'multipart/form-data' }}).then(function(response){ // this.users=response.data; console.log("working now"); and now I can console working now but now I get a different error Call to undefined method Maatwebsite\Excel\Excel::load()" – Hotdot Cyber Dec 31 '20 at 07:51
  • Well, that's a different issue. Take a look: https://stackoverflow.com/questions/49473098/call-to-undefined-method-maatwebsite-excel-excelload – antrille Dec 31 '20 at 07:56

0 Answers0