Image preview error

on my site I have


o I can review 3 images before upload
Heres the form

<form action="add_floors_engine.php" method="POST" enctype="multipart/form-data">
								<div class="card-group mb-3">
									<div class="card">
										<div class="card-body">
										  <h3 class="card-title">Floor #1</h3>
										  <hr>
											<div class="mb-3">			 
											  <label for="customFile1" class="form-label">Floorplan (image)</label>
											  <input class="form-control" type="file" id="customFile1" name="Floorplan1" accept="image/png">
											</div>
											<div class="mb-3">			 
												<div class="Image_Container" id="Image_Preview_Container1">
												  <img src="" alt="Image Preview" class="Image_Preview1">
												  <span class="Image_Preview_Default_Text1">Image Preview</span>
												</div>
											</div>	
										</div>
									</div>
									<div class="card">
										<div class="card-body">
										  <h3 class="card-title">Floor #2</h3>
										  <hr>
											<div class="mb-3">			 
											  <label for="customFile2" class="form-label">Floorplan (image)</label>
											  <input class="form-control" type="file" id="customFile2" name="Floorplan2" accept="image/png">
											</div>
											<div class="mb-3">			 
												<div class="Image_Container" id="Image_Preview_Container2">
												  <img src="" alt="Image Preview" class="Image_Preview2">
												  <span class="Image_Preview_Default_Text2">Image Preview</span>
												</div>
											</div>	
										</div>
									</div>
									<div class="card">
										<div class="card-body">
										  <h3 class="card-title">Floor #3</h3>
										  <hr>
											<div class="mb-3">			 
											  <label for="customFile3" class="form-label">Floorplan (image)</label>
											  <input class="form-control" type="file" id="customFile3" name="Floorplan3" accept="image/png">
											</div>
											<div class="mb-3">			 
												<div class="Image_Container" id="Image_Preview_Container3">
												  <img src="" alt="Image Preview" class="Image_Preview3">
												  <span class="Image_Preview_Default_Text3">Image Preview</span>
												</div>
											</div>	
										</div>
									</div>
								</div>
								<div class="mb-3">
									<div class="d-grid">
										<button class="btn btn-outline-dark btn-lg" type="submit"><span class="icon-ok"></span>&nbsp;&nbsp;Submit</button>
									</div>
								</div>				
								<input type="hidden" value="3" name="building_id">
								<input type="hidden" value="2" name="site_id">
								<input type="hidden" value="1" name="location_id">
								<input type="hidden" value="location" name="page">
								</form>

The script

<script>

var inpfile = document.getElementById("customFile1");
var previewContainer = document.getElementById("Image_Preview_Container1");
var previewImage = previewContainer.querySelector(".Image_Preview1");
var previewImageText = previewContainer.querySelector(".Image_Preview_Default_Text1");

inpfile.addEventListener("change", function() {
	previewImage.setAttribute("src", this.result);
	var file = this.files[0];
	
	if(file) {
		var reader = new FileReader();
		
		previewImageText.style.display = "none";
		previewImage.style.display = "block";
		
		reader.addEventListener("load", function() {
			previewImage.setAttribute("src", this.result);
	});	
			
	reader.readAsDataURL(file);
	
	} else {
		previewImageText.style.display = null;
		previewImage.style.display = null;
		previewImage.setAttribute("src", '');
		
	}
});

var inpfile = document.getElementById("customFile2");
var previewContainer = document.getElementById("Image_Preview_Container2");
var previewImage = previewContainer.querySelector(".Image_Preview2");
var previewImageText = previewContainer.querySelector(".Image_Preview_Default_Text2");

inpfile.addEventListener("change", function() {
	previewImage.setAttribute("src", this.result);
	var file = this.files[0];
	
	if(file) {
		var reader = new FileReader();
		
		previewImageText.style.display = "none";
		previewImage.style.display = "block";
		
		reader.addEventListener("load", function() {
			previewImage.setAttribute("src", this.result);
	});	
			
	reader.readAsDataURL(file);
	
	} else {
		previewImageText.style.display = null;
		previewImage.style.display = null;
		previewImage.setAttribute("src", '');
		
	}
});

var inpfile = document.getElementById("customFile3");
var previewContainer = document.getElementById("Image_Preview_Container3");
var previewImage = previewContainer.querySelector(".Image_Preview3");
var previewImageText = previewContainer.querySelector(".Image_Preview_Default_Text3");

inpfile.addEventListener("change", function() {
	previewImage.setAttribute("src", this.result);
	var file = this.files[0];
	
	if(file) {
		var reader = new FileReader();
		
		previewImageText.style.display = "none";
		previewImage.style.display = "block";
		
		reader.addEventListener("load", function() {
			previewImage.setAttribute("src", this.result);
	});	
			
	reader.readAsDataURL(file);
	
	} else {
		previewImageText.style.display = null;
		previewImage.style.display = null;
		previewImage.setAttribute("src", '');
		
	}
});
</script>

the result when I try and upload an image to floor 1


Shouldnt the preview be 2 to the left?

At a rough guess Iā€™d say its because you copied the same JS code for all three items and used the same variable names for each and so only the last one means anything as you have overwritten all the others.

If you rename all the variables in the second example it works.

var inpfile2 = document.getElementById("customFile2");
var previewContainer2 = document.getElementById("Image_Preview_Container2");
var previewImage2 = previewContainer2.querySelector(".Image_Preview2");
var previewImageText2 = previewContainer2.querySelector(
  ".Image_Preview_Default_Text2"
);

inpfile2.addEventListener("change", function () {
  previewImage2.setAttribute("src", this.result);
  var file2 = this.files[0];

  if (file2) {
    var reader2 = new FileReader();

    previewImageText2.style.display = "none";
    previewImage2.style.display = "block";

    reader2.addEventListener("load", function () {
      previewImage2.setAttribute("src", this.result);
    });

    reader2.readAsDataURL(file2);
  } else {
    previewImageText2.style.display = null;
    previewImage2.style.display = null;
    previewImage2.setAttribute("src", "");
  }
});

You would then need to do the same for the third block.

Note this is not a very good way to do this so hopefully one of the js gurus will pop by and show you how to do this in a simple loop rather than writing the same code 3 times :slight_smile:

This JavaScript seems to work:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.