From c5decad80c0638528617398147d6f532207518e2 Mon Sep 17 00:00:00 2001
From: greenyouse <ed@edbabcock.com>
Date: Mon, 16 Nov 2020 23:34:52 -0600
Subject: [PATCH 1/2] feat: Add drag/drop file loading

---
 src/App.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/App.ts b/src/App.ts
index c5db425..0584572 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -70,6 +70,9 @@ export default class App extends Vue {
       document.getElementById("gesture-wrapper")!.style.height = "84vh";
     }
     Mousetrap.bind("esc", () => this.ToggleLeftSideNav());
+    const $app = document.querySelector("#app");
+    $app.ondragover = this.OnDragOver;
+    $app.ondrop = this.OnFileDropped;
     // this.loadHapticsTestData();
   }
 
@@ -116,6 +119,26 @@ export default class App extends Vue {
     this.devices = this.devices.filter((device) => device.Index !== aDevice.Index);
   }
 
+  private OnDragOver(event: DragEvent) {
+    event.preventDefault();
+  }
+
+  private OnFileDropped(event: DragEvent) {
+    event.preventDefault();
+
+    if (!event.dataTransfer.items) {
+      return;
+    }
+
+    const aFile = event.dataTransfer.items[0].getAsFile();
+    const isVideoFile = /video/.test(aFile.type);
+    if (isVideoFile) {
+      this.SetVideoFile(aFile);
+    } else {
+      this.SetHapticsFile(aFile);
+    }
+  }
+
   private SetVideoFile(aFile: File) {
     this.videoFile = aFile;
   }

From 726094dc0589d261e1b9d414e683a9e5478d2f00 Mon Sep 17 00:00:00 2001
From: greenyouse <ed@edbabcock.com>
Date: Mon, 16 Nov 2020 23:59:47 -0600
Subject: [PATCH 2/2] fix: Add null checks for drag/drop

---
 src/App.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/App.ts b/src/App.ts
index 0584572..58941d9 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -125,13 +125,15 @@ export default class App extends Vue {
 
   private OnFileDropped(event: DragEvent) {
     event.preventDefault();
-
-    if (!event.dataTransfer.items) {
+    if (!event || !event.dataTransfer) {
       return;
     }
-
     const aFile = event.dataTransfer.items[0].getAsFile();
+    if (!aFile) {
+      return;
+    }
     const isVideoFile = /video/.test(aFile.type);
+    // Load as a video file when the file MIME type matches
     if (isVideoFile) {
       this.SetVideoFile(aFile);
     } else {