upodated rep file upload
This commit is contained in:
@@ -8,6 +8,14 @@ import "react-datepicker/dist/react-datepicker.css";
|
||||
import Dropzone from "react-dropzone";
|
||||
import "react-quill-new/dist/quill.snow.css";
|
||||
import { Field } from "redux-form";
|
||||
import {
|
||||
uploadSingleFile,
|
||||
deleteBlob,
|
||||
deleteRepBlob,
|
||||
getFilesFromBlobHashed,
|
||||
getFilesFromBlobproxy,
|
||||
} from "../../../actions";
|
||||
|
||||
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
|
||||
|
||||
import {
|
||||
@@ -911,9 +919,9 @@ export const RenderFileUpload = (field) => {
|
||||
|
||||
const filelistObj = field.fileList || {};
|
||||
|
||||
console.log("----", filelistObj.length);
|
||||
//let blobList = filelistObj;
|
||||
|
||||
let blobList = filelistObj;
|
||||
let blobList = field.props.currentView.fileList;
|
||||
|
||||
function removeNullObjects(arr) {
|
||||
if (arr.length === 0) {
|
||||
@@ -939,9 +947,9 @@ export const RenderFileUpload = (field) => {
|
||||
);
|
||||
}
|
||||
|
||||
blobList = removeEmptyObjects(blobList);
|
||||
blobList = removeObjectsWithUndefinedKey(blobList, "name");
|
||||
blobList = removeNullObjects(blobList);
|
||||
//blobList = removeEmptyObjects(blobList);
|
||||
//blobList = removeObjectsWithUndefinedKey(blobList, "name");
|
||||
//blobList = removeNullObjects(blobList);
|
||||
|
||||
let buildAppealFilesArray = [];
|
||||
|
||||
@@ -978,22 +986,60 @@ export const RenderFileUpload = (field) => {
|
||||
blobName,
|
||||
deleteblobhash,
|
||||
getblobshash,
|
||||
casefolderID
|
||||
casefolderID,
|
||||
filenamePrefix
|
||||
) => {
|
||||
deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
|
||||
deleteRepBlob(
|
||||
containerName,
|
||||
blobName,
|
||||
deleteblobhash,
|
||||
casefolderID,
|
||||
filenamePrefix
|
||||
)
|
||||
.then((data) => data)
|
||||
.then(() => {
|
||||
getFilesFromBlobHashed(
|
||||
containerName,
|
||||
getblobshash,
|
||||
casefolderID
|
||||
).then((newfilelist) => field.setFilesForAppeal(newfilelist));
|
||||
casefolderID + "/" + filenamePrefix
|
||||
).then((newfilelist) =>
|
||||
field.setFilesForRepresentations(newfilelist.value[0])
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
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
|
||||
maxSize={10 * 1024 * 1024}
|
||||
accept={{
|
||||
"application/pdf": [".pdf"],
|
||||
"application/msword": [".doc"],
|
||||
@@ -1011,14 +1057,94 @@ export const RenderFileUpload = (field) => {
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${field.filenamePrefix}_-_Attachment_-_${file.name}`,
|
||||
`${
|
||||
field.filenamePrefix.hasOwnProperty(
|
||||
"representationForm"
|
||||
) &&
|
||||
field.filenamePrefix.representationForm.hasOwnProperty(
|
||||
"values"
|
||||
) &&
|
||||
field.filenamePrefix.representationForm.values.hasOwnProperty(
|
||||
"repfile_name"
|
||||
) &&
|
||||
field.filenamePrefix.representationForm
|
||||
.values.repfile_name
|
||||
}_-_Attachment_-_${file.name}`,
|
||||
{
|
||||
type: file.type,
|
||||
}
|
||||
)
|
||||
);
|
||||
field.input.onChange(renamedAcceptedFiles);
|
||||
setUploadCountMessage(renamedAcceptedFiles.length);
|
||||
|
||||
uploadSingleFile(
|
||||
renamedAcceptedFiles,
|
||||
field.containerID,
|
||||
field.ticketnumber +
|
||||
"/" +
|
||||
field.filenamePrefix.representationForm.values
|
||||
.repfile_name
|
||||
).then((data) => {
|
||||
console.log(data);
|
||||
let buildAppealFilesArray = [];
|
||||
let values = field;
|
||||
let filesUploadObj = renamedAcceptedFiles;
|
||||
|
||||
for (let key in filesUploadObj) {
|
||||
typeof filesUploadObj[key].name != "undefined" &&
|
||||
buildAppealFilesArray.push({
|
||||
"name": filesUploadObj[key].name,
|
||||
"size": filesUploadObj[key].size,
|
||||
});
|
||||
}
|
||||
|
||||
//console.log(buildAppealFilesArray);
|
||||
function removeDuplicates(arr, key) {
|
||||
const seen = new Set();
|
||||
return arr.filter((item) => {
|
||||
const value = item[key];
|
||||
if (seen.has(value)) {
|
||||
return false; // Duplicate found
|
||||
} else {
|
||||
seen.add(value); // Add value to the set
|
||||
return true; // Keep the item
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
buildAppealFilesArray = values.hasOwnProperty(
|
||||
"fileList"
|
||||
)
|
||||
? buildAppealFilesArray.concat(values.fileList)
|
||||
: buildAppealFilesArray;
|
||||
|
||||
buildAppealFilesArray = removeDuplicates(
|
||||
buildAppealFilesArray,
|
||||
"name"
|
||||
);
|
||||
|
||||
// Object.assign(values, {
|
||||
// "fileList": buildAppealFilesArray,
|
||||
// });
|
||||
getFilesFromBlobproxy(
|
||||
field.containerID,
|
||||
field.ticketnumber +
|
||||
"/" +
|
||||
(typeof field.filenamePrefix != "object"
|
||||
? field.filenamePrefix
|
||||
: field.filenamePrefix.representationForm
|
||||
.values.repfile_name)
|
||||
).then((data) => {
|
||||
data = data.value || {};
|
||||
field.input.value == null;
|
||||
field.setFilesForRepresentations(data[0]);
|
||||
setCompletedUploadFiles(true);
|
||||
});
|
||||
});
|
||||
}}
|
||||
onDropRejected={handleDropRejected}
|
||||
onDropAccepted={handleDropAccepted}
|
||||
>
|
||||
{({ getRootProps, getInputProps }) => (
|
||||
<>
|
||||
@@ -1030,6 +1156,7 @@ export const RenderFileUpload = (field) => {
|
||||
{t(
|
||||
"myrepresentations:fileupload-drop-label"
|
||||
)}
|
||||
(Max 500MB)
|
||||
</div>
|
||||
<em>
|
||||
(
|
||||
@@ -1040,57 +1167,93 @@ export const RenderFileUpload = (field) => {
|
||||
</em>
|
||||
</div>
|
||||
<aside>{thumbs}</aside>
|
||||
{uploadCountMessage > 0 &&
|
||||
completedUploadFiles == false && (
|
||||
<div className="govuk-body govuk-!-font-size-14">
|
||||
Uploading {uploadCountMessage} files{" "}
|
||||
</div>
|
||||
)}
|
||||
{completedUploadFiles > 0 &&
|
||||
uploadCountMessage > 0 && (
|
||||
<div className="govuk-body govuk-!-font-size-14">
|
||||
{uploadCountMessage} files uploaded{" "}
|
||||
</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>
|
||||
)}
|
||||
{filesUploadObj && Array.isArray(filesUploadObj) && (
|
||||
<ul>
|
||||
{filesUploadObj.map(
|
||||
(file, i) =>
|
||||
typeof file.name != "undefined" && (
|
||||
<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-!-font-size-14 govuk-!-padding-left-5">
|
||||
{file.name} ({bytesToSize(file.size)})
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
{!completedUploadFiles &&
|
||||
filesUploadObj &&
|
||||
Array.isArray(filesUploadObj) &&
|
||||
filesUploadObj.map(
|
||||
(file, i) =>
|
||||
typeof file.name != "undefined" && (
|
||||
<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-!-font-size-14 govuk-!-padding-left-5">
|
||||
{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>
|
||||
)
|
||||
)}
|
||||
{blobList.length > 0 && (
|
||||
<h4>{t("myrepresentations:previously-added-files")}</h4>
|
||||
)}
|
||||
{blobList.map((blob, i) => (
|
||||
<div
|
||||
key={blob.name + "_" + i}
|
||||
className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
|
||||
>
|
||||
<div className="">
|
||||
<span
|
||||
className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
|
||||
onClick={() => {
|
||||
deleteThisBlob(
|
||||
field.containerID,
|
||||
blob.name,
|
||||
blob.hasheddeletepath,
|
||||
blob.hashgetblobs,
|
||||
field.ticketnumber
|
||||
);
|
||||
}}
|
||||
title="Remove this file"
|
||||
>
|
||||
−
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
|
||||
onClick={() => {
|
||||
setUploadCountMessage(uploadCountMessage - 1);
|
||||
deleteThisBlob(
|
||||
field.containerID,
|
||||
blob.name,
|
||||
blob.hasheddeletepath,
|
||||
blob.hashgetblobs,
|
||||
field.ticketnumber,
|
||||
blob.path.split("/")[1]
|
||||
);
|
||||
}}
|
||||
title="Remove this file"
|
||||
>
|
||||
−
|
||||
</span>
|
||||
|
||||
<img
|
||||
src={getThumbnailIconByExtension(blob.name)}
|
||||
alt={blob.name}
|
||||
@@ -1134,7 +1297,7 @@ export function FileUploadField(props) {
|
||||
ticketnumber={props.ticketnumber}
|
||||
hint={props.hint}
|
||||
fileList={props.fileList}
|
||||
setFilesForAppeal={props.setFilesForAppeal}
|
||||
setFilesForRepresentations={props.setFilesForRepresentations}
|
||||
containerID={props.containerID}
|
||||
filenamePrefix={
|
||||
props.filenamePrefix.hasOwnProperty("representationForm") &&
|
||||
@@ -1151,6 +1314,7 @@ export function FileUploadField(props) {
|
||||
.values.repfile_name
|
||||
: ""
|
||||
}
|
||||
props={props}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user