feat: allow add file by selecting through open file dialog

src/SelectFile.tsx

@@ -1,11 +1,33 @@
-import { useId } from 'react';
+import React, { useId } from 'react';
 
 import { Box, Text } from '@chakra-ui/react';
 import { UnlockIcon } from '@chakra-ui/icons';
+import { useAppDispatch } from './hooks';
+import { addNewFile } from './features/file-listing/fileListingSlice';
+import { nanoid } from 'nanoid';
 
 export function SelectFile() {
+  const dispatch = useAppDispatch();
   const id = useId();
 
+  const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      for (const file of e.target.files) {
+        const blobURI = URL.createObjectURL(file);
+        const fileName = file.name;
+        dispatch(
+          addNewFile({
+            id: nanoid(),
+            blobURI,
+            fileName,
+          })
+        );
+      }
+    }
+
+    e.target.value = '';
+  };
+
   return (
     <Box
       as="label"
@@ -34,7 +56,7 @@ export function SelectFile() {
           点我选择
         </Text>
         需要解密的文件
-        <input id={id} type="file" hidden multiple />
+        <input id={id} type="file" hidden multiple onChange={handleFileSelection} />
         <Text fontSize="sm" opacity="50%">
           仅在浏览器内对文件进行解锁，无需消耗流量
         </Text>

src/features/file-listing/FileListing.tsx

@@ -1,20 +1,11 @@
-import { useEffect } from 'react';
 import { Avatar, Box, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr, Wrap, WrapItem } from '@chakra-ui/react';
 
-import { addNewFile, selectFiles } from './fileListingSlice';
-import { useAppDispatch, useAppSelector } from '../../hooks';
+import { selectFiles } from './fileListingSlice';
+import { useAppSelector } from '../../hooks';
 
 export function FileListing() {
-  const dispatch = useAppDispatch();
   const files = useAppSelector(selectFiles);
 
-  useEffect(() => {
-    // FIXME: Remove test data
-    if (Object.keys(files).length === 0) {
-      dispatch(addNewFile({ id: 'dummy', fileName: '测试文件名.mgg', blobURI: '' }));
-    }
-  }, []);
-
   return (
     <TableContainer>
       <Table variant="striped">