El_Matella's avatar

Strange behaviour with file upload

Hi, I am trying to build an avatar system but I am having some problems with file upload. It just doesn't detect the file in some case. Here is my controller:

public function avatar(Request $request)
{
    dd($request->hasFile('avatar'));
}

So, I am using postman to test this controller, and load a file. When I have the header Content-Type: multipart/form-data the controller returns false but when I delete this header, the controller returns true.

Of course, my application is using Vue and is using the Content-Type: multipart/form-dataso my Laravel server doesn't detect the file :/

What could I do? Thanks a lot for your answers!

EDIT: Here is my Vue Code, very simple using the Vue-Resource package:

updateAvatar() {
    var files = this.$els.avatar.files;
    var data = new FormData();
    data.append('avatar', files[0]);

    this.$http({
        url: 'me/avatar',
        method: 'PATCH',
        data: data
    }).then(function(response) {
        console.log('all good');
    }, function(response) {
        console.log('all bad');
    });
}

And here is a detail of the chrome network tab of the request I am sending to the server with this code: https://sc-cdn.scaleengine.net/i/fd615420bca9795d901f71006f2ca803.png

0 likes
3 replies
jekinney's avatar

Show your vue code. You need to use JavaScripts file class.

El_Matella's avatar

Hi @jekinney thank you for your answer. I think I'm using the Javascript Form Class, here is my code:

updateAvatar() {
    var files = this.$els.avatar.files;
    var data = new FormData();
    data.append('avatar', files[0]);

    this.$http({
        url: 'me/avatar',
        method: 'PATCH',
        data: data
    }).then(function(response) {
        console.log('all good');
    }, function(response) {
        console.log('all bad');
    });
}

And here is the request being sent: https://sc-cdn.scaleengine.net/i/fd615420bca9795d901f71006f2ca803.png

El_Matella's avatar

Hi, for the record or if anyone has the same problem, the solution was adding a headers: {'Content-Type': undefined} in my vue request...

Please or to participate in this conversation.