I am calling the fetch api call on a onclick event of the submit button after upload change event is performed… I observed that the fetch is not working every alternate hit but the function loadperson( in which fetch is called) is working as the alert in it is showing.
on every alternate hit it sends the payload as expected.
also while running in debug mode its running fine on every hit and payload is being sent perfectly.
is there any reasonsolution to the scenario.
for example :–
first run -no api hit….. second payload – api hit sucessfull …..third run -no api hit….. fourth payload – api hit sucessfull
<!DOCTYPE html>
<html lang="en">
<head>
<title>File upload</title>
</head>
<body>
<form id="Form">
<input type="file" />
<button type="submit" id="smtbtn" onclick = "hj()" >Submit</button>
</form>
<script>
var base64;
function loadPersons(a) {
//alert("submit started");
fetch("http://localhost:8081/api", {
mode: "no-cors",
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"data": a
})
});
alert("submit successful.");
};
function hj() {
loadPersons(base64)
};
const fileInput = document.querySelector("input");
fileInput.addEventListener("change", (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onloadend = () => {
console.log(reader.result);
base64 = reader.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>