reps pdf upload directory restructure

components/case/representation/representationAppellant.js

@@ -14,6 +14,12 @@ import {
     RenderFileUpload,
     FileUploadField,
 } from "./representationElements";
+import {
+    getFormCollectionByID,
+    getThumbnailIconByExtension,
+    bytesToSize,
+} from "../../utils";
+
 import { useDropzone } from "react-dropzone";
 // import {
 //     setRepresentationCapacity,
@@ -97,7 +103,6 @@ const RepAppellant = (props) => {
                                     aria-describedby={props.name + "-hint"}
                                 />
                             </div>
-
                             <div className="govuk-form-group govuk-!-margin-bottom-9">
                                 <FileUploadField
                                     name={"representationDocuments"}
@@ -112,6 +117,37 @@ const RepAppellant = (props) => {
                                     }
                                 />
                             </div>
+                            {props.currentView.caseReference.hasOwnProperty(
+                                "repDetails"
+                            ) &&
+                            props.currentView.caseReference.repDetails.filesList
+                                .length > 0 ? (
+                                <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                    {props.currentView.caseReference.repDetails.filesList.map(
+                                        (blob, i) => (
+                                            <div
+                                                key={blob.name + "_" + i}
+                                                className="govuk-!-margin-bottom-5 fileThumb "
+                                            >
+                                                <img
+                                                    src={getThumbnailIconByExtension(
+                                                        blob.name
+                                                    )}
+                                                    alt={blob.name}
+                                                    width="50"
+                                                />
+
+                                                <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                                    {blob.name} (
+                                                    {bytesToSize(blob.size)})
+                                                </span>
+                                            </div>
+                                        )
+                                    )}
+                                </div>
+                            ) : (
+                                ""
+                            )}
                         </fieldset>
                     </div>{" "}
                 </div>