0

I have a multiple image preview function. Image preview works on first time. But on second time, the image preview gets doubled using jquery append.

Here's my HTML code:

<div class="col-sm-6">
  <div class="file-upload-container">
    <div class="row">

    </div>
    <input type="file" multiple class="d-none" name="files">
    <button type="button" class="upload-file btn btn-primary">Browse Files</button>
  </div>
</div>

<div class="col-sm-6">
  <div class="file-upload-container">
    <div class="row">

    </div>
    <input type="file" multiple class="d-none" name="files">
    <button type="button" class="upload-file btn btn-primary">Browse Files</button>
  </div>
</div>

Here's my Script code:

$('.upload-file').on('click', function() {
$(this).parent().find('input[type="file"]').click();
  $(this).parent().find('input[type="file"]').on('change', function(event) {
    console.log("test");
    var input = this;
    var reader = new FileReader();
    reader.onload = function (e) {
      var imageTemplate = '<div class="col-xs-4">' +
        '<div class="thumbnail">' +
          '<img src="'+e.target.result+'">' +
          '<input type="hidden" name="'+$(input).attr('name')+'[]" value="'+e.target.result+'">' +
        '</div>' +
      '</div>';
      $(input).parent().find('.row').append(imageTemplate);
    }
    reader.readAsDataURL(this.files[0]);
  })
})

Here's the fiddle: https://jsfiddle.net/2wpt74cx/1/

JSN
  • 1,281
  • 3
  • 22
  • 48

1 Answers1

2

Simply because you add change event each time you click on the button .. separate them

// upload-file click event --------------------------
$('.upload-file').on('click', function() {
 $(this).parent().find('input[type="file"]').click();
});
// input file change event --------------------------
$('.upload-file').parent().find('input[type="file"]').on('change', function(event) {
    console.log("test");
    var input = this;
    var reader = new FileReader();
    reader.onload = function (e) {
      var imageTemplate = '<div class="col-xs-4">' +
        '<div class="thumbnail">' +
          '<img src="'+e.target.result+'">' +
          '<input type="hidden" name="'+$(input).attr('name')+'[]" value="'+e.target.result+'">' +
        '</div>' +
      '</div>';
      $(input).parent().find('.row').append(imageTemplate);
    }
    reader.readAsDataURL(this.files[0]);
})
Mohamed-Yousef
  • 23,645
  • 3
  • 18
  • 28
  • Sorry, I changed the html code and the fiddle.. I have that structure (possible multiple section of file upload).. how can I control it? which button was click and which section should I append the images? – JSN Jan 29 '21 at 02:58
  • Okay, you're right.. Thank you for that, onchange will listen which input has changed. Thank you! – JSN Jan 29 '21 at 03:01
  • @JSN You'r totally welcome .. But for `multiple` images you'll need to use `.each()` to loop through the previewed images .. Have a nice day :-) – Mohamed-Yousef Jan 29 '21 at 03:18
  • @JSN to loop through image you can see this [answer here](https://stackoverflow.com/a/39440101/3385827) .. or use `$.each(input.files , function(i , file){ .....code here......})` – Mohamed-Yousef Jan 29 '21 at 03:26
  • Noted that. Have a nice day too! – JSN Jan 29 '21 at 03:26