feat: allow add file by selecting through open file dialog

This commit is contained in:
鲁树人 2023-05-08 16:06:52 +01:00
parent 3b264f380f
commit c0737a341b
4 changed files with 36 additions and 13 deletions

View File

@ -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"

View File

@ -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

View File

@ -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>

View File

@ -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">