Hello a tous je viens faire ce post car j'ai un petit problème pour mon projet en cours, 

Quand j'ajoute des images a ma galerie depuis ma modale il est demandé de ne pas avoir de rechargement donc j'ai fait en sorte de ne pas en avoir, mon problème est que l'image s'affiche bien sur le site mais pas dans la modale quand j'ajoute une image et inversement quand j'en supprime une elle disparait bien de la modale mais ne part pas du site sans rechargement si quelqu'un a une idée pour résoudre mon problème je suis preneur ! 

je met en image le code pour l'ajout de photo dans ma galerie. 

//Supréssion au click sur la poubelle et mise a jour modale et gallery principale
function deleteWork() {
  const trashs = document.querySelectorAll(".fa-trash-can")
  trashs.forEach(trash => {
    trash.addEventListener("click", (e) => {
      const workID = trash.id;
      fetch(`http://localhost:5678/api/works/${workID}`, deleteWorkID).then(() => {
        // Suppression de l'élément du DOM après confirmation de la suppression en base de données
        trash.parentElement.parentElement.remove();
        }
      );
    });
  });
}

// affichage au click sur btn:"ajouter-photo" de la modalAddWorks
function displayModalAddWorks() {
  buttonAddPhoto.addEventListener("click", () => {
    modalPortfolio.style.display = "none";
    modalAddWorks.style.display = "flex";
  });
}

// Retour sur modalPortfolio depuis la flèche de la modalAddWorks
function returnToModalPortfolio() {
  const arrowLeftModalWorks = document.querySelector(
    ".modalAddWorks .fa-arrow-left"
  );
  arrowLeftModalWorks.addEventListener("click", () => {
    //Supréssion de la prewiew a clik sur retour dans la modale
    inputFile.value = "";
    previewImage.style.display = "none";
    modalPortfolio.style.display = "flex";
    modalAddWorks.style.display = "none";
  });
}
// ajout d'un nouveau projet
function validateImageFile(file) {
  // Vérifie que l'extension du fichier est jpg, jpeg, png ou gif
  const regex = /\.(jpe?g|png|gif)$/i;
  return regex.test(file.name);
}
function addWorkToGallery(work) {
  //ajout du travail au tableau local
  localImages.push(work);
  
  // Créez un nouvel élément DOM pour le projet
  const newWork = document.createElement('div');
  newWork.classList.add('work'); // Ajoutez la classe 'work' à l'élément

  // Ajoutez l'image du projet
  const newWorkImage = document.createElement('img');
  newWorkImage.src = work.imageUrl; // Utilisez l'URL de l'image renvoyée par le serveur
  newWork.appendChild(newWorkImage);

  // Ajoutez l'icône de la poubelle
  const newTrashIcon = document.createElement('i');
  newTrashIcon.classList.add('fa-trash-can');
  newWork.appendChild(newTrashIcon);

  // Ajoutez le nouveau projet à la galerie
  const gallery = document.querySelector('.gallery');
  gallery.appendChild(newWork);
}

function addWorks() {
  // verification du formulaire et recuperation des champs necessaires uniquement
  formAddWorks.addEventListener("submit", (e) => {
    e.preventDefault();
    // Récupération des Valeurs
    const formData = new FormData(formAddWorks);
    const file = formData.get('image');
    
  // Vérifiez que le fichier est une image
  if (!file || !file.name) {
    console.error('No file selected.');
    return;
}
  if (!validateImageFile(file)) {
    document.getElementById('errormodal').innerHTML = 'Le fichier doit être une image (jpg, jpeg, png, gif)';
    errormodal.style.color = "red";
    return;
  }
    fetch("http://localhost:5678/api/works", {
      method: "POST",
      body: formData,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error("Erreur lors de l'envoi du fichier");
        }
        return response.json();
      })
      .then((data) => {
        addWorkToGallery(data);
        formAddWorks.reset();
        modalPortfolio.style.display = "flex";
        modalAddWorks.style.display = "none";
        previewImage.style.display = "none";
      })
      .catch((error) => {
        console.error("Erreur :", error);
      });
  });
}

-
Edité par MarcVaillain 13 mai 2024 à 22:34:50

Bonjour, Merci de lire les règles du forum AVANT de créer un sujet. Pas d'image de code totalement inutilisable par copier/coller pour tests éventuels.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code </>

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Bonjour

Ça va être difficile de t'aider sans connaitre la structure de la page. Si tu l'as mise en ligne, donne-nous son URL, sinon, poste le code HTML dans ton topic.

P.S. En passant, je t'invite à t'intéresser à element.closest(), qui peut remplacer bien plus efficacement (simplicité et conservation en cas de modif de la structure) element.parentElement.parentElement

-
Edité par Domi65 14 mai 2024 à 17:14:26

Je peux partager le github de mon projet pour pouvoir voir l'ensemble du code oui, actuellement j'ai réussi a faire en sorte que l'image s'ajoute correctement dans la gallerie du site et sur la modale mais maintenant le probleme est dans la poubelle qui n'est pas correctement placée et ne supprime pas l'élément ajouté et quand je recharge la page la poubelle se met correctement sur le nouveau projet et je peux le supprimer.

https://github.com/Axo34080/Portfolio-architecte-sophie-bluel