document upload form

components/elements/index.js

@@ -3,13 +3,15 @@ import { Field, reduxForm } from "redux-form";
 import { useRouter } from "next/router";
 import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
 import cy from "date-fns/locale/cy";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import "react-datepicker/dist/react-datepicker.css";
 import moment from "moment";
 import jsonpath from "jsonpath";
 import fieldLookup from "../../data/crmfieldlookuptranslations.json";
 import pickListLookup from "../../data/picklistLookups.json";
 import useTranslation from "next-translate/useTranslation";
+import FileUpload from "../newappeal/fileupload";
+import { useDropzone } from "react-dropzone";
 
 const RenderTextfield = ({
     id,
@@ -538,3 +540,122 @@ const PickListTranslations = (optionValue) => {
     //console.log(optionTrans, optionValue);
     return optionTrans;
 };
+
+export function FileUploadField(props) {
+    return (
+        <div className="govuk-grid-row">
+            <Field
+                name={props.name}
+                id={props.name}
+                component={RenderFileUpload}
+                type="text"
+                className="govuk-input govuk-input--width-20"
+                //validate={[required]}
+                label={props.label}
+                errorMsg="Is required"
+            />
+            helllo
+        </div>
+    );
+}
+
+const baseStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: "#eeeeee",
+    borderStyle: "dashed",
+    backgroundColor: "#fafafa",
+    color: "#bdbdbd",
+    transition: "border .3s ease-in-out",
+};
+
+const activeStyle = {
+    borderColor: "#2196f3",
+};
+
+const acceptStyle = {
+    borderColor: "#00e676",
+};
+
+const rejectStyle = {
+    borderColor: "#ff1744",
+};
+
+const RenderFileUpload = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    const [files, setFiles] = useState([]);
+
+    const onDrop = useCallback((acceptedFiles) => {
+        setFiles(
+            acceptedFiles.map((file) =>
+                Object.assign(file, {
+                    preview: URL.createObjectURL(file),
+                })
+            )
+        );
+    }, []);
+
+    const {
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject,
+    } = useDropzone({
+        onDrop,
+    });
+
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            ...(isDragActive ? activeStyle : {}),
+            ...(isDragAccept ? acceptStyle : {}),
+            ...(isDragReject ? rejectStyle : {}),
+        }),
+        [isDragActive, isDragReject, isDragAccept]
+    );
+
+    const thumbs = files.map((file) => (
+        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+            <img src={file.preview} alt={file.name} width="50" /> -{" "}
+            <span className="govuk-body">
+                {file.name} ({file.size / 1024}kb)
+            </span>
+        </div>
+    ));
+
+    // clean up
+    useEffect(
+        () => () => {
+            files.forEach((file) => URL.revokeObjectURL(file.preview));
+        },
+        [files]
+    );
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-form-group"></div>
+            <section className="container">
+                <div {...getRootProps({ style, className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <p>Drag and drop files here or click to select files</p>
+                </div>
+            </section>{" "}
+            <aside>{thumbs}</aside>
+            {touched && errorStr && <span>{errorStr}</span>}
+        </div>
+    );
+};