VueJs & Laravel. I can't send an excel file with Vuejs and FileReader

Question

I would like to load an excel file to send it with axios to Controller and Maatwebsite\Excel for an Import.

The import part in Controller is working when i use Php from blade, i have a problem when sending from my Vuejs Component. I can't Read the Excel File. or Maybe i can't read it in Controller.

This is my code :

<template>
  <input type="file"  @change="checkFile" />
  <button @click="importExcel()">Import File</button>
</template>

<script>
//In method 
  checkFile(e) {
    var files = e.target.files || e.dataTransfer.files;
    console.log('#', files); // The file is in console
    if (!files.length)
    return;
    this.createFile(files[0]);
  },

createFile(file) {
  var reader = new FileReader();
  var vm = this;
  reader.readAsDataURL(file)
  vm.ex.excel=file; // my ex.excel object contain File
 },

importExcel: function () {
    var formData = new FormData();
    formData.append("file", this.ex.excel);
    axios.post('/importExcel', formData)
          },  

</script>

So in Controller, i use this code when i'm using php (working)

public function importExcel(Request $request)
{
    if($request->hasFile('import_file')){
       Excel::import(new UsersImport, request()->file('import_file'));
    }
    return back();
}

When i try this code for axios. i have an error :

public function importExcel(Request $request)
{
    Excel::import(new UsersImport, $request->excel);
    return back();
}

Error: No ReaderType or WriterType could be detected

Console.log(file) in image

UPDATE: In controller i added

$a = $request->excel;
dd($a);
result in : null

Mamadou Hady Barry · Accepted Answer · 2019-02-13 18:56:19Z

2

<template>
  <input type="file" ref="file"  @change="checkFile" />
  <button @click="importExcel()">Import File</button>
</template>

<script>
//In method 
{
  ...

  createFile(file) {
    this.ex.excel = this.$refs.file.target.value.files[0]
  }
  ...
  }
</script>

<?php

...
public function importExcel(Request $request)
{
    Excel::import(new UsersImport, $request->file('file'));
    return back();
}
...

answered Feb 13, 2019 at 18:56

Mamadou Hady Barry

6394 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shuyi · Accepted Answer · 2019-02-13 18:41:37Z

0

looks like the mime-type is missing, try add the mime-type together with your HTTP POST ...

answered Feb 13, 2019 at 18:41

Shuyi

9162 gold badges14 silver badges28 bronze badges

1 Comment

yassine j Over a year ago

Thank you for your response. I don't know how to do that. Any explications please ?

Collectives™ on Stack Overflow

VueJs & Laravel. I can't send an excel file with Vuejs and FileReader

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related