+ Upload button for Dashboard

public/static/locales/en/dashboard.json

@@ -10,12 +10,13 @@
   "generate": "Generate GIF",
   "generate_plural": "Generate GIFs",
   "upload": {
+    "button": "Upload",
     "title": "Upload a file",
     "select": "Select File",
     "finished": "File uploaded as {{filename}}",
     "visit": "Open file page",
     "dropTitle": "Drop it like it's hot!",
-    "dropDescription": "You can upload an image by dragging it into here.",
+    "dropDescription": "You can upload an image or video by dragging it into here.",
     "error": {
       "title": "Uh-Oh, an error happened!",
       "unsupported": "This filetype cannot be uploaded.\nSupported types are: jpg, png, gif, mp4"

src/Dashboard/views/DashboardHeaderRight.tsx

@@ -1,27 +1,31 @@
 import React from "react";
 import { Button, ButtonAppearance } from "../../_DesignSystem";
-import { FaSignOutAlt } from "react-icons/fa";
+import { FaSignOutAlt, FaUpload } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
+import { EEDropzone } from "../../FullscreenDropzone/FullscreenDropzone";
 
-const signOut = () => {
-  window.location.assign(window.location.href + "api/logout.php");
-};
+const signOut = () => window.location.assign(window.location.href + "api/logout.php");
+const upload = () => EEDropzone.emit("open");
 
-const DashboardHeaderRight: React.ComponentType<{}> = props => {
-  const { t } = useTranslation("common");
-  const title = t("logoutButton");
+const DashboardHeaderRight: React.ComponentType<{}> = React.memo(() => {
+  const { t } = useTranslation(["common", "dashboard"]);
+  const logoutTitle = t("common:logoutButton");
+  const uploadTitle = t("dashboard:upload.button");
 
   return (
     <>
+      <Button appearance={ButtonAppearance.lightweight} icon={FaUpload} onClick={upload}>
+        {uploadTitle}
+      </Button>
       <Button
         appearance={ButtonAppearance.lightweight}
         icon={FaSignOutAlt}
         onClick={signOut}
-        aria-label={title}
-        title={title}
+        aria-label={logoutTitle}
+        title={logoutTitle}
       />
     </>
   );
-};
+});
 
 export default React.memo(DashboardHeaderRight);

src/FullscreenDropzone/FullscreenDropzone.tsx

@@ -21,6 +21,12 @@ import { Button } from "../_DesignSystem";
 import DropzoneUploadManager from "./views/DropzoneUploadManager";
 import { useTranslation } from "react-i18next";
 import { FaTimes } from "react-icons/fa";
+import EventEmitter from "onfire.js";
+
+/**
+ * Cross-component event event manager for toggling the dialog visibility
+ */
+export const EEDropzone: EventEmitter = new EventEmitter();
 
 const FullscreenDropzoneStyles: ComponentStyles<
   FullscreenDropzoneClassNameContract,
@@ -97,12 +103,13 @@ const FullscreenDropzone = (
   WrappedComponent: React.ComponentClass | React.FunctionComponent
 ): React.FC<FullscreenDropzoneProps> => {
   return props => {
+    let lastDropTarget: EventTarget = null;
+
     const [isUploadDialogVisible, setDialogVisibility] = useState(false);
     const [isDragActive, setDragState] = useState(false);
     const [preventDialogHiding, setDialogHidingPrevention] = useState(false);
     const [dropData, setDropData] = useState({ acceptedFiles: [], rejectedFiles: [] });
     const { t } = useTranslation("dashboard");
-    let lastDropTarget: EventTarget = null;
 
     /**
      * Callback function for showing the upload modal if a draggable appears in the viewport.
@@ -135,6 +142,15 @@ const FullscreenDropzone = (
       }
     };
 
+    /**
+     * Callback function for showing the upload modal if the upload button in the header was clicked.
+     */
+    const onHeaderButtonClick = () => {
+      setDialogHidingPrevention(true);
+      setDragState(false);
+      setDialogVisibility(true);
+    };
+
     /**
      * We send the data down to a separate component which handles all uploads.
      */
@@ -151,22 +167,24 @@ const FullscreenDropzone = (
       [preventDialogHiding]
     );
 
-    const close = () => {
+    const close = useCallback(() => {
       setDialogHidingPrevention(false);
       setDragState(false);
       setDialogVisibility(false);
-    };
+    }, []);
 
     /**
-     * Setting up and removing event listeners on mounting and demounting
+     * Setting up and removing event listeners
      */
     useEffect(() => {
       window.addEventListener("dragover", onDocumentDragOver);
       window.addEventListener("dragleave", onDocumentDragLeave);
+      EEDropzone.on("open", onHeaderButtonClick);
 
       return () => {
         window.removeEventListener("dragover", onDocumentDragOver);
         window.removeEventListener("dragleave", onDocumentDragLeave);
+        EEDropzone.off("open", onHeaderButtonClick);
       };
     });
 

src/FullscreenDropzone/views/DropzoneUploadManager.props.ts

@@ -5,7 +5,7 @@ import { ManagedClasses } from "@microsoft/fast-jss-manager-react";
  */
 export interface DropzoneUploadManagerClassNameContract {
   dropzoneUploadManager: string;
-  dropzoneUploadManager_hidden: string;
+  dropzoneUploadManager__empty?: string;
 }
 
 /**

src/FullscreenDropzone/views/DropzoneUploadManager.tsx

@@ -7,6 +7,8 @@ import {
 import { DesignSystem } from "@microsoft/fast-components-styles-msft";
 import DropzoneUpload from "./DropzoneUpload";
 import { uniqueId } from "lodash-es";
+import DropzoneDrag from "./DropzoneDrag";
+import { classNames } from "@microsoft/fast-web-utilities";
 
 const styles: ComponentStyles<DropzoneUploadManagerClassNameContract, DesignSystem> = {
   dropzoneUploadManager: {
@@ -18,8 +20,9 @@ const styles: ComponentStyles<DropzoneUploadManagerClassNameContract, DesignSyst
       marginBottom: "20px",
     },
   },
-  dropzoneUploadManager_hidden: {
-    display: "none",
+  dropzoneUploadManager__empty: {
+    zIndex: "-1",
+    opacity: "0.5",
   },
 };
 
@@ -74,9 +77,16 @@ const DropzoneUploadManager = (props: DropzoneUploadManagerProps) => {
     }
   }, [props.dropData, dropData, manageDropDataChange]);
 
+  const hasUploads = uploadList.length > 0;
+
   return (
-    <div className={props.managedClasses.dropzoneUploadManager}>
-      {uploadList.length > 0 &&
+    <div
+      className={classNames(props.managedClasses.dropzoneUploadManager, [
+        props.managedClasses.dropzoneUploadManager__empty,
+        !hasUploads,
+      ])}
+    >
+      {hasUploads ? (
         uploadList.map(
           (obj: {
             key: string;
@@ -92,7 +102,10 @@ const DropzoneUploadManager = (props: DropzoneUploadManagerProps) => {
               onRemoveRequest={removeUploadItem(obj.key)}
             />
           )
-        )}
+        )
+      ) : (
+        <DropzoneDrag />
+      )}
     </div>
   );
 };