add back drag & drop to upload

interface/src/components/upload/SingleUpload.tsx

@@ -1,19 +1,26 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import UploadIcon from '@mui/icons-material/Upload';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import { Box, Button, LinearProgress, Typography } from '@mui/material';
 
 import * as SystemApi from 'api/system';
 
 import { useRequest } from 'alova/client';
 import RestartMonitor from 'app/status/RestartMonitor';
+import MessageBox from 'components/MessageBox';
 import { useI18nContext } from 'i18n/i18n-react';
 
+import DragNdrop from './DragNdrop';
+
 const SingleUpload = () => {
   const [md5, setMd5] = useState<string>();
-  const [restarting, setRestarting] = useState<boolean>();
+  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
+
+  const [file, setFile] = useState<File>();
+  const { LL } = useI18nContext();
 
   const {
     loading: isUploading,
@@ -28,55 +35,40 @@ const SingleUpload = () => {
       toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
       setFile(undefined);
     } else {
-      setRestarting(true);
+      setRestartNeeded(true);
+      // setRestarting(true);
     }
   });
 
-  const [file, setFile] = useState<File>();
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const { send: restartCommand } = useRequest(SystemApi.restart(), {
+    immediate: false
+  });
 
-  const { LL } = useI18nContext();
-
-  const handleUploadClick = () => {
-    inputRef.current?.click();
-  };
-
-  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files) {
-      return;
-    }
-
-    setFile(e.target.files[0]);
-
-    await sendUpload(e.target.files[0]).catch((error: Error) => {
-      if (error.message === 'The user aborted a request') {
-        toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
-      } else if (error.message === 'Network Error') {
-        toast.warning('Invalid file extension or incompatible bin file');
-      } else {
-        toast.error(error.message);
-      }
+  const restart = async () => {
+    await restartCommand().catch((error: Error) => {
+      toast.error(error.message);
     });
+    setRestarting(true);
   };
 
+  useEffect(async () => {
+    if (file) {
+      console.log('going to upload file ', file.name);
+      await sendUpload(file).catch((error: Error) => {
+        if (error.message === 'The user aborted a request') {
+          toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
+        } else if (error.message === 'Network Error') {
+          toast.warning('Invalid file extension or incompatible bin file');
+        } else {
+          toast.error(error.message);
+        }
+      });
+    }
+  }, [file]);
+
   return (
     <>
-      <input
-        type="file"
-        ref={inputRef}
-        style={{ display: 'none' }}
-        onChange={handleFileChange}
-      />
-
-      <Button
-        sx={{ ml: 2 }}
-        startIcon={<UploadIcon />}
-        variant="outlined"
-        color="secondary"
-        onClick={handleUploadClick}
-      >
-        {file ? LL.UPLOADING() + ` ${file.name}` : LL.UPLOAD()}
-      </Button>
+      <DragNdrop onFileSelected={setFile} width="340px" height="140px" />
 
       {isUploading && (
         <>
@@ -111,6 +103,19 @@ const SingleUpload = () => {
         </Box>
       )}
 
+      {restartNeeded && (
+        <MessageBox mt={4} level="warning" message={LL.RESTART_TEXT(0)}>
+          <Button
+            startIcon={<PowerSettingsNewIcon />}
+            variant="contained"
+            color="error"
+            onClick={restart}
+          >
+            {LL.RESTART()}
+          </Button>
+        </MessageBox>
+      )}
+
       {restarting && <RestartMonitor />}
     </>
   );