* Added file drag and drop support

Author: CodeDead

src/components/App/index.js

@@ -11,10 +11,12 @@ import File from "../../routes/File";
 import Text from "../../routes/Text";
 import Drawerbar from "../Drawerbar";
 import {CssBaseline} from "@material-ui/core";
+import DropZone from "../DropZone";
 
 function App() {
 
     let themeIndex = useSelector(state => state.MainReducer.themeIndex);
+
     let themeType = "light";
     if (themeIndex === 8) {
         themeType = "dark";
@@ -32,7 +34,7 @@ function App() {
     return (
         <ThemeProvider theme={theme}>
             <BrowserRouter>
-                <div className="App">
+                <DropZone>
                     <Topbar/>
                     <Drawerbar/>
                     <CssBaseline/>
@@ -53,7 +55,7 @@ function App() {
                             <Home/>
                         </Route>
                     </Switch>
-                </div>
+                </DropZone>
             </BrowserRouter>
         </ThemeProvider>
     );

src/components/DropZone/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import {useHistory} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+
+const DropZone = ({children}) => {
+
+    const history = useHistory();
+    const enabled = useSelector(state => state.MainReducer.canDragDrop);
+    const dispatch = useDispatch();
+
+    /**
+     * Event that is fired when one or more files are dropped
+     * @param event The event that contains the drop details
+     */
+    const onDrop = (event) => {
+        event.preventDefault();
+        if (!enabled) return;
+
+        dispatch({type: 'SET_CURRENT_FILE', payload: event.dataTransfer.files[0]});
+        history.push("/file");
+    };
+
+    /**
+     * Event that is fired when a drag over event is detected
+     * @param event The event that contains the drag over details
+     */
+    const onDragOver = (event) => {
+        event.preventDefault();
+    };
+
+    return (
+        <div
+            onDragOver={onDragOver}
+            onDrop={onDrop}>
+            {children}
+        </div>
+    );
+
+};
+
+export default DropZone;

src/reducers/CryptoReducer/Actions/CryptoActions.js

@@ -12,3 +12,4 @@ export const resetCryptoReducer = createAction("RESET_CRYPTO_REDUCER");
 export const setFileHashes = createAction("SET_FILE_HASHES");
 export const setTextHashes = createAction("SET_TEXT_HASHES");
 export const setTextInput = createAction("SET_TEXT_INPUT");
+export const setCurrentFile = createAction("SET_CURRENT_FILE");

src/reducers/CryptoReducer/index.js

@@ -7,7 +7,7 @@ import {
     setSha384State,
     setSha512State,
     setSha3State,
-    setSha224State, resetCryptoReducer, setTextHashes, setFileHashes, setTextInput
+    setSha224State, resetCryptoReducer, setTextHashes, setFileHashes, setTextInput, setCurrentFile
 } from "./Actions/CryptoActions";
 
 let md5 = localStorage['md5'];
@@ -47,6 +47,7 @@ const initState = {
     fileHashes: null,
     textHashes: null,
     textInput: "",
+    currentFile: null
 };
 
 const CryptoReducer = handleActions({
@@ -143,6 +144,13 @@ const CryptoReducer = handleActions({
             ...state,
             textInput: action.payload
         }
+    },
+    [setCurrentFile](state, action) {
+        return {
+            ...state,
+            currentFile: action.payload,
+            fileHashes: null
+        }
     }
 }, initState);
 

src/reducers/MainReducer/Actions/MainActions.js

@@ -10,3 +10,4 @@ export const resetMainReducer = createAction("RESET_MAIN_REDUCER");
 export const setMinimizeStatus = createAction("SET_MINIMIZE_STATUS");
 export const setMaximizeStatus = createAction("SET_MAXIMIZE_STATUS");
 export const setLanguageButtonStatus = createAction("SET_LANGUAGE_STATUS");
+export const setCanDragDrop = createAction("SET_CAN_DRAG_DROP");

src/reducers/MainReducer/index.js

@@ -7,7 +7,7 @@ import {
     setThemeIndex,
     setAutoUpdate,
     setUpdateChecked,
-    resetMainReducer, setMinimizeStatus, setMaximizeStatus, setLanguageButtonStatus
+    resetMainReducer, setMinimizeStatus, setMaximizeStatus, setLanguageButtonStatus, setCanDragDrop
 } from './Actions/MainActions';
 import de_DE from "../../languages/de_DE";
 import nl_NL from "../../languages/nl_NL";
@@ -24,6 +24,7 @@ let autoUpdate = localStorage['autoUpdate'];
 let minimizeEnabled = localStorage['minimizeEnabled'];
 let maximizeEnabled = localStorage['maximizeEnabled'];
 let languageEnabled = localStorage['languageEnabled'];
+let canDragDrop = localStorage['canDragDrop'];
 
 if (!languageIndex) {
     languageIndex = 1;
@@ -41,6 +42,7 @@ autoUpdate = !autoUpdate || autoUpdate === "true";
 minimizeEnabled = !minimizeEnabled || minimizeEnabled === "true";
 maximizeEnabled = !maximizeEnabled || maximizeEnabled === "true";
 languageEnabled = !languageEnabled || languageEnabled === "true";
+canDragDrop = !canDragDrop || canDragDrop === "true";
 
 const initState = {
     languageIndex: languageIndex,
@@ -68,7 +70,8 @@ const initState = {
     checkedForUpdates: false,
     minimizeEnabled: minimizeEnabled,
     maximizeEnabled: maximizeEnabled,
-    languageEnabled: languageEnabled
+    languageEnabled: languageEnabled,
+    canDragDrop: canDragDrop
 };
 
 const MainReducer = handleActions({
@@ -118,6 +121,7 @@ const MainReducer = handleActions({
         localStorage['minimizeEnabled'] = true;
         localStorage['maximizeEnabled'] = true;
         localStorage['languageEnabled'] = true;
+        localStorage['canDragDrop'] = true;
 
         return {
             ...state,
@@ -126,7 +130,8 @@ const MainReducer = handleActions({
             autoUpdate: true,
             minimizeEnabled: true,
             maximizeEnabled: true,
-            languageEnabled: true
+            languageEnabled: true,
+            canDragDrop: true
         }
     },
     [setMinimizeStatus](state, action) {
@@ -149,6 +154,13 @@ const MainReducer = handleActions({
             ...state,
             languageEnabled: action.payload
         }
+    },
+    [setCanDragDrop](state,action) {
+        localStorage['canDragDrop'] = action.payload;
+        return {
+            ...state,
+            canDragDrop : action.payload
+        }
     }
 }, initState);
 

src/routes/File/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useState, useRef} from "react";
 import {useDispatch, useSelector} from "react-redux";
 import {Checkbox, FormControlLabel, makeStyles, Paper} from "@material-ui/core";
 import Container from "@material-ui/core/Container";
@@ -13,7 +13,6 @@ import CryptoJs from "crypto-js/crypto-js";
 import {FileDataReader} from "../../utils/FileDataReader";
 import {CryptoCalculator} from "../../utils/CryptoCalculator";
 import BackButton from "../../components/BackButton";
-import Input from '@material-ui/core/Input';
 
 const useStyles = makeStyles(theme => ({
     heroContent: {
@@ -43,14 +42,16 @@ const useStyles = makeStyles(theme => ({
 const File = () => {
 
     const hashes = useSelector(state => state.CryptoReducer.fileHashes);
+    const file = useSelector(state => state.CryptoReducer.currentFile);
     const language = useSelector(state => state.MainReducer.languages[state.MainReducer.languageIndex]);
     const dispatch = useDispatch();
     const classes = useStyles();
 
-    const [file, setFile] = useState(null);
     const [compare, setCompare] = useState(false);
     const [compareHash, setCompareHash] = useState("");
 
+    const fileRef = useRef(null);
+
     const md5 = useSelector(state => state.CryptoReducer.md5);
     const sha1 = useSelector(state => state.CryptoReducer.sha1);
     const sha224 = useSelector(state => state.CryptoReducer.sha224);
@@ -80,7 +81,6 @@ const File = () => {
         <CopyPasteMenu id={1} copyData={() => navigator.clipboard.writeText(compareHash)}
                        pasteData={() => pasteData(setCompareHash)}>
             <TextField
-                id="outlined-basic"
                 style={{width: '100%'}}
                 margin="normal"
                 value={compareHash}
@@ -127,10 +127,18 @@ const File = () => {
      * Clear the user interface
      */
     const clearData = () => {
-        setFile(null);
         setCompare(false);
         setCompareHash("");
-        dispatch({type: "SET_FILE_HASHES", payload: null});
+        dispatch({type: 'SET_CURRENT_FILE', payload: null});
+    };
+
+    /**
+     * Change the currently selected file
+     * @param event The event that called this function
+     */
+    const onFileChange = function(event) {
+        dispatch({type: 'SET_CURRENT_FILE', payload: event.target.files[0]});
+        fileRef.current.value = "";
     };
 
     return (
@@ -154,7 +162,19 @@ const File = () => {
                                 {language.input}
                             </Typography>
                             <Paper className={classes.paper}>
-                                <Input type={"file"} onChange={e => setFile(e.target.files[0])} disableUnderline={true} />
+                                <TextField
+                                    margin="normal"
+                                    onClick={() => fileRef.current.click()}
+                                    disabled
+                                    id="filled-disabled"
+                                    value={file && file.path ? file.path  : ""}
+                                    variant="outlined"
+                                />
+
+                                <input ref={fileRef} type="file" onChange={onFileChange}
+                                       style={{display: 'none'}}/>
+
+                                <Button color={"primary"} variant={"contained"} onClick={() => fileRef.current.click()}>{language.select}</Button>
 
                                 <FormControlLabel
                                     control={