Supprimer une image

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

confirmDelete()

?

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.

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.

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"

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

Déplace la ligne 18 après la 29

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

Voici les captures

re up

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

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

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

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

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