Page qui se recharge anormalement après un fetch
Bonjour à tous !
J'ai une page html qui contient 2 inputs non déclarés dans un formulaire (aucun formulaire dans la page). J'ai également un bouton déclaré sous forme de div.
Un addEventListener me permet d'appeler une fonction au clic sur le bouton.
Voici le contenu du fichier 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
| const bigFile = document.getElementById('bigFile').files[0]; // Le 1er input
const smallFile = document.getElementById('smallFile').files[0]; // Le 2e input
const button = document.getElementById('button'); // Le bouton
button.addEventListener('click', (e) => {
e.preventDefault();
ajout();
})
function ajout() {
if (bigFile || smallFile) {
if (!bigFile) {
alert('Vous devez charger 2 fichiers image');
}
if (!smallFile) {
alert('Vous devez charger 2 fichiers image');
}
const fdata = new FormData();
fdata.append('imageUrlBig', bigFile);
fdata.append('imageUrlSmall', smallFile);
console.log(fdata);
const head3 = {
method: 'POST',
body: fdata,
headers: {'Authorization': `Bearer ${sessionStorage.token}`}
}
fetch('http://localhost:4000/api/caroussel/', head3)
.then(reponse => {
if (reponse.status == 201) {
alert('Nouvelles images ajoutées avec succès !')
}
else {
return reponse.json({message: "ça ne fonctionne pas"});
}
})
.catch(e => {
console.log("ça n'a pas marché...")
})
}
} |
Ce qui se passe c'est qu'au clic, le fetch s'exécute bien (le back reçoit bien les fichiers) mais la page se recharge avant d'afficher l'alert et le fetch semble être re-exécuté car la console affiche "ça n'a pas marché..." après rechargement. Pourtant côté back je n'ai aucune erreur, tout a fonctionné correctement.
Comme vous pouvez le voir j'ai mis un e.preventDefault() sur le listener mais ça ne change rien.
Vous avez une idée de ce qui se passe ?
Merci d'avance pour votre aide !
