I'm trying to show a progress bar when I'm uploading a file. but when I use XMLHttpRequest upload progress eventListener it doesn't work and return these errors in the console => "Access to XMLHttpRequest at 'server address' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." And "POST http://serveraddress:/ net::ERR_FAILED". I have tried some ways but I have no idea why this happens. I will thank you if you tell me what can I do... Here is my javascript code:
var oOutput = document.getElementsByClassName("file-result")[0],
oData = new FormData(form);
oData.append("action", "6");
oData.append("adminID", checkCookie().toString());
var oReq = new XMLHttpRequest();
oReq.open("POST", "serveraddress", true);
oReq.upload.addEventListener("progress", function(event) {
let percent = (event.loaded / event.total * 100);
document.getElementsByClassName("insider-bar")[0].style.width = percent + '%';
document.getElementById('progress-percent').innerHTML = percent + '%';
console.log(event.total);
});
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none";
if (fileCounter == 0) {
coverLink = oReq.responseText;
} else {
if (oReq.responseText.indexOf(".mp4") == -1)
imageFilesLink.push(oReq.responseText);
else
videoFilesLink.push(oReq.responseText);
let fileDiv = document.createElement("div");
fileDiv.className += "files ".concat(oReq.responseText);
fileDiv.innerHTML = '<i class=\"fa fa-link\"></i>';
fileDiv.setAttribute("onclick", 'setClipboard("server-address' + oReq.responseText + '")');
fileDiv.setAttribute("ondblclick", 'showPictures("serveraddress' + oReq.responseText + '")');
document.getElementById("file-result").appendChild(fileDiv);
}
fileCounter++;
} else {
document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none";
}
};
oReq.send(oData);
ev.preventDefault();<div class="progressbar-wrapper">
<div class="upload-progress">
<div class="insider-bar"></div>
</div>
<p id="progress-percent">0%</p>
</div>You can find another way in this address:
https://attacomsian.com/blog/xhr-monitor-progress
xhr.onprogress = (event) => {
console.log(Downloaded ${event.loaded} of ${event.total} bytes);
}