Materialboxed does not work with data:image/png; base64

Question

I am using materializecss v0.100.1, I have problems with the class 'materialboxed'. I am loading the images from an "input file multiple" to an Array of files, then I walk with the array a $.each and I add it to a div with the class 'collection'.

I can visualize the images but when I click on the image the 'materialboxed' class does not work. I have already initialized it with $('.materialboxed').materialbox() .I need to click on the thumbnail image to be displayed on the entire screen. Thank you.

$('#collection').empty();
$.each(files, function(k, v) {
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
      var algo = "<li class=\"collection-item avatar\"><img src=\"" + e.target.result + "\" alt=\"imagen\" class=\"circle\"/><span class=\"title truncate\">" + theFile.name + "</span><p>" + typeOfFile(theFile.type) + "<br/>" + (bytesToSize(theFile.size)) + "</p><a onclick=\"removeFile(" + theFile + ")\" class=\"secondary-content\"><i class=\"material-icons\">delete</i></a></li>";
      $('#collection').append(algo);
      $('#collection').find('img').addClass('materialboxed');
    };
  })(v);

  reader.readAsDataURL(v);

});

Answer 1

Was struggling with this problem as well, the issue was that even if you call $('.materialboxed').materialbox() after reader.readAsDataURL(v); in the loop the image wasn't loaded in already. To force this to only run after the image has loaded I added the following after reader.readAsDataURL(v);

reader.onloadend = function () {
  $('.materialboxed').materialbox();
};