feat: allow add file by selecting through open file dialog

package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@reduxjs/toolkit": "^1.9.5",
     "framer-motion": "^10.12.8",
+    "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5"

pnpm-lock.yaml

@@ -19,6 +19,9 @@ dependencies:
   framer-motion:
     specifier: ^10.12.8
     version: 10.12.8(react-dom@18.2.0)(react@18.2.0)
+  nanoid:
+    specifier: ^4.0.2
+    version: 4.0.2
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -2843,6 +2846,12 @@ packages:
     hasBin: true
     dev: true
 
+  /nanoid@4.0.2:
+    resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
+    engines: {node: ^14 || ^16 || >=18}
+    hasBin: true
+    dev: false
+
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true

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 { selectFiles } from './fileListingSlice';
-import { useAppDispatch, useAppSelector } from '../../hooks';
+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">