Discussion :

[Ushuango]

Bonjour,

j'ai suivi la documentation apiplatform pour uploader des ficheirs.
Tout fonctionne correctement ... avec insomnia !

Mais au moment de faire la requête dans mon front React, je n'arrive pas à envoyer le fichier choisi !
le React:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
const handleSubmit = (ev) => {
        const file = document.getElementById('file').files[0]
        console.log('le fichier: ', file)
        ev.preventDefault()
        fetch('api/animals/' + props.id + "/image", {
            method: "POST",
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            body: 
               // quoi mettre ici ?
        })

Le controller (pour le post personnalisée):

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
class AnimalImageController
{
    public function __invoke(Animal $animal, Request $request)
    {
        $image = new ImageAnimal($animal);
        $uploadFile = $request->files->get('file');
        dd($request);
        $image->setFeatured(false);
        $image->setImageFile($uploadFile);
        return $image;
    }
}

J'ai beau bidouiller dans le body:
{file: file}
{imageFile: file} ( imageFile est le nom du champ dans ma table qui contient les chemins vers les images)
file...

Il n'y a aucune trace de fichier dans $request !

J'avoue, je ne sais pas comment faire.
Merci,

Laurent.

[Ushuango]

Alors après tâtonnements:

une function handleChange dans le input, qui permet de récupérer le nom du fichier ( React contrôle le composant ):

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
const handleChange = (ev) => {
        setFile(ev.target.files[0])
}

Puis le formData dans la fonction HandlSubimt:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
const handleSubmit = (ev) => {
        ev.preventDefault()
        let formData = new FormData()
        formData.append("file", file)
        fetch('api/animals/' + props.id + "/image", {
            method: "POST",
            body: formData
        })
        .then(response =>  response.json())
}

Donc ceci fonctionne !