diff --git a/Form/Core/FileField.js b/Form/Core/FileField.js index 46133dc..2a701d2 100644 --- a/Form/Core/FileField.js +++ b/Form/Core/FileField.js @@ -4,7 +4,7 @@ import { useMemo } from "react"; import { useApiClient, useCompany } from "@utils/NejManager/NejProvider"; import axios from "axios"; import { useField } from "formik"; -import NejDropzone from "@components/File/NejDropzone"; +import NejDropzone from "./NejDropzone"; /** * Renders a file input field with dropzone functionality. diff --git a/Form/Core/NejDropzone.js b/Form/Core/NejDropzone.js new file mode 100644 index 0000000..775e2b4 --- /dev/null +++ b/Form/Core/NejDropzone.js @@ -0,0 +1,57 @@ +import tw from "twin.macro"; +import { useDropzone } from "react-dropzone"; +import { useMemo } from "react"; +import { useApiClient, useCompany } from "@utils/NejManager/NejProvider"; +import axios from "axios"; + +/** + * NejDropzone component for handling file uploads. + * @param {Object} props - Component props. + * @param {(files: T[], event: DropEvent) => void} props.onDrop - Callback function triggered when files are dropped. + * @param {string[]} props.accept - Array of supported file extensions. + * @param {Array} props.value - The files to be uploaded. + * @param {boolean} props.single - Whether to allow only one file to be uploaded. + * @param {(file: T) => FileError | FileError[] | null} props.validator - The validator function to be used. + * @param {string} props.text - The text to be displayed in the dropzone. + * @returns {JSX.Element} - NejDropzone component. + */ +export default function NejDropzone({ value, accept, onDrop, validator, single, text, css, children, ...props }) { + + const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({ + //validator: validator, + onDropAccepted: onDrop, + accept: accept, + validator: validator, + maxFiles: single ? 1 : undefined, + }); + + const style = useMemo( + () => ({ + ...tw`flex flex-col items-center min-h-32 justify-center text-primary p-2 border rounded-xl border-2 border-dashed bg-primary`, + ...(isFocused && tw`bg-secondary`), + ...(isDragAccept && tw`border-accent`), + ...(isDragReject && tw`border-red-600`), + css + }), + [isFocused, isDragAccept, isDragReject, css] + ); + + let fil = value == null ? null : single ? [value] : value; + + return ( +
+ + {children ?? (fil?.length > 0 ? ( + fil.map((file) => ( +
+

{file.name}

+
+ )) + ) : ( + <> +

{text ?? "Drag 'n' drop some files here, or click to select files"}

+ + ))} +
+ ); +}