Supprimer une image

Résolu
delaville81 -  

Bonjour,

J'affiche plusieurs photos avec sur chacune d'elles un X permettant des la supprimer.

 <?php
                    foreach (glob("old/".$_GET['id']."-*") as $filename) { ?>
                        <div class='image-container'>
                            <img src="<?php echo $filename; ?>" alt="image" class="img-fluid image-plus">
                            <div class="delete-icon" onclick="confirmDelete()">X</div>
                        </div>
                <?php } ?>

Le code JS

function confirmDelete() {
// Demander confirmation à l'utilisateur
    var userConfirmed = window.confirm("Etes vous sûr de vouloir supprimer la photo ?");

    // Si l'utilisateur a confirmé, supprimer la photo
    if (userConfirmed) {
        deletePhoto();
    }
}

function deletePhoto() {
    // Code pour supprimer la photo
    var imageContainer = document.querySelector('.image-container');
    if (imageContainer) {
        imageContainer.remove();
        alert("La photo a bien été supprimée!");
    }
}

Le problème est que cela supprime la première photo, mais je reviens sur la page, la photo est toujours là. Donc toujours sur le serveur.

Merci d'avance pour votre aide
Macintosh / Chrome 120.0.0.0

Bien PHPment et MySQLment
Delaville

14 réponses

  1.  NHenry Modérateur

    Pourquoi ne pas passer le nom de l'image à ta fonction

    confirmDelete()

    ?

    1.  jordane45 Modérateur

      Bonjour,

      Il y a plusieurs soucis dans ton code .... et dans ta question !

      Déjà, comme le fait remarquer Nhenry,  tu ne cibles pas une images en particulier.. mais toutes celles qui ont la class .image-container  ...

      Donc si tu as plusieurs images dans cette même page .. ton code n'est pas capable de déviner laquelle il doit supprimer.

      Par contre, plutot que de passer le "name" (qui peut avoir des caractères pourris...) je jouerai plutôt avec un ID 

      <?php
foreach (glob("old/".$_GET['id']."-*") as $id => $filename) { 
?>
	<div class='image-container'>
		<img id="img_<?php echo $id;?>" src="<?php echo $filename; ?>" alt="image" class="img-fluid image-plus">
		<div class="delete-icon" onclick="confirmDelete('img_<?php echo $id;?>')">X</div>
	</div>
<?php 
}
 ?> 
      function confirmDelete(imgId) {
// Demander confirmation à l'utilisateur
    var userConfirmed = window.confirm("Etes vous sûr de vouloir supprimer la photo ?");

    // Si l'utilisateur a confirmé, supprimer la photo
    if (userConfirmed) {
        deletePhoto(imgId);
    }
}

function deletePhoto(imgId) {
    // Code pour supprimer la photo
    var imageContainer = document.querySelector('#imgId');
    if (imageContainer) {
        imageContainer.remove();
        alert("La photo a bien été supprimée!");
    }
}

      Ensuite,  ton autre souci... c'est la suppression côté serveur... et là .. et bien...  le JS s'exécutant côté CLIENT .. ne saurait supprimer côté SERVEUR.

      Pour se faire, il va te falloir du code php,  et pour y faire appel depuis ton JS, utiliser de l'AJAX. 

      Tu trouveras sans mal de nombreux tutos/exemples sur le net sur l'utilisation de l'ajax. Bonne formation.

      1. delaville81 Auteur

        Bonjour Jordane,

        j'ai fait comme indiqué, la suppression coté client ne fonctionne plus.

        Coté Ajax, j'ai trouvé ceci

        Effectuer un appel AJAX pour supprimer côté serveur
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                alert("Photo deleted successfully!");
            } else {
                alert("Error deleting photo.");
            }
            }
        };
        
        xhr.open("POST", "../admin/delete_photo.php", true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send("photo_path=" + encodeURIComponent(imgId));

        Je ne sais pas trop à quel endroit je dois le positionner.

        et PHP

        if (isset($_POST['photo_path'])) {
  $photoPathToDelete = $_POST['photo_path'];

  if (unlink($photoPathToDelete)) {
    echo "success";
  } else {
    echo "error";
  }
}

        Je ne sais pas si c'est la bonne méthode.

        xhr.open("POST", "../admin/delete_photo.php", true);

        Mon JS se trouve dans www/js/form.js

        delete_photo.php est dans www/admin/delete_photo.php

        le js : form.js est appelé depuis le www/admin/footer.php 

        <script type="text/javascript" src="../js/form.js"></script>

        Merci d'avance pour vos lumières.

        1.  jordane45 Modérateur

          Petite erreur dans le code js que je t'ai donné.

          De plus, avec l'ajax, ça devrait donner un truc du genre :

          function deletePhoto(imgId) {
    // Code pour supprimer la photo
    var imageContainer = document.querySelector('#'+ imgId);
    if (imageContainer) {
      var photo_path = imageContainer.src;
      var data = new FormData();
          data.append('photo_path', photo_path);
      var xhr = new XMLHttpRequest();
          xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xhr.onreadystatechange = function () {
              if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    imageContainer.remove();
                    alert("Photo deleted successfully!");
                } else {
                    alert("Error deleting photo.");
                }
              }
          };
          
      xhr.open("POST", "../admin/delete_photo.php", true);
      xhr.send(data);

       
    }
}

          NB: Pour débuguer de l'ajax, je te recommande fortement d'utiliser le navigateur firefox.  Dans la console de celui-ci, pense à activer le débugage du XHR...  et regarde, lorsque du lances ton appel ajax ce qui apparait dans l'onglet "requete" et dans l'onglet "reponse"

          2. delaville81 Auteur

            bonjour,

            merci pour ta réponse.

            Firefox me retourne ceci

            Uncaught DOMException: XMLHttpRequest.setRequestHeader: XMLHttpRequest state must be OPENED.

            function confirmDelete(imgId) {
    // Demander confirmation à l'utilisateur
        var userConfirmed = window.confirm("Etes vous sûr de vouloir supprimer la photo ?");
        // Si l'utilisateur a confirmé, supprimer la photo
        if (userConfirmed) {
            deletePhoto(imgId);
        }
    }
    
function deletePhoto(imgId) {
    // Code pour supprimer la photo
    var imageContainer = document.querySelector('#'+imgId);
    if (imageContainer) {
        var photo_path = imageContainer.src;
        var data = new FormData();
            data.append('photo_path', photo_path);
            var xhr = new XMLHttpRequest();
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        imageContainer.remove();
                        alert("Photo deleted successfully!");
                    } else {
                        alert("Error deleting photo.");
                    }
                }
            };     
        xhr.open("POST", "../admin/delete_photo.php", true);
        xhr.send(data);
    }
}

            Coté client et serveur ça ne fonctionne pas.

            Merci d'avance pour ton aide

            2. delaville81 Auteur

              Bonjour,

              Ca fonctionne coté client. Seul bémol, le "X" qui permet de supprimer l'image reste affiché.

              Coté serveur, rien n'est supprimé.

              y'a t il une erreur dans le chemin

              xhr.open("POST", "../admin/delete_photo.php", true);

              ---------------------------------------------------------

              pour rappel : 

              Mon JS se trouve dans www/js/form.js

              delete_photo.php est dans www/admin/delete_photo.php

              le js : form.js est appelé depuis le www/admin/footer.php 

              ----------------------------------------------------------------------------

              Merci d'avance

              1.  jordane45 Modérateur

                Sans nous montrer ce que la console de firefox t'affiche quand tu cliques sur ton X  ... impossible de te répondre !

                Merci de nous faire une capture écran ( de l'onglet requête ..et une de l'onglet Réponse )

            3. delaville81 Auteur

              Voici les captures

              1.  jordane45 Modérateur

                Sauf que je t'ai demandé le contenu de l'onglet requête et celui de l'onglet réponse là tu m'as fait les en-têtes et le délai pas du tout ce que j'ai demandé

            4. delaville81 Auteur

              re up

              1.  jordane45 Modérateur

                Le problème c'est que tu n'envoies pas le chemin de la photo sur ton serveur mais son "url"....

                Ton php, pour la supprimer, à besoin de son chemin "physique" sur le serveur. 

            5. delaville81 Auteur

              Bonjour,

              J'ai essayé plusieurs choses, je n'arrive à rien

              __DIR__

              et également

              le chemin complet depuis /home/.................

              J'aurais encore besoin de ton aide.

              Merci d'avanve

              1.  jordane45 Modérateur

                Montre ce que tu as essayé sinon je ne pourrais pas t'aider à corriger

            6. delaville81 Auteur

              merci de ta réponse.

              je fais une pause développement, je reprendrai la semaine prochaine après Noël.

              je te souhaite de bonnes fêtes

              1. delaville81 Auteur

                Bonjour,

                Dans le fichier delele_photo.php

                unlink('/admin/old/'.$photoPathToDelete)) {
 
                unlink(__DIR__.'/'. $photoPathToDelete)

                Localisation des fichiers : 

                www/delele_photo.php

                www/js/form.js

                Affichage des photos : 

                www/admin/form_edit.php

                Dossier photos

                www/admin/old

                www.footer.php

                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="js/connect.js"></script>
<script type="text/javascript" src="js/form.js"></script>

                www/admin/footer.php

                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="text/javascript" src="../js/function.js"></script>
<script type="text/javascript" src="../js/connect.js"></script>
<script type="text/javascript" src="../js/form.js"></script>

                Merci d'avance pour ton aide

                1.  jordane45 Modérateur

                  Comme je te l'ai déjà dit :

                  <<

                  Le problème c'est que tu n'envoies pas le chemin de la photo sur ton serveur mais son "url"....

                  Ton php, pour la supprimer, à besoin de son chemin "physique" sur le serveur. >>

                  Dans ton html, il faudrait ajouter un data attribute qui contient le filename du fichier à supprimer  ....  et dans le JS, au lieu de récupérer la valeur du SRC, prendre celle du data attribute

                  1. delaville81 Auteur

                    J'ai pas bien compris comment passer le chemin en paramètre.

                    Etant très mauvais en JS, même en ayant cherché sur les forum et W3C, je ne sais pas l'attribute à utiliser à la place du SRC.

                    Pour le chemin j'ai trouvé ceci

                    <?php echo realpath($filename); ?>

                    qui me renvoie

                    /home/#########/www/admin/old/1-1702478194.jpg

                    Merci d'avance pour tes lumières

                    Discussions similaires

                    Retrouver l'image originale d'une photo modifiée
                    Raven

                    10 réponses
                    Supprimer l'historique de commandes et d'achats sur Amazon
                    Matthew5

                    25 réponses