I am trying to implement image upload to a project but Chrome inspector says that the file cannot be found. The HTML seems okay. Not too sure about the CSS and Javascript. Is this some sort of security measure/firewall issue? I'm using a Mac if that helps.
const image_input = document.querySelector("#image_input");
var uploaded_image = "";
image_input.addEventListener("change", function() {
const reader = new FileReader();
reader.addEventListener("load", () => {
uploaded_image = reader.result;
document.querySelector("#display_image").style.backgroundImage = 'url(${uploaded_image})'
});
reader.readAsDataURL(this.files[0]);
})body {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
height: 100vh;
}
#display_image {
width: 375px;
height: 211px;
border: 1px solid black;
background-position: center;
background-size: cover;
}<input type="file" id="image_input" accepts="image/png, image/jpg">
<div id="display_image"></div>