mirror of
https://git.unlock-music.dev/um/um-react.git
synced 2024-11-24 00:42:16 +00:00
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { useDropzone } from 'react-dropzone';
|
||
import { Box, Text } from '@chakra-ui/react';
|
||
import { UnlockIcon } from '@chakra-ui/icons';
|
||
|
||
import { useAppDispatch } from './hooks';
|
||
import { addNewFile, processFile } from './features/file-listing/fileListingSlice';
|
||
import { nanoid } from 'nanoid';
|
||
|
||
export function SelectFile() {
|
||
const dispatch = useAppDispatch();
|
||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||
multiple: true,
|
||
onDropAccepted(files, _event) {
|
||
console.debug(
|
||
'react-dropzone/onDropAccepted(%o, %o)',
|
||
files.length,
|
||
files.map((x) => x.name)
|
||
);
|
||
|
||
for (const file of files) {
|
||
const blobURI = URL.createObjectURL(file);
|
||
const fileName = file.name;
|
||
const fileId = 'file://' + nanoid();
|
||
|
||
// FIXME: this should be a single action/thunk that first adds the item, then updates it.
|
||
dispatch(
|
||
addNewFile({
|
||
id: fileId,
|
||
blobURI,
|
||
fileName,
|
||
})
|
||
);
|
||
dispatch(processFile({ fileId }));
|
||
}
|
||
},
|
||
});
|
||
|
||
return (
|
||
<Box
|
||
{...getRootProps()}
|
||
w="100%"
|
||
maxW={480}
|
||
borderWidth="1px"
|
||
borderRadius="lg"
|
||
transitionDuration="0.5s"
|
||
p="6"
|
||
cursor="pointer"
|
||
display="flex"
|
||
flexDir="column"
|
||
alignItems="center"
|
||
_hover={{
|
||
borderColor: 'gray.400',
|
||
bg: 'gray.50',
|
||
}}
|
||
{...(isDragActive && {
|
||
bg: 'blue.50',
|
||
borderColor: 'blue.700',
|
||
})}
|
||
>
|
||
<input {...getInputProps()} />
|
||
|
||
<Box pb={3}>
|
||
<UnlockIcon boxSize={8} />
|
||
</Box>
|
||
<Box textAlign="center">
|
||
将文件拖到此处，或
|
||
<Text as="span" color="teal.400">
|
||
点我选择
|
||
</Text>
|
||
需要解密的文件
|
||
<Text fontSize="sm" opacity="50%">
|
||
仅在浏览器内对文件进行解锁，无需消耗流量
|
||
</Text>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|