Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import { IInputProps } from "react-dropzone-uploader";
import { palette } from "@palette";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { Text } from "@common/Text";
import { DropZoneIcon } from "@assets/icons";
const Input = ({
files,
accept,
onFiles,
multiple,
getFilesFromEvent,
extra,
}: IInputProps) => {
const isFile = files.length > 0;
const text = isFile && multiple ? "Upload more files" : "Upload file here";
const isRejected = extra.reject;
const loading = files.some((f) =>
["preparing", "getting_upload_params", "uploading"].includes(f.meta.status),
);
const hightlight = {
"& .MuiTypography-root": {
color: palette.primary[500],
},
"svg > path": {
stroke: "transparent",
fill: palette.primary.main,
},
};
return (
<Stack
height={100}
width="100%"
alignItems="center"
justifyContent="center"
>
<Stack
width="100%"
component="label"
alignItems="center"
sx={{
cursor: "pointer",
"&:hover": {
...hightlight,
},
...(loading && {
...hightlight,
}),
}}
>
{isRejected ? (
<Box component="div">
<Text
variant="caption"
fontWeight="semibold"
color={palette.error.main}
>
file not supported
</Text>
</Box>
) : (
<>
<Box component="div">
<DropZoneIcon />
</Box>
<Box component="div" textAlign="center">
<Text variant="caption" fontWeight="semibold">
{text}
</Text>
</Box>
</>
)}
<input
style={{ display: "none" }}
type="file"
id="upload"
accept={accept}
onChange={async (e) => {
const chosenFiles = await getFilesFromEvent(e);
onFiles(chosenFiles);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.value = null;
}}
/>
</Stack>
<Text variant="captionSmall" color={palette.neutral[600]}>
You can drag your file here
</Text>
</Stack>
);
};
export default Input;
|