I am using ajax to upload a file to the server and generate a url for a specific purpose. But whenever the file upload is successful, the page reloads automatically. Even the console shows "File uploaded" for a second and then reloads. Can someone help me sort this problem. Here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut ico n" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InShare - File Sharing Made Easy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="./logo.png" alt="Inshare logo" class="logo">
<section class="upload-container">
<form action="">
<div class="drop-zone">
<div class="icon-container">
<img src="file.svg" draggable="false" class="center" alt="File Icon">
<img src="file.svg" draggable="false" class="left" alt="File Icon">
<img src="file.svg" draggable="false" class="right" alt="File Icon">
</div>
<input type="file" id="fileInput">
<div class="title">Drop your Files here or, <span id="browseBtn">browse</span></div>
</div>
</form>
<div class="progress-container">
<div class="bg-progress"></div>
<div class="inner-container">
<div class="status">Uploading...</div>
<div class="percent-container">
<span class="percentage" id="progressPercent">0</span>%
</div>
<div class="progress-bar"></div>
</div>
</div>
<div class="sharing-container">
<p class="expire">Link expires in 24 hrs</p>
<div class="input-container">
<input type="text" id="fileURL" readonly>
<img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon">
</div>
<p class="email-info">Or Send via Email</p>
<div class="email-container">
<form id="emailForm">
<div class="filed">
<label for="fromEmail">Your email</label>
<input type="email" autocomplete="email" required name="from-email" id="fromEmail">
</div>
<div class="filed">
<label for="toEmail">Receiver's email</label>
<input type="email" required autocomplete="receiver" name="to-email" id="toEmail">
</div>
<div class="send-btn-container">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
<div class="image-vector"></div>
<div class="toast">Sample message</div>
<script src="index.js"></script>
</body>
</html>
Here is the ajax section of javascript code:
const uploadFile = () => {
console.log("file added uploading");
files = fileInput.files;
const formData = new FormData();
formData.append("myfile", files[0]);
//show the uploader
progressContainer.style.display = "block";
// upload file
const xhr = new XMLHttpRequest();
xhr.open("POST", uploadURL);
xhr.send(formData);
// listen for response which will give the link
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
onFileUploadSuccess(xhr.responseText);
}
};
};
const onFileUploadSuccess = (res) => {
fileInput.value = ""; // reset the input
console.log("Uploaded");
// remove the disabled attribute from form btn & make text send
emailForm[2].removeAttribute("disabled");
emailForm[2].innerText = "Send";
progressContainer.style.display = "none"; // hide the box
const { file: url } = JSON.parse(res);
console.log(url);
sharingContainer.style.display = "block";
fileURL.value = url;
};
Even e.preventDefault() has been used to prevent page reload. But still it does. Can someone help me solve this. Thank you in advance..