138 lines
3.9 KiB
JavaScript
138 lines
3.9 KiB
JavaScript
// 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 as jsonpath } from "jsonpath-plus";
|
|
// 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>
|
|
// ));
|
|
// 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-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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DropzoneComponent;
|