pedwfrontend/components/myportal/uploadFile.js

import Link from "next/link";
import { useState, useMemo } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import LoadingOverlay from "react-loading-overlay";
import DropzoneComponent from "../newappeal/fileupload";
import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";
import Dropzone, { useDropzone } from "react-dropzone";
import { uploadFiles } from "../../actions";

const required = (errorMsg) => (value) =>
    value || typeof value === "number" ? undefined : errorMsg;

export const minLength = (errorMsg) => (value) =>
    value && value.length < 4
        ? errorMsg //`Must be ${min} characters or more`
        : undefined;

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    hint3,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div className="govuk-form-group">
                <div id="basicSearch-hint" className="govuk-hint ">
                    <label
                        className="govuk-label "
                        htmlFor={id}
                        id={id + "_label"}
                    >
                        <span className="govuk-body-s">{hint1}</span>
                    </label>
                </div>

                <div>
                    <input
                        {...input}
                        className={className}
                        name={name}
                        id={id}
                    />
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message govuk-form-group--error"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {error}
                        </span>
                    )}
                </div>
            </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",
    width: "80%",
    margin: "20px auto 30px",
};

const activeStyle = {
    borderColor: "#2196f3",
};

const acceptStyle = {
    borderColor: "#00e676",
};

const rejectStyle = {
    borderColor: "#ff1744",
};
const RenderFileUpload = (field) => {
    const files = field.input.value;
    const style = useMemo(
        () => ({
            ...baseStyle,
            // ...(isDragActive ? activeStyle : {}),
            // ...(isDragAccept ? acceptStyle : {}),
            // ...(isDragReject ? rejectStyle : {}),
        }),
        []
        // [isDragActive, isDragReject, isDragAccept]
    );
    const [filesList, setFilesList] = useState([]);

    const thumbs = filesList.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>
    ));

    function bytesToSize(bytes) {
        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
        if (bytes == 0) return "0 Byte";
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
    }

    const getThumbnailIcon = (fileObj, fileType) => {
        switch (fileType) {
            case "text/html":
                return "/assets/images/documenttypes/html.png";
                break;
            case "text/plain":
                return "/assets/images/documenttypes/txt.png";
                break;
            case "application/msword":
                return "/assets/images/documenttypes/doc.png";
                break;
            case "application/pdf":
                return "/assets/images/documenttypes/pdf.png";
                break;
            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
                return "/assets/images/documenttypes/docx.png";
                break;
            case "text/csv":
                return "/assets/images/documenttypes/csv.png";
                break;
            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
                return "/assets/images/documenttypes/xlsx.png";
                break;

            case "application/zip":
                return "/assets/images/documenttypes/zip.png";
                break;
            case "image/jpeg":
            case "image/png":
                return URL.createObjectURL(fileObj);
                break;
        }
    };
    return (
        <div>
            <Dropzone
                // onDrop={(filesToUpload, e) =>
                //     field.input.onChange(filesToUpload)
                // }

                onDrop={(filesToUpload, e) => {
                    const renamedAcceptedFiles = filesToUpload.map(
                        (file) =>
                            new File([file], `${file.name}_${+new Date()}`, {
                                type: file.type,
                            })
                    );
                    field.input.onChange(renamedAcceptedFiles);
                    console.log(renamedAcceptedFiles);
                }}
            >
                {({ getRootProps, getInputProps }) => (
                    <div className="govuk-grid-row">
                        <div className="govuk-form-group"></div>
                        <section className="container">
                            <div {...getRootProps({ style })}>
                                {" "}
                                <input {...getInputProps()} />
                                <div>Drag and drop your files here.</div>
                            </div>
                            <aside>{thumbs}</aside>
                        </section>
                    </div>
                )}
            </Dropzone>

            {field.meta.touched && field.meta.error && (
                <span className="error">{field.meta.error}</span>
            )}
            {files && Array.isArray(files) && (
                <ul>
                    {files.map((file, i) => (
                        <div
                            key={file.name}
                            className="govuk-!-margin-bottom-5 fileThumb"
                        >
                            <img
                                src={getThumbnailIcon(file, file.type)}
                                alt={file.name}
                                width="50"
                            />{" "}
                            {"  "}
                            <span className="govuk-body govuk-!-padding-left-5">
                                {file.name} ({bytesToSize(file.size)})
                            </span>
                        </div>
                    ))}
                </ul>
            )}
        </div>
    );
};

let UploadFile = (props) => {
    let { t } = useTranslation();
    //const [showSpinnerState, setShowSpinnerState] = useState(false);
    const { handleSubmit, pristine, reset, submitting } = props;

    const router = useRouter();
    const { locale } = router;

    const onHandleSubmit = async (values) => {
        //spinnerState();
        console.log(values);

        const uploadAction = await uploadFiles(values);
        // router.push({
        //     pathname:
        //         router.locale == "cy"
        //             ? "/fymhorth/canlyniadauchwilio"
        //             : "/myportal/searchresults",
        //     query: { q: values.basicSearch },
        //     shallow: true,
        // });
    };

    return (
        <div className="card" id="casesearch-card">
            <div className="card-body">
                <h3 className="heading-small card-heading">Upload a file</h3>
                <div className="govuk-form-group">
                    <p className="govuk-body-s">reqweqwe eqwe qwe qwe qwe</p>
                </div>
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <div className="govuk-form-group">
                        <Field
                            validate={[
                                required(
                                    t(
                                        "myportal:searchcases-validation-required"
                                    )
                                ),
                                minLength(
                                    t(
                                        "myportal:searchcases-validation-minlength"
                                    )
                                ),
                            ]}
                            className="govuk-input"
                            component={RenderTextfield}
                            id="caseReference"
                            name="caseReference"
                            type="text"
                            aria-describedby="caseReference-hint"
                            hint1="Case Reference"
                        />
                    </div>
                    <div className="govuk-grid-row">
                        <Field
                            name="fileList"
                            id="fileList"
                            component={RenderFileUpload}
                            className="govuk-input govuk-input--width-20"
                            //validate={[required]}
                            label={props.label}
                            errorMsg="Is required"
                        />
                    </div>
                    <div className="govuk-form-group">
                        <button type="submit" className="govuk-button">
                            Add Files
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        currentView: state.currentView,
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
        myCases: state.myCases,
        watchedCases: state.watchedCases,
        myRepresentations: state.myRepresentations,
        awaitingSubmission: state.awaitingSubmission,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "uploadFileForm",
        destroyOnUnmount: false,
    })(UploadFile)
);