Laravel Ajax Image Upload

El_Matella
PHP Laravel

Hello tout le monde, aujourd'hui j'ai un peu de mal pour uploader des images via Ajax vers Laravel.
En gros, le problème est que mon controlleur ne détecte pas le fichier quand je lui envoie.
Voici le code de mon controller:

public function avatar(Request $request)
{
    if($request->hasFile('avatar')) {
        return 'il detecte';
    }
    return 'il ne detecte pas';
}

Voilà, donc cette fonction retourne Il ne detecte pas à chaque fois. Voici la requête que je lui envoie:

Pour finir, voici le code avec lequel j'envoie cette requête. j'utilise la librairire VueJS:

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');
    });
}

Comme vous le voyez, j'utilise la classe "FormData()" de Javascript pour créer mes données. Mais j'ai l'impression que je loupe quelque chose parce que ça ne fonctionne pas :(

Merci à vous pour vos indices, et bonne journée :)

12 réponses

Spiker
Réponse acceptée

Essaye de rajouter ceci dans le parametrage de ton $http:

headers: {'Content-Type': undefined}
Alexandre #lbac

Salut,

Est ce que simplement tu n'oublierais pas d'autoriser l'envoi de fichiers dans form ?

El_Matella
Auteur

Salut, merci pour ta réponse. Enfaite, il n'y a pas de form, puisque je récupère directement le fichier de l'input avec Javascript.
Et sur le screen de la requête qui est effectuée, on voit bien que le header multipart/form-data est bien présent...

MaMouT

Bonjour,
Plusieurs pistes :

  • tu ne transmets pas ton token de sécurité csrf-token
  • tu n'as pas autorisé le champ "avatar" comme fillable dans le model
El_Matella
Auteur

Salut @MaMouT, merci pour ta réponse. Malheureusement, j'ai désactivé le middleware csrf-token car j'utilise Laravel comme une API, je n'utilise donc pas cette sécurité.

Autoriser le champs "avatar" dans $fillable permet uniquement d'éviter une erreur de type MassAssignment et n'a donc pas trop de rapport avec mon erreur :/

Merci quand même pour les conseils, je n'ai toujours pas réussi à régler mon problème et toute piste est recevable!

Bonne soirée :)

MaMouT

Salut @El_Matella, ok pour le coup du token mais j'ai quand même un gros doute sur le fillable qui est plus la première sécurité dans Laravel... Normalement, les champs qui ne sont pas dedans sont filtrés.
Tu l'as précisé quand même dans le fillable ? Sinon, tu peux faire un essai ?

El_Matella
Auteur

$fillable est un attribut d'un certain modèle. Ici, je n'utilise aucun modèle, je demande une composante de la requête envoyée par le client, je ne saurais même pas dans quel modèle mettre le $fillable pour tester :/

MaMouT

Ah oui... je n'avais pas vu ton projet comme ça.
Et si tu débugges $request, tu as quoi ?

MaMouT

Et dans ton input, tu as ça : v-el="fileInput" comme attribut ?
Et changer ça dans ton js :
data.append('avatar', this.$$.fileInput.files[0]);

El_Matella
Auteur

Oui, dans mon input j'ai v-el:avatar qui est la nouvelle syntaxe. Et ça fonctionne puisque dans le Request Payload de ma request je vois bien mon fichier...

El_Matella
Auteur

Super @Spiker ça marche! Est-ce que tu aurais une petite explication? J'avoue que je ne comprends pas trop ce qu'il se passe là :/

Spiker

@El_Matella, j'aimerais bien pouvoir t'expliquer, mais je n'en connais moi même pas la raison... j'ai rencontré le même problème que toi récemment, donc à force de tester j'ai trouvé ceci...