robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multiple file upload issues capped at 210mb for now

Browse Source
This commit is contained in:
robbond
2024-12-10 15:09:04 +00:00
parent b2e1c01dea
commit dcb6171dc1
10 changed files with 475 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+103 -4
View File
@@ -1,4 +1,6 @@
import { JSONPath as jsonpath } from "jsonpath-plus";
import axios from "axios";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
@@ -8,12 +10,17 @@ import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import Dropzone from "react-dropzone";
import { Field, FieldArray } from "redux-form";
import { deleteBlob, getFilesFromBlobHashed } from "../../actions";
import {
deleteBlob,
getFilesFromBlobHashed,
uploadSingleFile,
} from "../../actions";
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import pickListLookup from "../../data/picklistLookups.json";
import dynamic from "next/dynamic";
import { bytesToSize, getThumbnailIconByExtension } from "../utils";
import { setFileCount } from "../../store/appealType/action";
import {
addDays,
@@ -27,6 +34,9 @@ import {
import "react-quill-new/dist/quill.snow.css";
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
import { useStore as store, useSelector } from "react-redux";
import { useDispatch } from "react-redux";
const RenderTextfield = ({
id,
className,
@@ -1736,6 +1746,8 @@ export function FileUploadField(props) {
fileList={props.fileList}
setFilesForAppeal={props.setFilesForAppeal}
containerID={props.containerID}
uploadCount={props.uploadCount}
setFileCount={props.setFileCount}
/>
</>
);
@@ -1935,10 +1947,41 @@ const RenderFileUpload = (field) => {
return arr.filter((obj) => Object.keys(obj).length > 0);
}
const [errorMessage, setErrorMessage] = useState(null);
const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
const [uploadCountMessage, setUploadCountMessage] = useState("");
const handleDropRejected = (fileRejections) => {
const errors = fileRejections
.map(({ file, errors }) => {
return errors.map((error) => {
if (error.code === "file-too-large") {
return `${file.name} is too large. Please upload a smaller file.`;
}
if (error.code === "file-invalid-type") {
return `${file.name} has an invalid type. Please upload an image.`;
}
return `${file.name} is invalid.`;
});
})
.flat(); // Flatten the errors array
setRejectedFiles(errors); // Store the error messages for rejected files
};
// Handle accepted files (clear error message when files are accepted)
const handleDropAccepted = () => {
setErrorMessage(null); // Clear any previous error messages when files are accepted
setRejectedFiles([]); // Clear any previously rejected file errorsss
};
return (
<>
<Dropzone
key={field.input.name + "_key"}
maxSize={210 * 1024 * 1024}
accept={{
"application/pdf": [".pdf"],
"application/msword": [".doc"],
@@ -1952,6 +1995,7 @@ const RenderFileUpload = (field) => {
[".xlsx"],
}}
onDrop={(filesToUpload, e) => {
setCompletedUploadFiles(false);
const renamedAcceptedFiles = filesToUpload.map(
(file) =>
new File(
@@ -1965,7 +2009,25 @@ const RenderFileUpload = (field) => {
)
);
field.input.onChange(renamedAcceptedFiles);
setUploadCountMessage(renamedAcceptedFiles.length);
console.log("werwerw");
field.setFileCount(
field.uploadCount + renamedAcceptedFiles.length
);
uploadSingleFile(
renamedAcceptedFiles,
field.containerID,
field.ticketnumber
).then((data) => {
console.log(data);
setCompletedUploadFiles(true);
});
}}
onDropRejected={handleDropRejected}
onDropAccepted={handleDropAccepted}
>
{({ getRootProps, getInputProps }) => (
<>
@@ -1986,15 +2048,40 @@ const RenderFileUpload = (field) => {
)
</em>
</div>
<aside>{thumbs}</aside>
{/* <aside>{thumbs}</aside> */}
{uploadCountMessage > 0 &&
completedUploadFiles == false && (
<div className="govuk-body govuk-!-font-size-14">
Uploading {uploadCountMessage} files{" "}
</div>
)}
{completedUploadFiles > 0 && (
<div className="govuk-body govuk-!-font-size-14">
{uploadCountMessage} files completed{" "}
</div>
)}
</section>
</>
)}
</Dropzone>
{rejectedFiles.length > 0 && (
<div style={{ color: "red", marginTop: "10px" }}>
<ul>
{rejectedFiles.map((error, index) => (
<li key={index}>{error}</li>
))}
</ul>
</div>
)}
{field.meta.touched && field.meta.error && (
<span className="error">{field.meta.error}</span>
)}
{}
{filesList.length > 0 &&
(completedUploadFiles ? (
"Done"
) : (
<p className="govuk-body textloading">Uploading</p>
))}
{files && Array.isArray(files) && (
<>
{/* {(files = removeEmptyObjects(files))} */}
@@ -2020,7 +2107,19 @@ const RenderFileUpload = (field) => {
width="50"
/>
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
{file.name}( ({bytesToSize(file.size)})
{file.name} ({bytesToSize(file.size)}){" "}
<br />
<div id={file.name + "_" + i}>
{completedUploadFiles ? (
<p className="govuk-body govuk-!-font-size-14">
Upload complete
</p>
) : (
<p className="govuk-body textloading govuk-!-font-size-14">
Uploading...
</p>
)}
</div>
</span>
</div>
)