title: Add image from user computer to canvas
body: <p>i'm working on a web app that allow users to create dynamic slideshow. Currently i've got an issue regardless how to add image from the computer's user to the canvas.
  I'm using a input button to get the file from the computer and it appeal a function who will add the image to the canvas. </p>
  
  <p>So far i've tried different ways to add the image to the canvas as well as this one : <a href="https://stackoverflow.com/questions/6944382/dynamically-add-image-to-canvas">Dynamically add image to canvas</a></p>
  
  <p>But the code showing here doesnt work in my case, because it just draw the image into the canvas but it wont allow it to be draggable and resizable just like the Kitchensink.js demo from Fabricsjs. </p>
  
  <p>I've also try to convert the image into Base64 and use the LoadJSON to convert it back but i encountered this error : </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089
  enlivenObjects fabric.js:2089
  fabric.util.object.extend._enlivenObjects fabric.js:9025
  fabric.util.object.extend.loadFromJSON fabric.js:8953
  sub
  </code></pre>
  
  <p>Sub's refering to the function i've called to add the image. </p>
  
  <p>I've also try this code : </p>
  
  <pre><code>document.getElementById('imgLoader').onchange = function handleImage(e){
  var reader = new FileReader();
  reader.onload = function(event){
  var img = new fabric.Image();
  img.onload = function(){
  img.set({
      left : 250,
      top : 250,
      angle : 20,
        padding: 10,
        cornersize: 10
      });
      image.scale(getRandomNum(0.1, 0.25)).setCoords();
      canvas.add(image);
  }
  img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
  }
  </code></pre>
  
  <p>Which catch these errors : </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358
  fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358
  fabric.Image.fabric.util.createClass._initConfig fabric.js:14334
  fabric.Image.fabric.util.createClass.setElement fabric.js:14127
  fabric.Image.fabric.util.createClass._initElement fabric.js:14322
  fabric.Image.fabric.util.createClass.initialize fabric.js:14097
  (anonymous function) fabric.js:2679
  klass fabric.js:2728
  reader.onload diapo.js:746 
  </code></pre>
  
  <p>I've cleary run out of ideas and only achieved to draw the image but not adding it to the canvas. </p>
  
  <p>All in one i'd like to add an image to my Fabricjs canvas with the same attributes regardless the draggable as the Kitchensink demo. 
  Thanks in advance for your help :)</p>