document upload form

2022-02-03 15:13:00 +00:00
parent 3639fa3688
commit 5ea7681f77
47 changed files with 13368 additions and 12303 deletions
@@ -1,42 +1,137 @@
-import { useDropzone } from "react-dropzone";
-import Link from "next/link";
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
-import _ from "lodash";
+// import { useDropzone } from "react-dropzone";
+// import Link from "next/link";
+// import { useState, useEffect } from "react";
+// import { useRouter } from "next/router";
+// import useTranslation from "next-translate/useTranslation";
+// import jsonpath from "jsonpath";
+// import _ from "lodash";

-const FileUpload = () => {
-    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
-    const files = acceptedFiles.map((file) => (
-        <li key={file.path}>
-            {file.path} - {file.size} bytes
-        </li>
+// const FileUpload = () => {
+//     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+//     const files = acceptedFiles.map((file) => (
+//         <li key={file.path}>
+//             {file.path} - {file.size} bytes
+//         </li>
+//     ));
+//     return (
+//         <div className="govuk-grid-column-full">
+//             <div className="govuk-grid-row">
+//                 <div className="govuk-form-group">
+//                     <section className="container">
+//                         <div
+//                             {...getRootProps({
+//                                 className: "dropzone",
+//                             })}
+//                         >
+//                             <input {...getInputProps()} />
+//                             <p>
+//                                 Drag and drop files here or click to select
+//                                 files
+//                             </p>
+//                         </div>
+//                         <aside>
+//                             <h4>Files</h4>
+//                             <ul>{files}</ul>
+//                         </aside>
+//                     </section>
+//                 </div>
+//             </div>
+//         </div>
+//     );
+// };
+// export default FileUpload;
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+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",
+};
+
+function DropzoneComponent(props) {
+    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-column-full">
-            <div className="govuk-grid-row">
-                <div className="govuk-form-group">
-                    <section className="container">
-                        <div
-                            {...getRootProps({
-                                className: "dropzone",
-                            })}
-                        >
-                            <input {...getInputProps()} />
-                            <p>
-                                Drag and drop files here or click to select
-                                files
-                            </p>
-                        </div>
-                        <aside>
-                            <h4>Files</h4>
-                            <ul>{files}</ul>
-                        </aside>
-                    </section>
+        <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>
-            </div>
+            </section>{" "}
+            <aside>{thumbs}</aside>
        </div>
    );
-};
-export default FileUpload;
+}
+
+export default DropzoneComponent;