iOS 8.3 Safari crashes on input type=file

1.4k views Asked by At

Specifically for Safari, when 'take a photo or video' is used for my 'input=file accept='image/*'', it will crash the browser/web-page sometimes (most times). This is a huge problem due to the fact that there are 7 image inputs that need to be filled. It is very frustrating for users to have to keep trying over and over again. Disabling photo-taking for file inputs is not an option.

I've tried resizing the image using canvas and turning that into a blob. The weirdest thing is that it will work 100% for front-facing every time, but the rear facing camera is intermittent. Most of the users use rear facing cameras. The only conclusion I can make is that it's a problem with IOS 8.3 (or period).

Works perfectly on Chrome for IOS, Android, and even Windows Phone. Are there any work-arounds for this at all?

- Updated with Safari Crash Log 6/5/2015

Code Sample (using ng-file-upload)

JADE label.upload(id='img_upload_{{$index}}' accept='image/*;capture=camera', ngf-select, ng-model='r.file', ngf-change='initPhoto($files, $event, $index)') Click to Select Upload

JAVASCRIPT

$scope.initPhoto = function(files, event, index){
  if(files.length){
    var file = (event.srcElement || event.target).files[0];
    var options = {canvas: true};

  loadImage.parseMetaData(file, function (data) {

    //DOES IT CONTAIN EXIF ORIENTATION DATA?
    if (data.exif) {
      options.orientation = data.exif.get('Orientation');
    }

      //LOAD IMAGE INTO $myPreview and $myFile
      loadImage(file, function (img) {
        img = resizePhoto(img);
        file = {};

          img.toBlob(function (blob) {

            $scope.$apply(function () {
              $scope.photoRecords[index].photo = blob;
              $scope.photoRecords[index].file = img.toDataURL();
            });

          }, 'image/jpeg');


      }, options);


  });
 }
};

function resizePhoto(img){
  var MAX_WIDTH = 1632;
  var MAX_HEIGHT = 1224;
  var width = img.width;
  var height = img.height;
  var canvas = document.createElement('canvas');

  if (width > height) {
    if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width;
      width = MAX_WIDTH;
    }
  } else {
    if (height > MAX_HEIGHT) {
     width *= MAX_HEIGHT / height;
     height = MAX_HEIGHT;
    }
  }
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);

  return canvas;
}

SAFARI CRASH LOG

Incident Identifier: 429DC524-8B3E-4E0F-9A02-A119239A9D17
CrashReporter Key:   0f890a17d3c01d0dc653fa891ba132f8030c9a06
Hardware Model:      iPhone7,1
Process:             MobileSafari [14647]
Path:                /Applications/MobileSafari.app/MobileSafari
Identifier:          com.apple.mobilesafari
Version:             600.1.4 (8.0)
Code Type:           ARM-64 (Native)
Parent Process:      launchd [1]

Date/Time:           2015-06-05 11:11:14.449 -0500
Launch Time:         2015-06-05 10:49:45.740 -0500
OS Version:          iOS 8.3 (12F70)
Report Version:      105

Exception Type:  EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x0000000000000028
Triggered by Thread:  0
0

There are 0 answers