Iterer sur un objet (dataTransfer.files) envoyé en POST (Ajax) dans un controller ?

Bonjour à tous,

J'ai mis en place une drop-zone indépendante pour des images, celle-ci n'est pas un contrôle de formulaire...

La partie javascript marche parfaitement, j'ai bien ma liste d'images draguées qui est envoyée au controller Symfony.

Je dois traiter ensuite chaque image en passant par un service "PictureService" qui était à l'époque destiné à traiter des fichiers "UploadedFile".

Le problème est que je ne sais pas comment adapter chaque fichier image pourqu'il soit traité par le service, dans le code ci-dessous, je crée un nouvel objet Uploadedfile pour chaque image mais je n'arrive pas à récupérer les propriétés de chaque objet dans le tableau...

Se pourrait t'il que mon objet JSON ne soit pas bon ? Voici ce que m'affiche le getContent() :

Code:

1
2
3
4
5
6
7
8
9
 
{#748
  +"files": {#745
    +"0": {#744}
    +"1": {#746}
    +"2": {#747}
  }
  +"galerieId": "81"
}

Comme vous le voyez, les propriétés de chaque image sont inaccessibles, par contre je peux accéder à la propriété "galerieId" sans problème...

Je pense qu'il y a une erreur dans l'envoi du fichier "files" dans la requête Ajax (faut-il vraiment utiliser stringify pour un objet ?).

D'autre-part, faut-il créer un nouvel objet "Uploadedfile" pour chaque image comme je tente de le faire ou bien exite il une autre méthode qui permettrait le traitement dans le service cité ? (J'ai essayé en changeant Uploadedfile pour File, ça ne marche pas non plus)

Merci d'avance pour votre expertise

drop-area.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const handleDrop = (e) => {
  const dataTransfer = e.dataTransfer;
  const files = dataTransfer.files;
  const listeImages = [...files];
  console.log(listeImages);
 
  //Affichage des détails des images en tableau en cours d'importation
  const tableauDetails = document.querySelector(".tableau-details-images");
  tableauDetails.innerHTML = "";
 
  tableauDetails.insertAdjacentHTML(
    "afterbegin",
    `<span>${listeImages.length} images sélectionnées : </span>`
  );
  let i = 1;
  listeImages.forEach((img) => {
    tableauDetails.insertAdjacentHTML(
      "beforeend",
      `<div class="details-image">${i}. ${img.name} ${readableFileSize(
        img.size
      )} ${img.type}</div>`
    );
    i++;
  });
 
  //envoi de la liste d'images vers le controller Galeries de symfony
  const envoiListeImages = async () => {
    const galerie = document.querySelector(".container-galerie");
    let galerieId = galerie.dataset.id;
 
    try {
      const response = await fetch(`/admin/galeries/importer-images`, {
        method: "POST",
        headers: {
          "X-Requested-with": "XMLHttpRequest",
          "Content-Type": "application/json;charset=UTF-8",
        },
        body: JSON.stringify({ files, galerieId }),
      });
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error("Errors : ", error);
    }
  };
  envoiListeImages();
};

importer-imagesController.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#[Route('importer-images', 'importer_images', methods: ['POST'])]
    public function importerImages(Request $request, EntityManagerInterface $em, PictureService $pictureService): Response
    {
        if ($request->isXmlHttpRequest()) {
            $postData = json_decode($request->getContent());
            // dd($postData);
            $galerie = $postData->galerieId;
            // dd($galerie);
            $listeImages = $postData->files;
            // dd($listeImages);
            foreach ($listeImages as $image) {
                $image = new UploadedFile("", $image, $image->name, $image->type);
                $folder = 'images';
                $fichier = $pictureService->add($image, $folder, 300, 300);
 
                $img = new Images();
                $img->setName($fichier);
                $galerie->addImage($img);
            }
            $em->persist($galerie);
            $em->flush();
 
            $this->addFlash('success', 'La nouvelle galerie d\'images a été actualisée dans la base.');
            return new JsonResponse('Réponse en json');
        }
        return new JsonResponse(['error' => 'Cet appel doit être effectué via AJAX.'], Response::HTTP_BAD_REQUEST);
    }