You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.6 KiB
97 lines
2.6 KiB
3 years ago
|
import { ChangeEventHandler, useEffect, useRef, useState } from 'react';
|
||
|
import { Box, Button, Input, InputLabel } from '@mui/material';
|
||
|
import EventEmitter from 'events';
|
||
|
|
||
|
import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES';
|
||
|
|
||
|
import FileInfo from './FileInfo';
|
||
|
import { BodyText } from '../Text';
|
||
|
|
||
|
type FileUploadInfoProps = {
|
||
|
openFilePickerEventEmitter?: EventEmitter;
|
||
|
};
|
||
|
|
||
|
const FILE_UPLOAD_INFO_DEFAULT_PROPS = {
|
||
|
openFilePickerEventEmitter: undefined,
|
||
|
};
|
||
|
|
||
|
const FileUploadInfo = ({
|
||
|
openFilePickerEventEmitter,
|
||
|
}: FileUploadInfoProps = FILE_UPLOAD_INFO_DEFAULT_PROPS): JSX.Element => {
|
||
|
const selectFileRef = useRef<HTMLInputElement>();
|
||
|
|
||
|
const [selectedFileList, setSelectedFileList] = useState<File[]>([]);
|
||
|
|
||
|
const convertMIMETypeToFileTypeKey = (
|
||
|
fileMIMEType: string,
|
||
|
): UploadFileTypes => {
|
||
|
const fileTypesIterator = UPLOAD_FILE_TYPES.entries();
|
||
|
|
||
|
let fileType: UploadFileTypes | undefined;
|
||
|
|
||
|
do {
|
||
|
const fileTypesResult = fileTypesIterator.next();
|
||
|
|
||
|
if (fileTypesResult.value) {
|
||
|
const [fileTypeKey, [mimeTypeToUse]] = fileTypesResult.value;
|
||
|
|
||
|
if (fileMIMEType === mimeTypeToUse) {
|
||
|
fileType = fileTypeKey;
|
||
|
}
|
||
|
} else {
|
||
|
fileType = 'other';
|
||
|
}
|
||
|
} while (!fileType);
|
||
|
|
||
|
return fileType;
|
||
|
};
|
||
|
|
||
|
const autocompleteAfterSelectFile: ChangeEventHandler<HTMLInputElement> = ({
|
||
|
target: { files },
|
||
|
}) => {
|
||
|
if (files) {
|
||
|
setSelectedFileList(Array.from(files));
|
||
|
}
|
||
|
};
|
||
|
|
||
|
useEffect(() => {
|
||
|
openFilePickerEventEmitter?.addListener('open', () => {
|
||
|
selectFileRef.current?.click();
|
||
|
});
|
||
|
}, [openFilePickerEventEmitter]);
|
||
|
|
||
|
return (
|
||
|
<form encType="multipart/form-data">
|
||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||
|
<InputLabel htmlFor="select-file">
|
||
|
<Input
|
||
|
id="select-file"
|
||
|
inputProps={{ multiple: true }}
|
||
|
onChange={autocompleteAfterSelectFile}
|
||
|
ref={selectFileRef}
|
||
|
sx={{ display: 'none' }}
|
||
|
type="file"
|
||
|
/>
|
||
|
</InputLabel>
|
||
|
{selectedFileList.map((file: File) => (
|
||
|
<FileInfo
|
||
|
fileName={file.name}
|
||
|
fileType={convertMIMETypeToFileTypeKey(file.type)}
|
||
|
fileSyncAnvilList={[]}
|
||
|
key={file.name}
|
||
|
/>
|
||
|
))}
|
||
|
{selectedFileList.length > 0 && (
|
||
|
<Button sx={{ textTransform: 'none' }}>
|
||
|
<BodyText text="Upload" />
|
||
|
</Button>
|
||
|
)}
|
||
|
</Box>
|
||
|
</form>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
FileUploadInfo.defaultProps = FILE_UPLOAD_INFO_DEFAULT_PROPS;
|
||
|
|
||
|
export default FileUploadInfo;
|