upload fies to storage account for appeal
This commit is contained in:
+119
-107
@@ -14,6 +14,14 @@ import FileUpload from "../newappeal/fileupload";
|
||||
import Dropzone, { useDropzone } from "react-dropzone";
|
||||
import _ from "lodash";
|
||||
import { connect, useDispatch } from "react-redux";
|
||||
import {
|
||||
getFilesFromBlob,
|
||||
deleteBlob,
|
||||
downloadBlob,
|
||||
hashAPIPath,
|
||||
} from "../../actions";
|
||||
import { setFilesForAppeal } from "../../store/appealType/action";
|
||||
import Link from "next/link";
|
||||
|
||||
import {
|
||||
addYears,
|
||||
@@ -1246,6 +1254,8 @@ export function FileUploadField(props) {
|
||||
ticketnumber={props.ticketnumber}
|
||||
documentTypeCode={props.documentTypeCode}
|
||||
hint={props.hint}
|
||||
fileList={props.fileList}
|
||||
setFilesForAppeal={props.setFilesForAppeal}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@@ -1277,104 +1287,6 @@ const rejectStyle = {
|
||||
borderColor: "#ff1744",
|
||||
};
|
||||
|
||||
// const RenderFileUpload2 = ({
|
||||
// id,
|
||||
// className,
|
||||
// rows,
|
||||
// datafieldname,
|
||||
// name,
|
||||
// label,
|
||||
// input,
|
||||
// errorMsg,
|
||||
// meta: { touched, errorStr },
|
||||
// ...custom
|
||||
// }) => {
|
||||
// const [files, setFiles] = useState([]);
|
||||
|
||||
// const onDrop = useCallback((acceptedFiles, fileRejections, event) => {
|
||||
// setFiles(
|
||||
// acceptedFiles.map((file) =>
|
||||
// Object.assign(file, {
|
||||
// preview: URL.createObjectURL(file),
|
||||
// })
|
||||
// )
|
||||
// );
|
||||
// console.log(acceptedFiles);
|
||||
// event.target[acceptedFiles];
|
||||
// console.log(event.target.files);
|
||||
// }, []);
|
||||
|
||||
// const onChange = useCallback((acceptedFiles, fileRejections, event) => {
|
||||
// setFiles(
|
||||
// acceptedFiles.map((file) =>
|
||||
// Object.assign(file, {
|
||||
// preview: URL.createObjectURL(file),
|
||||
// })
|
||||
// )
|
||||
// );
|
||||
// event.target.files[acceptedFiles];
|
||||
// console.log(event.target.files);
|
||||
// }, []);
|
||||
|
||||
// const {
|
||||
// getRootProps,
|
||||
// getInputProps,
|
||||
// isDragActive,
|
||||
// isDragAccept,
|
||||
// isDragReject,
|
||||
// } = useDropzone({
|
||||
// onDrop,
|
||||
// onChange,
|
||||
// });
|
||||
|
||||
// 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]
|
||||
// );
|
||||
|
||||
// const onChangeFile = (e) => {
|
||||
// const {
|
||||
// input: { onChange },
|
||||
// } = props;
|
||||
// onChange(e.target.files[0]);
|
||||
// };
|
||||
// return (
|
||||
// <div className="govuk-grid-row">
|
||||
// <div className="govuk-form-group"></div>
|
||||
// <section className="container">
|
||||
// <div {...getRootProps({ style })}>
|
||||
// <input {...getInputProps()} />
|
||||
// <div>Drag and drop your images here.</div>
|
||||
// </div>
|
||||
// </section>{" "}
|
||||
// <aside>{thumbs}</aside>
|
||||
// {touched && errorStr && <span>{errorStr}</span>}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
const RenderFileUpload = (field) => {
|
||||
const files = field.input.value;
|
||||
let { t } = useTranslation();
|
||||
@@ -1437,11 +1349,54 @@ const RenderFileUpload = (field) => {
|
||||
case "image/png":
|
||||
return URL.createObjectURL(fileObj);
|
||||
break;
|
||||
default:
|
||||
return "/assets/images/documenttypes/txt.png";
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const getThumbnailIconByExtension = (blobName) => {
|
||||
let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);
|
||||
|
||||
switch (fileType) {
|
||||
case "html":
|
||||
return "/assets/images/documenttypes/html.png";
|
||||
break;
|
||||
case "txt":
|
||||
return "/assets/images/documenttypes/txt.png";
|
||||
break;
|
||||
case "doc":
|
||||
return "/assets/images/documenttypes/doc.png";
|
||||
break;
|
||||
case "pdf":
|
||||
return "/assets/images/documenttypes/pdf.png";
|
||||
break;
|
||||
case "docx":
|
||||
return "/assets/images/documenttypes/docx.png";
|
||||
break;
|
||||
case "csv":
|
||||
return "/assets/images/documenttypes/csv.png";
|
||||
break;
|
||||
case "xlsx":
|
||||
return "/assets/images/documenttypes/xlsx.png";
|
||||
break;
|
||||
|
||||
case "zip":
|
||||
return "/assets/images/documenttypes/zip.png";
|
||||
break;
|
||||
case "jpeg":
|
||||
case "jpg":
|
||||
return "/assets/images/documenttypes/jpg.png";
|
||||
case "png":
|
||||
return "/assets/images/documenttypes/png.png";
|
||||
break;
|
||||
default:
|
||||
return "/assets/images/documenttypes/txt.png";
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const getDocumentType = (docCode) => {
|
||||
console.log(docCode);
|
||||
switch (docCode) {
|
||||
case "000001":
|
||||
return "000001";
|
||||
@@ -1493,6 +1448,25 @@ const RenderFileUpload = (field) => {
|
||||
return "000000";
|
||||
}
|
||||
};
|
||||
|
||||
const filelistObj = field.fileList || {};
|
||||
|
||||
const blobList = jsonpath.query(
|
||||
filelistObj,
|
||||
"$..[?(@.documentType=='" + field.documentTypeCode + "')]"
|
||||
);
|
||||
|
||||
const deleteThisBlob = async (containerName, blobName) => {
|
||||
console.log(containerName, blobName);
|
||||
deleteBlob(containerName, blobName)
|
||||
.then((data) => data)
|
||||
.then(() => {
|
||||
getFilesFromBlob(containerName).then((newfilelist) =>
|
||||
field.setFilesForAppeal(newfilelist)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropzone
|
||||
@@ -1501,14 +1475,13 @@ const RenderFileUpload = (field) => {
|
||||
// }
|
||||
|
||||
onDrop={(filesToUpload, e) => {
|
||||
console.log(field.ticketnumber, field.documentTypeCode);
|
||||
const renamedAcceptedFiles = filesToUpload.map(
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${field.ticketnumber}_${getDocumentType(
|
||||
field.documentTypeCode
|
||||
)}_${file.name}`,
|
||||
`${getDocumentType(field.documentTypeCode)}_${
|
||||
file.name
|
||||
}`,
|
||||
{
|
||||
type: file.type,
|
||||
}
|
||||
@@ -1519,14 +1492,14 @@ const RenderFileUpload = (field) => {
|
||||
>
|
||||
{({ getRootProps, getInputProps }) => (
|
||||
<>
|
||||
{field.hint != false && (
|
||||
<div className="govuk-hint">{t(field.hint)}</div>
|
||||
{/* {field.hint != false && (
|
||||
<div className="govuk-hint">ss{t(field.hint)}</div>
|
||||
)}
|
||||
<div className="govuk-form-group"></div>
|
||||
<div className="govuk-form-group"></div> */}
|
||||
<section className="container">
|
||||
<div {...getRootProps({ style })}>
|
||||
{" "}
|
||||
<input {...getInputProps()} />
|
||||
<input id={field.id} {...getInputProps()} />
|
||||
<div>Drag and drop your files here.</div>
|
||||
</div>
|
||||
<aside>{thumbs}</aside>
|
||||
@@ -1556,6 +1529,45 @@ const RenderFileUpload = (field) => {
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{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.ticketnumber, blob.name);
|
||||
}}
|
||||
title="Remove this file"
|
||||
>
|
||||
−
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
src={getThumbnailIconByExtension(blob.name)}
|
||||
alt={blob.name}
|
||||
width="50"
|
||||
/>
|
||||
|
||||
<Link
|
||||
key={i}
|
||||
scroll={false}
|
||||
href={
|
||||
"/api/file/downloadblob?container=" +
|
||||
field.ticketnumber.toLowerCase() +
|
||||
"&blobname=" +
|
||||
blob.name +
|
||||
blob.hashedfilepath
|
||||
}
|
||||
>
|
||||
<a className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link">
|
||||
{blob.name} ({bytesToSize(blob.contentLength)})
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
))}{" "}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user