From cfd42818b74cfe5cb0ef9542fc2b570d25d317ee Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 28 Sep 2018 14:44:59 +0100
Subject: [PATCH] Edge file constructor fix (#180)

* Hacking around lack of `new File` in Edge.

* Less hacky solution - preserves types
---
 src/components/App/index.tsx       | 11 ++++++-----
 src/components/App/result-cache.ts |  4 ++--
 src/components/Options/index.tsx   |  4 ++--
 src/components/Output/index.tsx    |  1 +
 src/lib/util.ts                    |  8 ++++++++
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 3455dfbe..943ab940 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { bind, linkRef } from '../../lib/util';
+import { bind, linkRef, Fileish } from '../../lib/util';
 import * as style from './style.scss';
 import Output from '../Output';
 import Options from '../Options';
@@ -48,7 +48,7 @@ export interface SourceImage {
 
 interface EncodedImage {
   preprocessed?: ImageData;
-  file?: File;
+  file?: Fileish;
   downloadUrl?: string;
   data?: ImageData;
   preprocessorState: PreprocessorState;
@@ -87,11 +87,12 @@ async function preprocessImage(
   }
   return result;
 }
+
 async function compressImage(
   image: ImageData,
   encodeData: EncoderState,
   sourceFilename: string,
-): Promise<File> {
+): Promise<Fileish> {
   const compressedData = await (() => {
     switch (encodeData.type) {
       case optiPNG.type: return optiPNG.encode(image, encodeData.options);
@@ -111,7 +112,7 @@ async function compressImage(
 
   const encoder = encoderMap[encodeData.type];
 
-  return new File(
+  return new Fileish(
     [compressedData],
     sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`),
     { type: encoder.mimeType },
@@ -275,7 +276,7 @@ export default class App extends Component<Props, State> {
 
     const image = images[index];
 
-    let file: File | undefined;
+    let file: File | Fileish | undefined;
     let preprocessed: ImageData | undefined;
     let data: ImageData | undefined;
     const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
diff --git a/src/components/App/result-cache.ts b/src/components/App/result-cache.ts
index a5bc8bbf..0f183a0d 100644
--- a/src/components/App/result-cache.ts
+++ b/src/components/App/result-cache.ts
@@ -1,5 +1,5 @@
 import { EncoderState } from '../../codecs/encoders';
-import { shallowEqual } from '../../lib/util';
+import { shallowEqual, Fileish } from '../../lib/util';
 import { SourceImage } from '.';
 import { PreprocessorState } from '../../codecs/preprocessors';
 
@@ -8,7 +8,7 @@ import * as identity from '../../codecs/identity/encoder';
 interface CacheResult {
   preprocessed: ImageData;
   data: ImageData;
-  file: File;
+  file: Fileish;
 }
 
 interface CacheEntry extends CacheResult {
diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx
index 82102bdb..505301ec 100644
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import * as style from './style.scss';
-import { bind } from '../../lib/util';
+import { bind, Fileish } from '../../lib/util';
 import { cleanSet, cleanMerge } from '../../lib/clean-modify';
 import OptiPNGEncoderOptions from '../../codecs/optipng/options';
 import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
@@ -65,7 +65,7 @@ interface Props {
   sourceAspect: number;
   imageIndex: number;
   sourceImageFile?: File;
-  imageFile?: File;
+  imageFile?: Fileish;
   downloadUrl?: string;
   encoderState: EncoderState;
   preprocessorState: PreprocessorState;
diff --git a/src/components/Output/index.tsx b/src/components/Output/index.tsx
index 5948cdae..96a12511 100644
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@@ -155,6 +155,7 @@ export default class Output extends Component<Props, State> {
     return (
       <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
         <two-up
+          legacy-clip-compat
           orientation={orientation}
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
diff --git a/src/lib/util.ts b/src/lib/util.ts
index b2e72ebd..5ec9c42a 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -238,3 +238,11 @@ export function konami(): Promise<void> {
     window.addEventListener('keydown', listener);
   });
 }
+
+// Edge doesn't support `new File`, so here's a hacky alternative.
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9551546/
+export class Fileish extends Blob {
+  constructor(data: any[], public name: string, opts?: BlobPropertyBag) {
+    super(data, opts);
+  }
+}