From c0737a341b4506b9d12601f8d4421374230f45df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Mon, 8 May 2023 16:06:52 +0100
Subject: [PATCH] feat: allow add file by selecting through open file dialog

---
 package.json                              |  1 +
 pnpm-lock.yaml                            |  9 ++++++++
 src/SelectFile.tsx                        | 26 +++++++++++++++++++++--
 src/features/file-listing/FileListing.tsx | 13 ++----------
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 9367414..0851e76 100644
--- a/package.json
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5767ed6..d553209 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/SelectFile.tsx b/src/SelectFile.tsx
index a961b26..19d6f7a 100644
--- a/src/SelectFile.tsx
+++ b/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>
diff --git a/src/features/file-listing/FileListing.tsx b/src/features/file-listing/FileListing.tsx
index c246002..6f78041 100644
--- a/src/features/file-listing/FileListing.tsx
+++ b/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">