Kinetics User Upload An Image

I have a kineticjs box with text input and an 'onLoad' image (Yoda). I need to implement this 'imageLoader' (Fiddle) I have this from a canvas I put together but cant get it into m

Solution 1:

Just adapting the code from that "imageLoader" fiddle to create a new Kinetic.Image and add it to the layer instead of drawing straight to a canvas context.

//image loadervar imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

functionhandleImage(e){
    var reader = newFileReader();
    reader.onload = function(event){
        var img = newImage();
        img.onload = function(){
            layer.add(newKinetic.Image({
                x: 200,
                y: 50,
                image: img,
                width: img.width,
                height: img.height,
                draggable: true
            }));
            text.moveToTop();
            layer.draw();
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

Fiddle: http://jsfiddle.net/pDW34/14/