Home Trouble loading upload image previews, Angular 1.5.8 on IOS 11 Safari
Reply: 0

Trouble loading upload image previews, Angular 1.5.8 on IOS 11 Safari

AggravatedDeveloper
1#
AggravatedDeveloper Published in 2017-12-07 19:55:28Z

OK, weird error. This code works in browsers and in Safari on IOS 10 and previous.

I've got a page where we're building an item to submit to our DB, and this item is made up of multiple line items have images arrays that store images per line item. When the file is uploaded (using ng-file-upload), we analyze the file to make sure it matches some size and type restrictions and then stuff it in an array, at which point there is another control on the page that gives the user an image preview of the item and a button to remove the image if they no longer want to upload it.

HTML:

<div ng-repeat="item in items">
  <div class="row">
    <div class="col-xs-12 col-md-2">
      <div class="form-group">
        <div class="btn btn-default" ngf-select ngf-change="UploadFile(item, $file)" ngf-multiple="false">Upload Image</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <ul class="thumbnail-list">
        <li class="image-thumbnail" ng-repeat="image in item.images">
          <span ng-click='removeImage(image, item, $index)' class='remove'>X</span>
          <img ngf-src="image.file" ngf-no-object-url="true" ngf-accept="'image/*'">
        </li>
      </ul>
    </div>
  </div>
</div>

JS Controller code:

$scope.fileReader = new FileReader();
$scope.fileReader.onload = function () {
  $scope.CurrentItem.images[$scope.CurrentItem.images.length - 1].base64 = this.result;          
  $scope.selectedImage.base64 = this.result;
};

$scope.UploadFile = function (item, file) {
  if (file != null && file != "") {
    $scope.error = '';
    $scope.CurrentItem = item;

    // Validation Logic here removed
    if (valid) {
      $scope.selectedImage = {};
      $scope.selectedImage = {
        'size': file.size,
        'type': file.type,
        'name': file.name,
        'file': file
      };
      $scope.CurrentItem.images.push($scope.selectedImage);
      $scope.fileReader.readAsDataURL(file);

    } else {
      // Handle Validation Failure
    }
  }
}

On IOS 11, the image is successfully added to the array, an element for the image added to the page, and the red X for the delete operation is positioned correctly on it. However, the actual image preview does not appear. However, if you change the orientation of the iPad from Portrait to Landscape or vice versa, it seems like some refresh is invoked on orientation change and the image preview fills in.

On IOS 10 and below, as well as on desktop browsers (including Safari 11 on OSX), this just renders the image out at the same time as the element is added to the page as intended.

Anyone have any ideas?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.297296 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO