Prevent browser from loading dragged file when drag-area is missed (#…

…3222)

* prevent browser from loading dragged file when drag-area is missed (fixes #3196)

* update changelog

* add missing type annotation

CHANGELOG.md

@@ -36,6 +36,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - The welcome header will now also show on the default page if there are no existing organisations. [#3133](https://github.com/scalableminds/webknossos/pull/3133)
 - Simplified the sharing of tracings. Users can simply copy the active URL from the browser's URL bar to share a tracing (assuming the tracing is public). [#3176](https://github.com/scalableminds/webknossos/pull/3176)
 - Improved general performance of the tracing view by leveraging web workers. [#3162](https://github.com/scalableminds/webknossos/pull/3162)
+- Improved overall drag-and-drop behavior by preventing the browser from opening the dragged file when the actual drag target was missed. [#3222](https://github.com/scalableminds/webknossos/pull/3222)
 - The checkboxes in the user list view will clear now after the experience domains of users have been changed. [#3178](https://github.com/scalableminds/webknossos/pull/3178)
 - Resetting a user's task requires a confirmation now. [#3181](https://github.com/scalableminds/webknossos/pull/3181)
 

app/assets/javascripts/components/disable_generic_dnd.js

@@ -0,0 +1,23 @@
+// @flow
+
+import React from "react";
+
+export default class DisableGenericDnd extends React.Component<{}> {
+  componentDidMount() {
+    window.addEventListener("dragover", this.preventDefault, false);
+    window.addEventListener("drop", this.preventDefault, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("dragover", this.preventDefault);
+    window.removeEventListener("drop", this.preventDefault);
+  }
+
+  preventDefault = (e: Event) => {
+    e.preventDefault();
+  };
+
+  render() {
+    return null;
+  }
+}

app/assets/javascripts/router.js

@@ -12,6 +12,7 @@ import { ControlModeEnum } from "oxalis/constants";
 import { APITracingTypeEnum } from "admin/api_flow_types";
 import { getAnnotationInformation } from "admin/admin_rest_api";
 import SecuredRoute from "components/secured_route";
+import DisableGenericDnd from "components/disable_generic_dnd";
 import Navbar from "navbar";
 import { Imprint, Privacy } from "components/legal";
 
@@ -113,6 +114,7 @@ class ReactRouter extends React.Component<Props> {
     return (
       <Router history={browserHistory}>
         <Layout>
+          <DisableGenericDnd />
           <Navbar isAuthenticated={isAuthenticated} />
           <Content>
             <Switch>