How To Use FormData() For Uploading File In Vue

Question

So I had asked a question previously, and got a little bit of help as far as logging the results however my results are not making sense.

So I have a input

<input type="file" name="import_file" v-on:change="selectedFile($event)">

The v-on:change binds the selected file to my data object this.file

selectedFile(event) {
      this.file = event.target.files[0]
    },

and then I submit the file with this method

uploadTodos() {
  let formData = new FormData();
  formData.append('file', this.file);
  for(var pair of formData.entries()) {
    console.log(pair[0]+ ', '+ pair[1]); 
   }
   this.$store.dispatch('uploadTodos', formData);
 }

However when I submit it seems there is no data attached to formData because my logged result is this

file, [object File]

shouldn't I have my actual data appended to the formData object??

I have referenced other articles on how to post but I am not getting the desired results.

article 1 article2

uploadTodos(context, file) {
      console.log(file)
      axios.post('/import', file,{ headers: {
        'Content-Type': 'multipart/form-data'
      }})
      .then(response => {
        console.log(response.data)
        context.commit('importTodos', response.data)
      })
      .catch(error => {
        console.log(error.response.data)
      })
    }

when I console.log(file) the formData object is empty

Backend Question So my issue with Laravel on the backend is with the maatwebsite package. From what I have seen is the 3.0 version does not yet support imports. And the only work around suggested is to install version 2.0? Is this still the only workaround? Here is the controller method

public function importExcel(Request $request) 
    {

        if (empty($request->file('file')->getRealPath())) {
            return back()->with('success','No file selected');
        }
        else {
        $path = $request->file('file')->getRealPath();
        $inserts = [];
        Excel::load($path,function($reader) use (&$inserts)
        {
            foreach ($reader->toArray() as $rows){
                foreach($rows as $row){
                    $inserts[] = ['user_id' => $row['user_id'], 'todo' => $row['todo']];
                };
            }
        });

        if (!empty($inserts)) {
            DB::table('todos')->insert($inserts);
            return back()->with('success','Inserted Record successfully');                  
        }


        return back();
        }

    }

The line not suppported by version 3.0 is this

Excel::load($path,function($reader) use (&$inserts)

Answer 1

I have reproduced your code and it seems to be working fine

when I console.log(file) the formData object is empty

Yeah the output should be an empty object when you console, that's the way javascript works.

after casting the output to an array i get the output in the image below:

const store = new Vuex.Store({
  actions: {
    uploadTodos(context, file) {
      console.log([...file])
      axios.post('/import', file,{ headers: {
        'Content-Type': 'multipart/form-data'
      }})
      .then(response => {
        console.log(response.data)
        context.commit('importTodos', response.data)
      })
      .catch(error => {
        console.log(error.response.data)
      })
    }
  }
})

const app = new Vue({
 store,
  data: {
   file: null
  },
  methods: {
   selectedFile(event) {
       console.log(event);
         this.file = event.target.files[0]
       },
    uploadTodos() {
    let formData = new FormData();
    formData.append('file', this.file);
    for(var pair of formData.entries()) {
      console.log(pair[0]+ ', '+ pair[1]); 
     }
     this.$store.dispatch('uploadTodos', formData);
   }
  },
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <input type="file" name="import_file" @change="selectedFile($event)">
  <button @click="uploadTodos">
   Submit 
  </button>
</div>

Answer 2

This post answers the second part of the question. At first from what I read maatwebsite/excel version 3.0 does not support import. However I am using version 3.1.0 which does support imports. However the method for importing still does not suppport Excel::load(). You should instead use Excel::import() and follow the given rules for passing in parameters. Which of course can be modified to suit your needs. But anyways here is a simple example of how I am using it for anyone interested.

First create import file for whatever model it is. For me it is Todos.

<?php

namespace App\Imports;

use App\Todo;

use Maatwebsite\Excel\Concerns\ToModel;

class TodoImport implements ToModel
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row)
    {
        return new Todo([
            'user_id'  => $row[0],
            'todo'     => $row[1],
        ]);
    }
}

next you have your controller handling the file, and passing it to the todosimport file

 public function importExcel(Request $request) 
    {

        if (empty($request->file('file')->getRealPath())) {
            return back()->with('success','No file selected');
        }
        else {
        Excel::import(new TodoImport, $request->file('file'));

        return response('Import Succesful, Please Refresh Page');
        }

    }

notice the Excel::import(). I pass in the new Todo model and the file received.

of course for me since I am doing it by ajax I use this route to ping the method

Route::post('/import', 'TodosController@importExcel');