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 * 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 Preview from "./Preview";
import { getFilesFromEvent as getFilesFromEventUtil } from "@shared/FileUpload/utils";
type UploadFileProps = {
border?: string;
accept?: string;
maxFiles?: number;
multiple?: boolean;
styles?: IStyleCustomization<React.CSSProperties>;
onSubmit?: IDropzoneProps["onSubmit"];
onChangeStatus?: IDropzoneProps["onChangeStatus"];
getUploadParams?: IDropzoneProps["getUploadParams"];
getFilesFromEvent?: IDropzoneProps["getFilesFromEvent"];
};
const UploadFile = ({
styles,
maxFiles = 1,
multiple = false,
onSubmit,
border,
onChangeStatus,
getUploadParams,
getFilesFromEvent,
accept = "image/*,pdf/*",
}: UploadFileProps) => {
/*
* specify upload params and url for your files
* const getUploadParams: IDropzoneProps["getUploadParams"] = ({ meta }) => {
* return { url: "https://httpbin.org/post" };
* };
* // called every time a file's `status` changes
* const handleChangeStatus: IDropzoneProps["onChangeStatus"] = (
* { meta, file },
* status,
* ) => {
* console.log(status, meta, file);
* };
*
* // receives array of files that are done uploading when submit button is clicked
* const handleSubmit: IDropzoneProps["onSubmit"] = (files, allFiles) => {
* console.log(files.map((f) => f.meta));
* allFiles.forEach((f) => f.remove());
* };
*
* const getFilesFromEvent: IDropzoneProps["getFilesFromEvent"] = (e) => {
* return new Promise((resolve) => {
* // getDroppedOrSelectedFiles(e).then((chosenFiles) => {
* // resolve(chosenFiles.map((f) => f.fileObject));
* // });
* console.log("getFilesFromEvent: ", e, "\n\nresolve: ", resolve);
* });
* };
*/
const dropzoneStyle = {
dropzone: {
height: 200,
minWidth: 330,
overflow: "auto",
padding: "8px 8px",
borderRadius: "6px",
justifyContent: "center",
border: border == "none" ? "none" : `1.5px dashed #9C9AA3`,
// borderImageOutset: "null !important",
},
...styles,
};
return (
<>
<Dropzone
styles={dropzoneStyle}
getUploadParams={getUploadParams}
onChangeStatus={onChangeStatus}
PreviewComponent={Preview}
LayoutComponent={Layout}
InputComponent={Input}
onSubmit={onSubmit}
accept={accept}
maxFiles={maxFiles}
multiple={multiple}
getFilesFromEvent={getFilesFromEvent || getFilesFromEventUtil}
/>
</>
);
};
export default UploadFile;
|