Unable to read filelist object in Laravel controller from vue

Question

I'm creating an application where user is filing up a form with possibility to send multiple files along

In vue.js I'm creating formData with an array of files and with an object with the rest of inputs fields. I'm posting that with Axios. In request in Laravel controller I can't access my filelist-object. I can see the

$request->My_Array,

but I can read the data store inside I have tried to use loops also I have try :

$request->all();
$request->file('files');

My input

<input class="browse" V-on::change="onImageChange" type="file">

My vue.js component

onImageChange(event) {
    this.files.push(event.target.files);
},
submit(e) {
    e.preventDefault();
    let currentObj = this;
    const fd = new FormData();
    for (let i = 0; i < this.files.length; i++) {
        fd.append('IoFiles[]', this.files[i]);
    }
    console.log(this.files);

    fd.append('IoFiles', this.files);
    fd.append('fields', JSON.stringify(this.fields));
    axios.post('/io',
        fd,
        {headers: {'Content-Type': 'multipart/form-data'}})
        .then(function (response) {
            currentObj.output = response.data;
        })
        .catch(function (error) {
            currentObj.output = error;
        });
},

My Laravel controller

public function store(Request $request)
{
    if ($request->IoFiles) {

        $medias = $request->IoFiles;

        foreach ($medias as $image) {
            return $image->getClientOriginalName();//That give me an  error 
        }
    }
}

Rwd Rwd · Accepted Answer · 2019-07-29T11:35:16

There are a couple of issues with your code.

Firstly, V-on::change="onImageChange" should be:

v-on:change="onImageChange"

Please note:

the lowercase v for v-on
the single :

Alternatively, you could write @change="onImageChange".

Secondly, event.target.files returns a FileList not a single file so you need to change your onImageChange code to the following be able to get the file itself:

onImageChange(event) {
    this.files.push(event.target.files[0]); //Note the [0] after files
},

Unable to read filelist object in Laravel controller from vue

1 Answers