the problem is that I’m trying to pass an image file in a formdata object to my server, but as a result of this; the webpage keeps reloading. I’ve tried using preventdefault but it doesn’t work in an onchange event.
Here is my HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/image_uploader.css">
<link rel="icon" href="img/devchallenges.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
<title>Image-Uploader</title>
</head>
<body>
<div id="main">
<div class="box">
<span id="upload"> Upload your image </span><br>
<span id="file">File should be jpeg, png...</span> <br>
<div id="overlay"></div>
<span id="drag">
<span id="drag2">
<img src="img/image.svg" alt="image icon">
Drag & Drop your image here</span>
</span> <br>
<span id="or">Or</span>
<form action="" id="form">
<input type="file" accept="image/*" name="image" id="filed" onload="loadfile()" style="display: none;" >
</form>
<label id="choose" for="filed">Choose a file</label>
<div id="input"></div>
<button id="label" type="submit" for="input">Copy</button>
</div>
<div class="message">
Image uploaded successfully.
<button onclick="func1()" class="okay">Okay</button>
</div>
<!-- Progress bar -->
<div id="prog">
<label id="prog-label" for="progress-bar">0%</label>
<progress id="progress-bar" value="0" max="100"></progress>
</div>
<footer> Philip Joe Yakubu</footer>
</div>
const dropArea = document.querySelector("#drag");
const dragText = document.querySelector("#drag2");
const hide = document.getElementById("prog")
const overlay = document.getElementById('overlay');
const message = document.querySelector(".message");
const form = document.getElementById('form');
const bar = document.getElementById('progress-bar');
let button = document.querySelector("#choose");
let input = document.querySelector("#filed");
var copyButton = document.querySelector("#label");
var inp = document.getElementById("input");
let file;
input.addEventListener("change", function (e) {
e.preventDefault();
hide.style.display = "flex";
file = input.files[0];
dropArea.classList.add("active");
console.log("successful1")
console.log("it's successful");
inp.innerHTML = " " + URL.createObjectURL(file) + " ";
console.log("no problem so far")
console.log(URL.createObjectURL(file))
document.getElementById("label").addEventListener("click", function() {
var copyText = URL.createObjectURL(file);
navigator.clipboard.writeText(copyText)
.then(function() {
alert("Text copied to clipboard: " + copyText);
})
.catch(function(error) {
alert("Failed to copy text: " + error);
});
});
// Create a new FormData instance
var formData = new FormData();
// Append the file to the FormData
formData.append("image", file);
// Axios
const config = {
onUploadProgress: function(progressEvent) {
progressEvent.preventDefault();
const percentCompleted = Math.round((progressEvent.loaded / progressEvent.total)*100);
bar.setAttribute('value', percentCompleted);
bar.previousElementSibling.textContent = `${percentCompleted}%`
if (percentCompleted === 100) {
setTimeout(() => {
document.getElementById("prog").style.display = "none";
displayFile();
overlay.style.display = 'block';
message.style.display = "grid"
}, 100);
inp.style.display = "flex";
copyButton.style.display = "flex";
}
// adjust the delay time as needed
}
}
console.log(file);
axios.post('http://localhost:7777/upload', formData, config)
.then(res => {
console.log("Upload successful:", res);
console.log(res.data);
})
.catch(err => {
console.log(file);
console.error("Error uploading image:", err);
});
});
I tried passing the file in the input as a constant itself
const file = input.files[0];
axios.post('http://localhost:7777/upload', file, config)
.then(res => {
console.log("Upload successful:", res);
console.log(res.data);
})
.catch(err => {
console.log(file);
console.error("Error uploading image:", err);
});
but it seems my axios HTTPrequest will only accept multipart/formdata requests.