43 lines
1.4 KiB
JavaScript
43 lines
1.4 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 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>
|
|
));
|
|
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;
|