unable to add photo from iphone to canvas

Question

hopefully this is just my error but i have this working on PC/android devices. When loaded on iOS it doesnt draw images from device to canvas (safari and chrome tested) The chosen image thumbnail is visible next to the file input.

Fabric Version: 1.5.0

Test Case: https://jsfiddle.net/v8jrpnu2/18/

window.addEventListener('load', function onLoad() {
  photo = new fabric.Canvas('photo')
  photo.setWidth(600);
  photo.setHeight(600);
  photo.backgroundColor = '#eee';
  photo.renderAll();

  var upload = function(e) {
      var reader = new FileReader();
      var file    = document.querySelector('input[type=file]').files[0];

      reader.onload = function(e){

        contents = e.target.result;
        var image = new Image();

        image.src = contents;

        var Cimage = new fabric.Image(image);
        photo.add(Cimage);

        photo.renderAll();
      }
      if(file) {
        reader.readAsDataURL(file);
      }
    }

  $('#upload-input').on('change', function(e){
    upload(e);
  });
});

Steps to reproduce

load fiddle on iPhone (tested on iphone 5 and 5C) use file input to select image

Expected Behavior

image renders on canvas

Actual Behavior

image does not render on canvas

Answer 1

Your fiddle didn't worked on my desktop FF either...

The main fix is to wrap your fabric.Image(image) inside the image.onload event handler, otherwise, the image is still empty when Fabric tries to convert it in one of its Image Object.

Aside fixes consist in passing directly the upload handler to the event listener, and to use this.files[0] instead of document.querySelector('...').

Fixed fiddle : https://jsfiddle.net/v8jrpnu2/21/