feat: allow add file by selecting through open file dialog
This commit is contained in:
parent
3b264f380f
commit
c0737a341b
@ -16,6 +16,7 @@
|
|||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
"@reduxjs/toolkit": "^1.9.5",
|
"@reduxjs/toolkit": "^1.9.5",
|
||||||
"framer-motion": "^10.12.8",
|
"framer-motion": "^10.12.8",
|
||||||
|
"nanoid": "^4.0.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-redux": "^8.0.5"
|
"react-redux": "^8.0.5"
|
||||||
|
@ -19,6 +19,9 @@ dependencies:
|
|||||||
framer-motion:
|
framer-motion:
|
||||||
specifier: ^10.12.8
|
specifier: ^10.12.8
|
||||||
version: 10.12.8(react-dom@18.2.0)(react@18.2.0)
|
version: 10.12.8(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
nanoid:
|
||||||
|
specifier: ^4.0.2
|
||||||
|
version: 4.0.2
|
||||||
react:
|
react:
|
||||||
specifier: ^18.2.0
|
specifier: ^18.2.0
|
||||||
version: 18.2.0
|
version: 18.2.0
|
||||||
@ -2843,6 +2846,12 @@ packages:
|
|||||||
hasBin: true
|
hasBin: true
|
||||||
dev: 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:
|
/natural-compare-lite@1.4.0:
|
||||||
resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
|
resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
|
||||||
dev: true
|
dev: true
|
||||||
|
@ -1,11 +1,33 @@
|
|||||||
import { useId } from 'react';
|
import React, { useId } from 'react';
|
||||||
|
|
||||||
import { Box, Text } from '@chakra-ui/react';
|
import { Box, Text } from '@chakra-ui/react';
|
||||||
import { UnlockIcon } from '@chakra-ui/icons';
|
import { UnlockIcon } from '@chakra-ui/icons';
|
||||||
|
import { useAppDispatch } from './hooks';
|
||||||
|
import { addNewFile } from './features/file-listing/fileListingSlice';
|
||||||
|
import { nanoid } from 'nanoid';
|
||||||
|
|
||||||
export function SelectFile() {
|
export function SelectFile() {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
const id = useId();
|
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 (
|
return (
|
||||||
<Box
|
<Box
|
||||||
as="label"
|
as="label"
|
||||||
@ -34,7 +56,7 @@ export function SelectFile() {
|
|||||||
点我选择
|
点我选择
|
||||||
</Text>
|
</Text>
|
||||||
需要解密的文件
|
需要解密的文件
|
||||||
<input id={id} type="file" hidden multiple />
|
<input id={id} type="file" hidden multiple onChange={handleFileSelection} />
|
||||||
<Text fontSize="sm" opacity="50%">
|
<Text fontSize="sm" opacity="50%">
|
||||||
仅在浏览器内对文件进行解锁,无需消耗流量
|
仅在浏览器内对文件进行解锁,无需消耗流量
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -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 { 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() {
|
export function FileListing() {
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const files = useAppSelector(selectFiles);
|
const files = useAppSelector(selectFiles);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// FIXME: Remove test data
|
|
||||||
if (Object.keys(files).length === 0) {
|
|
||||||
dispatch(addNewFile({ id: 'dummy', fileName: '测试文件名.mgg', blobURI: '' }));
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableContainer>
|
<TableContainer>
|
||||||
<Table variant="striped">
|
<Table variant="striped">
|
||||||
|
Loading…
Reference in New Issue
Block a user