diff --git a/lib/ReactViews/DragDropNotification.d.ts b/lib/ReactViews/DragDropNotification.d.ts
deleted file mode 100644
index a1ddc4c12ae..00000000000
--- a/lib/ReactViews/DragDropNotification.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { Component } from "react";
-
-declare class DragDropNotification extends Component<object> {}
-
-export default DragDropNotification;
diff --git a/lib/ReactViews/DragDropNotification.jsx b/lib/ReactViews/DragDropNotification.jsx
deleted file mode 100644
index 4b4ffa30133..00000000000
--- a/lib/ReactViews/DragDropNotification.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import classNames from "classnames";
-import { reaction } from "mobx";
-import { observer } from "mobx-react";
-import PropTypes from "prop-types";
-import { Component } from "react";
-import Icon from "../Styled/Icon";
-import Styles from "./drag-drop-notification.scss";
-import { withViewState } from "./Context";
-
-@observer
-class DragDropNotification extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showNotification: false
-    };
-  }
-
-  static propTypes = {
-    viewState: PropTypes.object
-  };
-
-  notificationTimeout = null;
-  lastUploadedFilesReaction = null;
-
-  componentDidMount() {
-    this.lastUploadedFilesReaction = reaction(
-      () => this.props.viewState.lastUploadedFiles,
-      () => {
-        clearTimeout(this.notificationTimeout);
-        // show notification, restart timer
-        this.setState({
-          showNotification: true
-        });
-        // initialise new time out
-        this.notificationTimeout = setTimeout(() => {
-          this.setState({
-            showNotification: false
-          });
-        }, 5000);
-      }
-    );
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.notificationTimeout);
-    this.lastUploadedFilesReaction();
-  }
-
-  handleHover() {
-    // reset timer on hover
-    clearTimeout(this.notificationTimeout);
-  }
-
-  handleMouseLeave() {
-    this.notificationTimeout = setTimeout(() => {
-      this.setState({
-        showNotification: false
-      });
-    }, 4000);
-  }
-
-  handleClick() {
-    this.props.viewState.openUserData();
-  }
-
-  render() {
-    const fileNames = this.props.viewState.lastUploadedFiles.join(",");
-    return (
-      <button
-        className={classNames(Styles.notification, {
-          [Styles.isActive]: this.state.showNotification && fileNames.length > 0
-        })}
-        onMouseEnter={this.handleHover.bind(this)}
-        onMouseLeave={this.handleMouseLeave.bind(this)}
-        onClick={this.handleClick.bind(this)}
-      >
-        <div className={Styles.icon}>
-          <Icon glyph={Icon.GLYPHS.upload} />
-        </div>
-        <div className={Styles.info}>
-          <span className={Styles.filename}>
-            {'"'}
-            {fileNames}
-            {'"'}
-          </span>{" "}
-          {this.props.viewState.lastUploadedFiles.length > 1 ? "have" : "has"}{" "}
-          been added to <span className={Styles.action}>My data</span>
-        </div>
-      </button>
-    );
-  }
-}
-
-export default withViewState(DragDropNotification);
diff --git a/lib/ReactViews/DragDropNotification.tsx b/lib/ReactViews/DragDropNotification.tsx
new file mode 100644
index 00000000000..ac6313ddc30
--- /dev/null
+++ b/lib/ReactViews/DragDropNotification.tsx
@@ -0,0 +1,88 @@
+import classNames from "classnames";
+import { reaction } from "mobx";
+import { observer } from "mobx-react";
+import { FC, useEffect, useRef, useState } from "react";
+import { Trans } from "react-i18next";
+import Icon from "../Styled/Icon";
+import { useViewState } from "./Context";
+import Styles from "./drag-drop-notification.scss";
+
+const DragDropNotification: FC = observer(() => {
+  const viewState = useViewState();
+  const [showNotification, setShowNotification] = useState(false);
+  const notificationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+
+  useEffect(() => {
+    const disposer = reaction(
+      () => viewState.lastUploadedFiles,
+      () => {
+        if (notificationTimeoutRef.current) {
+          clearTimeout(notificationTimeoutRef.current);
+        }
+        // show notification, restart timer
+        setShowNotification(true);
+        // initialise new time out
+        notificationTimeoutRef.current = setTimeout(() => {
+          setShowNotification(false);
+        }, 5000);
+      }
+    );
+
+    return () => {
+      if (notificationTimeoutRef.current) {
+        clearTimeout(notificationTimeoutRef.current);
+      }
+      disposer();
+    };
+  }, [viewState.lastUploadedFiles]);
+
+  const handleHover = () => {
+    // reset timer on hover
+    if (notificationTimeoutRef.current) {
+      clearTimeout(notificationTimeoutRef.current);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    notificationTimeoutRef.current = setTimeout(() => {
+      setShowNotification(false);
+    }, 4000);
+  };
+
+  const handleClick = () => {
+    viewState.openUserData();
+  };
+
+  const fileNames = viewState.lastUploadedFiles.join(",");
+
+  return (
+    <button
+      className={classNames(Styles.notification, {
+        [Styles.isActive]: showNotification && fileNames.length > 0
+      })}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+    >
+      <div className={Styles.icon}>
+        <Icon glyph={Icon.GLYPHS.upload} />
+      </div>
+      <div className={Styles.info}>
+        <Trans
+          i18nKey="dragDrop.notification"
+          count={viewState.lastUploadedFiles.length}
+        >
+          <span className={Styles.filename}>&quot;{{ fileNames }}&quot;</span>
+          {{ count: viewState.lastUploadedFiles.length }} been added to{" "}
+          <span className={Styles.action}>My data</span>
+        </Trans>
+      </div>
+    </button>
+  );
+});
+
+DragDropNotification.displayName = "DragDropNotification";
+
+export default DragDropNotification;
diff --git a/wwwroot/languages/en/translation.json b/wwwroot/languages/en/translation.json
index 4dcf4b39f82..946304791eb 100644
--- a/wwwroot/languages/en/translation.json
+++ b/wwwroot/languages/en/translation.json
@@ -614,7 +614,8 @@
   },
   "dragDrop": {
     "text": "<0>Drag & Drop</0><1>Your data anywhere to view on the map<1>",
-    "not": "<0>bbbb</0>"
+    "notification": "<0>\"{{fileNames}}\"</0> has been added to <4>My Data</4>.",
+    "notification_plural": "<0>\"{{fileNames}}\"</0> have been added to <4>My Data</4>."
   },
   "loader": {
     "loadingMessage": "Loading"