Discussion :

[clickandgo]

Bonjour à tous,

Je souhaite utiliser la protection csrf dans un appel ajax au click sur une image pour la supprimer, pour cela j'ai suivi un tuto en ligne, malheureusement la méthode 'DELETE' n'est pas acceptée et le $request->request->getContent() ou bien $request->request->getString('_token') retournent un null, que j' inclue la galerie d'image dans le form ou à l'extérieur...
Quelle serait la bonne méthode selon vous avec Symfony 7.1 et Ajax ?

Merci d'avance

GaleriesController.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#[Route('supprimer-image/{id}', 'supprimer_image',methods:['GET','DELETE'])]
    public function supprimerImage(Images $image, Request $request, EntityManagerInterface $em): Response
    {
        $request->enableHttpMethodParameterOverride();
        dd($request->request->getString('_token'));
        $data = json_decode($request->getContent(), true);
        if ($this->isCsrfTokenValid('delete' . $image->getId(), $data['_token'])) {
            $nom = $image->getName();
            unlink($this->getParameter('images_directory') . '/' . $nom);
            $em->remove($image);
            $em->flush();
 
            return new JsonResponse(['success' => 1]);
        } else {
            return new JsonResponse(['error' => 'Token invalide'], 400);
        }
    }

_galerie.php

Code :

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

1
2
3
4
5
6
7
8
 
{% for image in images %}
	<div class="miniature">
 
		<a class="btn-suppression-image" 
		href="{{path('galeries_supprimer_image',{'id':image.id})}}" 
		data-delete data-token="{{csrf_token('delete' ~ image.id)}}">&times;</a>
		<img src="{{asset('/uploads/images/mini/300x300-' ~ image.name)}}" alt="{{image.name}}" width="150">

images.js

Code :

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

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
 
window.onload = () => {
  //Supprimer une image
  const btnSuppression = document.querySelectorAll(["data-delete"]);
 
  for (btn of btnSuppression) {
    btn.addEventListener("click", (e) => {
      console.log("click sur suppression");
      e.preventDefault();
      if (confirm("Etes-vous sûr(e) de vouloir supprimer cette image ?")) {
        fetch(btn.getAttribute("href"), {
          method: "DELETE",
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ _token: btn.dataset.token }),
        })
          .then((response) => response.json())
          .then((data) => {
            if (data.success) {
              btn.parentElement.remove();
            } else {
              alert(data.error);
            }
          })
          .catch((e) => alert(e));
      }
    });
  }
};

[Pytet]

Bonjour,

Tu es sûr que ta requête ajax est bien envoyée (à vérifier via l'onglet Réseau dans les outils de dév de ton navigateur) ?
Est-ce que tu vois tes traces de log "click sur suppression" dans la console du navigateur ?

Actuellement, ton code ne semble pas fonctionnel car le sélecteur css pour btnSuppression n'est pas correct :

Code :

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

1
2
3
const btnSuppression = document.querySelectorAll(["data-delete"]);
// correction : 
const btnSuppression = document.querySelectorAll("[data-delete]");

[clickandgo]

Merci beaucoup Pytet pour cette correction, cependant, j'ai toujours la même erreur à savoir : la variable $request reste null ...