Not working on Safari 13

[manduriomane]

Hi,

ngx-image-cropper not working on Safari 13.

When I select a file from file input, I receive this error:

TypeError: file.arrayBuffer is not a function. (In 'file.arrayBuffer()', 'file.arrayBuffer()' is undefined)

This is my HTML code:

<input type="file" (change)="fileChangeEvent($event)" accept="image/*">

<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" output="base64"
          [containWithinAspectRatio]="containWithinAspectRatio" [aspectRatio]="imgAspectRatio"
          [resizeToWidth]="imgResizeToWidth" [cropperMinWidth]="imgCropperMinWidth" [onlyScaleDown]="true"
          [roundCropper]="false" [canvasRotation]="canvasRotation" [transform]="transform" [alignImage]="'left'"
          [style.display]="showCropper ? null : 'none'" format="png" (imageCropped)="imageCropped($event)"
          (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady($event)" (loadImageFailed)="loadImageFailed()">
        </image-cropper>

Ts code:

imageChangedEvent: any = '';

fileChangeEvent(event: any): void {
    if (event.target.files.length) {
      this.imageChangedEvent = event;
       this.cdRef.detectChanges();
    }
  }

How I can solve this problem?

Thanks a lot

[manduriomane]

Hi,

I added this patch and now it works:

using FileReader
(function () {
    File.prototype.arrayBuffer = File.prototype.arrayBuffer || myArrayBuffer;
    Blob.prototype.arrayBuffer = Blob.prototype.arrayBuffer || myArrayBuffer;
    function myArrayBuffer() {
        // this: File or Blob
        return new Promise((resolve) => {
            let fr = new FileReader();
            fr.onload = () => {
                resolve(fr.result);
            };
            fr.readAsArrayBuffer(this);
        })
    }
})();

[Mawi137]

Hi

Thanks, I'll see if I can add this to the lib as well so Safari 13 is still supported.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.