Local modifications to ClusterLabs/Anvil by Alteeve
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.
 
 
 
 
 
 

96 lines
2.6 KiB

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;