0

so I have this input file and every time the file input change it sends the file data to a function

$('input#fileinput').change(function(e){
    var tgt = e.target || window.event.srcElement,
    files = tgt.files;

    renderImage(files);
});

function renderImage(files){

    return new Promise((resolve, reject) => {
        var fr = new FileReader();  
        fr.onload = function(){
            $('#image-editor-wrapper img').remove();
            $('#image-editor-wrapper').append('<img id="img-raw" src="'+fr.result+'" style="position:absolute;visibility:hidden;z-index:99999"><canvas id="canvas-raw"></div>');
            $('#crop-border').css('visibility','visible');


            var c = document.getElementById("canvas-raw");
            var ctx = c.getContext("2d");
            var img = document.getElementById("img-raw");

            document.querySelector('#canvas-raw').setAttribute('width',img.naturalWidth);
            document.querySelector('#canvas-raw').setAttribute('height',img.naturalHeight);

            ctx.drawImage(img, 10, 10);
        }
        fr.readAsDataURL(files[0]);
      });
}

but its not working, like no image shown at all. Any help, ideas please?

Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
  • You have to wait for the image has loaded before being able to do anything with it, even from a dataURL. Also note that you don't need a FileReader here, renderImage(files){ src= URL.createObjectURL(files[0])` will be both synchronous and take less memory than the FileReader. – Kaiido Oct 17 '18 at 06:06
  • @LGSon we see it's not loaded yet: `img` is the element generated by `$('#image-editor-wrapper').append(' – Kaiido Oct 17 '18 at 06:09

0 Answers0