Javascript FileReader() image preview gets doubled every choose

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/

82 thoughts on “Javascript FileReader() image preview gets doubled every choose”

  1. 15120 468657It is a shame you dont have a donate button! Id without a doubt donate to this brilliant blog! I suppose for now ill settle for book-marking and adding your RSS feed to my Google account. I appear forward to fresh updates and will share this blog with my Facebook group. Chat soon! 527296

    Reply
  2. Hi there, i read your blog occasionally and i own a
    similar one and i was just curious if you get a lot of spam comments?
    If so how do you protect against it, any plugin or anything you
    can suggest? I get so much lately it’s driving me insane so any help is very much appreciated.

    Reply
  3. What’s Taking place i’m new to this, I stumbled upon this I have discovered It absolutely useful and it
    has helped me out loads. I hope to contribute & help different customers
    like its helped me. Good job.

    Reply
  4. I am extremely inspired together with your writing skills as smartly as with the format for your
    weblog. Is that this a paid subject matter
    or did you customize it your self? Either way stay up the excellent quality writing,
    it’s uncommon to see a great weblog like this one nowadays..

    Reply
  5. I am not sure where you are getting your info, but good topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for great info I was looking for this information for my mission.

    Reply
  6. Hello! Someone in my Myspace group shared this website with us so I came to give it a look.
    I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!

    Excellent blog and superb design and style.

    Reply
  7. Excellent post. I was checking continuously this weblog and I am impressed!
    Very helpful info specially the closing part 🙂 I handle such info a lot.
    I used to be looking for this particular info for a very lengthy
    time. Thank you and good luck.

    Reply
  8. Great weblog here! Additionally your website lots up fast!
    What web host are you the use of? Can I get your affiliate hyperlink for your host?
    I desire my site loaded up as quickly as yours lol

    Reply
  9. Excellent pieces. Keep posting such kind of information on your
    blog. Im really impressed by your site.
    Hey there, You’ve done a great job. I will definitely
    digg it and in my view recommend to my friends. I
    am confident they will be benefited from this site.

    Reply
  10. Howdy! I could have sworn I’ve visited this website before but after browsing through a few of the posts I realized it’s new to me.
    Nonetheless, I’m certainly pleased I discovered it and I’ll
    be bookmarking it and checking back regularly!

    Reply
  11. Hi would you mind letting me know which web host you’re working with?

    I’ve loaded your blog in 3 completely different web browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good internet hosting provider at a
    reasonable price? Thanks a lot, I appreciate it!

    Reply
  12. Today, I went to the beachfront with my kids. I found a sea
    shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She
    put the shell to her ear and screamed. There was a hermit crab inside and it pinched
    her ear. She never wants to go back! LoL I know this is completely off topic but I had
    to tell someone!

    Reply
  13. Hi, I do believe this is a great web site. I stumbledupon it 😉 I may revisit yet again since
    I book-marked it. Money and freedom is the greatest way to
    change, may you be rich and continue to guide other
    people.

    Reply