feat: add basic file drag & drop support (#6)

src/SelectFile.tsx

@@ -1,21 +1,27 @@
-import React, { useId } from 'react';
-
+import { useDropzone } from 'react-dropzone';
 import { Box, Text } from '@chakra-ui/react';
 import { UnlockIcon } from '@chakra-ui/icons';
+
 import { useAppDispatch } from './hooks';
 import { addNewFile, processFile } from './features/file-listing/fileListingSlice';
 import { nanoid } from 'nanoid';
 
 export function SelectFile() {
   const dispatch = useAppDispatch();
-  const id = useId();
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    multiple: true,
+    onDropAccepted(files, _event) {
+      console.debug(
+        'react-dropzone/onDropAccepted(%o, %o)',
+        files.length,
+        files.map((x) => x.name)
+      );
 
-  const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      for (const file of e.target.files) {
+      for (const file of files) {
         const blobURI = URL.createObjectURL(file);
         const fileName = file.name;
         const fileId = 'file://' + nanoid();
+
         // FIXME: this should be a single action/thunk that first adds the item, then updates it.
         dispatch(
           addNewFile({
@@ -26,15 +32,12 @@ export function SelectFile() {
         );
         dispatch(processFile({ fileId }));
       }
-    }
-
-    e.target.value = '';
-  };
+    },
+  });
 
   return (
     <Box
-      as="label"
-      htmlFor={id}
+      {...getRootProps()}
       w="100%"
       maxW={480}
       borderWidth="1px"
@@ -49,17 +52,22 @@ export function SelectFile() {
         borderColor: 'gray.400',
         bg: 'gray.50',
       }}
+      {...(isDragActive && {
+        bg: 'blue.50',
+        borderColor: 'blue.700',
+      })}
     >
+      <input {...getInputProps()} />
+
       <Box pb={3}>
         <UnlockIcon boxSize={8} />
       </Box>
       <Box textAlign="center">
-        {/* 将文件拖到此处，或 */}
+        将文件拖到此处，或
         <Text as="span" color="teal.400">
           点我选择
         </Text>
         需要解密的文件
-        <input id={id} type="file" hidden multiple onChange={handleFileSelection} />
         <Text fontSize="sm" opacity="50%">
           仅在浏览器内对文件进行解锁，无需消耗流量
         </Text>