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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | 46x 46x 46x 17x 17x 17x 17x 17x 46x | import * as React from "react";
import "react-dropzone-uploader/dist/styles.css";
import Dropzone, {
IDropzoneProps,
IStyleCustomization,
} from "react-dropzone-uploader";
import Input from "./Input";
import Layout from "./Layout";
import { palette } from "@palette";
import { getCustomUploadFileText } from "./utils";
import { getFilesFromEvent as getFilesFromEventUtil } from "@shared/FileUpload/utils";
import { MAX_UPLOAD_SIZE } from "@hooks/upload-api/uploadHooks";
const defaultSupportedFormatText = ".pdf, .png, .jpg, .jpeg, .webp";
type UploadFileProps = {
border?: string;
accept?: string;
maxFiles?: number;
multiple?: boolean;
width?: string | number;
backgroundColor?: string;
styles?: IStyleCustomization<React.CSSProperties>;
onSubmit?: IDropzoneProps["onSubmit"];
onChangeStatus?: IDropzoneProps["onChangeStatus"];
getUploadParams?: IDropzoneProps["getUploadParams"];
getFilesFromEvent?: IDropzoneProps["getFilesFromEvent"];
initialFiles?: File[];
disabled?: boolean;
supportedFormatText?: string;
maxSizeInBytes?: number;
onDrop?: (payload: number) => void;
customText?: string;
};
// In the whole app, the max file size is 50MB => 50000000 bytes
const defaultMaxFileSize = MAX_UPLOAD_SIZE.value;
export const UploadFile = React.memo(function UploadFile({
styles = {
dropzone: {},
},
maxFiles,
multiple = false,
onSubmit,
border,
onChangeStatus,
getUploadParams,
getFilesFromEvent,
backgroundColor,
width,
accept,
initialFiles,
disabled = false,
supportedFormatText = defaultSupportedFormatText,
maxSizeInBytes = defaultMaxFileSize,
onDrop,
customText: customizedTextProp,
}: UploadFileProps) {
const { dropzone, ...restStyle } = styles;
const dropzoneStyle = {
dropzone: {
height: 200,
width: width || 332,
minWidth: 330,
borderRadius: 12,
margin: 0,
justifyContent: "center",
backgroundColor: backgroundColor || palette.neutral[5],
border:
border == "none"
? "none"
: `2px dashed ${border || palette.neutral[60]}`,
"&:hover": {
border: `2px solid ${palette.neutral[60]}`,
backgroundColor: "#F8F8F6",
},
"&.dzu-dropzoneActive": {
border: `2px solid ${palette.neutral[60]}`,
"& > div": {
backgroundColor: "#F8F8F6",
},
},
...dropzone,
},
...restStyle,
};
const customText = getCustomUploadFileText({
maxSizeInBytes,
multiple,
maxFiles,
supportedFormatText,
});
return (
<Dropzone
styles={dropzoneStyle}
disabled={disabled}
getUploadParams={getUploadParams}
onChangeStatus={onChangeStatus}
PreviewComponent={() => <></>}
LayoutComponent={Layout}
InputComponent={(prop) => (
<Input
{...prop}
customText={customizedTextProp || customText || ""}
onDrop={onDrop}
/>
)}
onSubmit={onSubmit}
accept={accept}
maxFiles={maxFiles}
multiple={multiple}
canRemove
getFilesFromEvent={getFilesFromEvent || getFilesFromEventUtil}
initialFiles={initialFiles}
maxSizeBytes={maxSizeInBytes}
/>
);
});
export const mime = {
image: "image/webp, image/jpeg, image/png",
applications: "application/pdf",
// image: "image/webp, image/jpeg, image/gif, image/png",
// text: "text/plain, text/csv, text/tab-separated-values, .csv",
// applications:
// "application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.apple.keynote, application/vnd.apple.numbers, application/vnd.apple.pages, application/vnd.oasis.opendocument.text, application/rtf, application/vnd.ms-excel",
};
|