Edge file constructor fix (#180)

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

* Less hacky solution - preserves types

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);

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 {

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;

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}

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);
+  }
+}