From 3e26a0a3cc6de9a8623e9f269aae8de27fdfd1bd Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Mon, 2 Jul 2018 18:55:46 +0100
Subject: [PATCH] Fixing file drop for Safari & Edge (#73)

---
 src/components/app/custom-els/FileDrop/index.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/app/custom-els/FileDrop/index.ts b/src/components/app/custom-els/FileDrop/index.ts
index 758bb6fc..c7b5cfe7 100644
--- a/src/components/app/custom-els/FileDrop/index.ts
+++ b/src/components/app/custom-els/FileDrop/index.ts
@@ -28,10 +28,18 @@ interface FileDropEventInit extends EventInit {
   file: File;
 }
 
+// Safari and Edge don't quite support extending Event, this works around it.
+function fixExtendedEvent(instance: Event, type: Function) {
+  if (!(instance instanceof type)) {
+    Object.setPrototypeOf(instance, type.prototype);
+  }
+}
+
 export class FileDropEvent extends Event {
   private _file: File;
   constructor(typeArg: string, eventInitDict: FileDropEventInit) {
     super(typeArg, eventInitDict);
+    fixExtendedEvent(this, FileDropEvent);
     this._file = eventInitDict.file;
   }
 
@@ -78,8 +86,12 @@ export class FileDrop extends HTMLElement {
     if (this._dragEnterCount > 1) return;
 
     // We don't have data, attempt to get it and if it matches, set the correct state.
-    const dragDataItem = firstMatchingItem(event.dataTransfer.items, this.accept);
-    if (dragDataItem) {
+    const validDrop: boolean = event.dataTransfer.items.length ?
+      !!firstMatchingItem(event.dataTransfer.items, this.accept) :
+      // Safari doesn't give file information on drag enter, so the best we can do is return valid.
+      true;
+
+    if (validDrop) {
       this.classList.add('drop-valid');
     } else {
       this.classList.add('drop-invalid');