Image Preview Opens For Duplicated Div

I have a function that uploads and image and adds a preview to this image, and i have two buttons, when i click on the first one it clicks on the input type file and opens it, and

Solution 1:

Duplication the element and the script together will be helpful check this i got it working as you want (took me a good time)

var i = 0;
$('#inputfile' + i).change(function() {
  console.log(i);
  if (this.files && this.files[0]) {
    var reader = newFileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
  }
});


functionimageIsLoaded(e) {

  console.log(i);
  $('#ImgUpload' + i).attr('src', e.target.result);
};

functionupload(id) {
  $('#' + id).click();
};

$('#duplicate').click(function() {
  i++;
  var newelement =

    '<br><div class="uploader">' +
    '<button type="button" class="uploadimg" onclick="upload(\'inputfile' + i + '\')">Open uploader</button>' +
    '<input type="file" id="inputfile' + i + '" >' +
    '<img id="ImgUpload' + i + '" alt="Your Image" />' +
    '<br><br>' +
    '<script>$(\'#inputfile' + i + '\').change(function() { ' +
    'console.log(i);' +
    'if (this.files && this.files[0]) {' +
    'var reader = new FileReader();' +
    'reader.onload = imageIsLoaded;' +
    'reader.readAsDataURL(this.files[0]);' +
    '}' +
    '});</sc'+'ript></div>';
  $(newelement).insertBefore("#duplicate");

});

input {
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="uploader"><buttontype="button"onclick="upload('inputfile0')">Open uploader</button><inputtype="file"id="inputfile0"><imgid="ImgUpload0"alt="Your Image" /><br><br></div><buttontype="button"id="duplicate">Duplicate button</button>

Solution 2:

One common problem I see with this file previews are that most of them are unable to correctly render jpg's rotated with exif orientation

The second thing is that it's better to use URL.createObjectURL rather then using a base64 dataURL. That also raises an other issue and that is that most developers forget to revoked objectURL's

That is why i have created Screw-FileReader so you can easily call blob.image() and get a image back with a object url that is automatically revoked and also has a exif auto-rotation built in using canvas.

var $file = $('#filepicker').on('change', preview);

$('.uploader button').click(function() {
  $file.click()
})

functionpreview(evt) {
  var preview = document.querySelector('.preview')
  
  Array.from(this.files).forEach(function(file) {
    file.image().then(function(img) {
      preview.appendChild(img)
    }, function() {
      // err not an image...
    })
  })
}

input {
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script><divclass="uploader"><buttontype="button">Open uploader</button><inputid="filepicker"type="file"multipleaccept="image/*"><divclass="preview"></div></div>

the third thing i notis with Soltani Neji answer was that when you click dublicate button before the first upload button it dose unexpected things. it don't keep track of the index so well.

Now to my suggestions: Use the multiple attribute instead and just have one button to make it simpler. it also helps to add the accept="image/*" to filter out only images

Solution 3:

you can append the element instead of duplicating it. you can change the classes and ids using variables.

$('.duplicate').click(function() {
  var newClass="new-class";
  var toAppendElement = '<div class="uploader">' +
    '<button type="button" class="uploadimg '+newClass+'">Open uploader</button>' +
    '<input type="file">' +
    '<img id="ImgUpload" alt="Your Image" />' +
    '<br><br></div>';
  $(".cloned").append(toAppendElement);
})

http://jsfiddle.net/8h3gcyhz/