I'm creating a social media application. I got the image input from the user, but I was stuck in displaying the image.
Here is my HTML file
<form id="form">
<div id="closeForm"><i class="fas fa-window-close"></i></div>
<label>
<p>Enter the title:</p>
<input id="newTitle" placeholder="Art Title" type="text">
</label>
<label>
<p>Select your image:</p>
<input id="newImg" class="imgInput" accept="image/*" type="file">
</label>
<input id = "formBtn" type="button" acc value="Upload">
</form>
This is my JS file
document.getElementById('formBtn').onclick=()=>{
let newTitle = document.getElementById('newTitle').value;
let newImg = document.getElementById('newImg').value;
let fragment = `
<img class="art_img" src="${newImg}" alt="" srcset="">
<p id="title">${newTitle}</p>`;
artContainer.innerHTML+=fragment;
}
Use the FileReader object to create a blob and attach it to the element.
Example:
const reader = new FileReader();
reader.onload = (e) => {
imgElm.src = e.target.result;
};
// do some checks to make sure its not empty
reader.readAsDataURL(input.files[0]);