diff --git a/src/App.ts b/src/App.ts
index c5db425..58941d9 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,28 @@ 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 || !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 {
+      this.SetHapticsFile(aFile);
+    }
+  }
+
   private SetVideoFile(aFile: File) {
     this.videoFile = aFile;
   }