I am making a form where I need to uplaod images where I can change the uploaded image until I submit the form
function previewImage() {
var thisElement = event.target
var file = thisElement.files;
var fileReader = new FileReader();
fileReader.onload = function(event) {
thisElement.nextElementSibling.setAttribute("src", event.target.result);
}
thisElement.style.display = 'none';
fileReader.readAsDataURL(file[0])
};<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<img id="display1"><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<img id="display2"><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<img id="display3"><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<img id="display4"><br>I want to change the uploaded file but I can't do so once I uploaded the file.
Just remove this line that is hiding your file input once a file has been selected :
thisElement.style.display = 'none';
I would do this by:
<label> for the relevant inputnextElementSibling.querySelector("img")fileReader.readAsDataURL(file[0]) in an if to avoid an error when the user cancels file selection.That way you can click the image to change it after the first time it is set.
function previewImage() {
var thisElement = event.target
var file = thisElement.files;
var fileReader = new FileReader();
fileReader.onload = function(event) {
thisElement.nextElementSibling.querySelector("img").setAttribute("src", event.target.result);
}
thisElement.style.display = 'none';
if (file.length) {
fileReader.readAsDataURL(file[0])
}
};<input type="file" id="file1" accept="image/*" onchange="previewImage();">
<label for="file1"><img id="display1"></label><br>
<input type="file" id="file2" accept="image/*" onchange="previewImage();">
<label for="file2"><img id="display2"></label><br>
<input type="file" id="file3" accept="image/*" onchange="previewImage();">
<label for="file3"><img id="display3"></label><br>
<input type="file" id="file4" accept="image/*" onchange="previewImage();">
<label for="file4"><img id="display4"></label><br>