Merge branch 'Development' into SIPS-Sprint-3-270325

components/case/representation/representationElements.js

@@ -944,8 +944,10 @@ export const RenderFileUpload = (field) => {
                 return "/assets/images/documenttypes/zip.png";
                 break;
             case "image/jpeg":
+                return "/assets/images/documenttypes/jpg.png";
             case "image/png":
-                return URL.createObjectURL(fileObj);
+                return "/assets/images/documenttypes/jpg.png";
+                //return URL.createObjectURL(fileObj);
                 break;
             default:
                 return "/assets/images/documenttypes/default.png";
@@ -1074,6 +1076,7 @@ export const RenderFileUpload = (field) => {
 
     // Handle accepted files (clear error message when files are accepted)
     const handleDropAccepted = () => {
+        setErrorMessage(null);
         setRejectedFiles([]); // Clear any previously rejected file errorsss
     };
 
@@ -1169,6 +1172,12 @@ export const RenderFileUpload = (field) => {
                         // Object.assign(values, {
                         //     "fileList": buildAppealFilesArray,
                         // });
+                        data.invalidFiles.length > 0 &&
+                            (setRejectedFiles(data.invalidFiles),
+                            setUploadCountMessage(
+                                renamedAcceptedFiles.length -
+                                    data.invalidFiles.length
+                            ));
                         getFilesFromBlobproxy(
                             field.containerID,
                             field.ticketnumber +
@@ -1215,32 +1224,16 @@ export const RenderFileUpload = (field) => {
                                     )
                                 </em>
                             </div>
-                            <aside>{thumbs}</aside>
+                            {/* <aside>{thumbs}</aside> */}
-                            {uploadCountMessage > 0 &&
-                                completedUploadFiles == false && (
-                                    <div className="govuk-body govuk-!-font-size-14">
-                                        {t("home:uploading-files-label", {
-                                            number: uploadCountMessage,
-                                        })}
-                                    </div>
-                                )}
-                            {completedUploadFiles > 0 &&
-                                uploadCountMessage > 0 && (
-                                    <div className="govuk-body govuk-!-font-size-14">
-                                        {t(
-                                            "home:completed-uploading-files-label",
-                                            {
-                                                number: uploadCountMessage,
-                                            }
-                                        )}
-                                    </div>
-                                )}
                         </section>
                     </>
                 )}
             </Dropzone>
-            {rejectedFiles.length > 0 && (
+            {rejectedFiles.length > 0 && completedUploadFiles == true && (
-                <div style={{ color: "red", marginTop: "10px" }}>
+                <div
+                    style={{ color: "red", marginTop: "10px" }}
+                    className="govuk-body govuk-!-font-size-14 "
+                >
                     <ul>
                         {rejectedFiles.map((error, index) => (
                             <li key={index}>{error}</li>
@@ -1248,6 +1241,20 @@ export const RenderFileUpload = (field) => {
                     </ul>
                 </div>
             )}
+            {uploadCountMessage > 0 && completedUploadFiles == false && (
+                <div className="govuk-body govuk-!-font-size-14">
+                    {t("home:uploading-files-label", {
+                        number: uploadCountMessage,
+                    })}
+                </div>
+            )}
+            {completedUploadFiles > 0 && uploadCountMessage >= 0 && (
+                <div className="govuk-body govuk-!-font-size-14">
+                    {t("home:completed-uploading-files-label", {
+                        number: uploadCountMessage,
+                    })}
+                </div>
+            )}
             {field.meta.touched && field.meta.error && (
                 <span className="error">{field.meta.error}</span>
             )}

components/elements/index.js

@@ -1851,8 +1851,10 @@ const RenderFileUpload = (field) => {
                 return "/assets/images/documenttypes/zip.png";
                 break;
             case "image/jpeg":
+                return "/assets/images/documenttypes/jpg.png";
             case "image/png":
-                return URL.createObjectURL(fileObj);
+                return "/assets/images/documenttypes/png.png";
+                //return URL.createObjectURL(fileObj);
                 break;
             default:
                 return "/assets/images/documenttypes/default.png";
@@ -2036,13 +2038,12 @@ const RenderFileUpload = (field) => {
                     );
                     field.input.onChange(renamedAcceptedFiles);
 
-                    setUploadCountMessage(renamedAcceptedFiles.length);
-
-                    console.log("werwerw");
                     field.setFileCount(
                         field.uploadCount + renamedAcceptedFiles.length
                     );
 
+                    setUploadCountMessage(renamedAcceptedFiles.length);
+
                     uploadSingleFile(
                         renamedAcceptedFiles,
                         field.containerID,
@@ -2089,6 +2090,12 @@ const RenderFileUpload = (field) => {
                         Object.assign(values, {
                             "filesList": buildAppealFilesArray,
                         });
+                        data.invalidFiles.length > 0 &&
+                            (setRejectedFiles(data.invalidFiles),
+                            setUploadCountMessage(
+                                renamedAcceptedFiles.length -
+                                    data.invalidFiles.length
+                            ));
                         getFilesFromBlobproxy(
                             field.containerID,
                             field.ticketnumber
@@ -2123,31 +2130,15 @@ const RenderFileUpload = (field) => {
                                 </em>
                             </div>
                             {/* <aside>{thumbs}</aside> */}
-                            {uploadCountMessage > 0 &&
-                                completedUploadFiles == false && (
-                                    <div className="govuk-body govuk-!-font-size-14">
-                                        {t("home:uploading-files-label", {
-                                            number: uploadCountMessage,
-                                        })}
-                                    </div>
-                                )}
-                            {completedUploadFiles > 0 &&
-                                uploadCountMessage > 0 && (
-                                    <div className="govuk-body govuk-!-font-size-14">
-                                        {t(
-                                            "home:completed-uploading-files-label",
-                                            {
-                                                number: uploadCountMessage,
-                                            }
-                                        )}
-                                    </div>
-                                )}
                         </section>
                     </>
                 )}
             </Dropzone>
-            {rejectedFiles.length > 0 && (
+            {rejectedFiles.length > 0 && completedUploadFiles == true && (
-                <div style={{ color: "red", marginTop: "10px" }}>
+                <div
+                    style={{ color: "red", marginTop: "10px" }}
+                    className="govuk-body govuk-!-font-size-14 "
+                >
                     <ul>
                         {rejectedFiles.map((error, index) => (
                             <li key={index}>{error}</li>
@@ -2155,6 +2146,20 @@ const RenderFileUpload = (field) => {
                     </ul>
                 </div>
             )}
+            {uploadCountMessage > 0 && completedUploadFiles == false && (
+                <div className="govuk-body govuk-!-font-size-14">
+                    {t("home:uploading-files-label", {
+                        number: uploadCountMessage,
+                    })}
+                </div>
+            )}
+            {completedUploadFiles > 0 && uploadCountMessage >= 0 && (
+                <div className="govuk-body govuk-!-font-size-14">
+                    {t("home:completed-uploading-files-label", {
+                        number: uploadCountMessage,
+                    })}
+                </div>
+            )}
             {field.meta.touched && field.meta.error && (
                 <span className="error">{field.meta.error}</span>
             )}

pages/api/file/uploadsinglefile.js

@@ -38,6 +38,20 @@ ApiProxy.post(async (req, res) => {
     ];
 
     var allowedFilesFormData = {};
+    var invalidFiles = []; // To store the names of invalid files
+
+    // for (const [fileName, fileDetails] of Object.entries(req.files)) {
+    //     if (allowedMimeTypes.includes(fileDetails[0].headers["content-type"])) {
+    //         allowedFilesFormData[fileName] = fileDetails.map((file) => ({
+    //             fieldName: file.fieldName,
+    //             originalFilename: file.originalFilename,
+    //             path: file.path,
+    //             size: file.size,
+    //             headers: file.headers,
+    //             contentType: file.headers["content-type"],
+    //         }));
+    //     }
+    // }
 
     // for (const [fileName, fileDetails] of Object.entries(req.files)) {
     //     if (allowedMimeTypes.includes(fileDetails[0].headers["content-type"])) {
@@ -81,39 +95,55 @@ ApiProxy.post(async (req, res) => {
                     console.log(
                         `\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n\nFile ${fileName} has an invalid MIME type based on its content.\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\`
                     );
-                    return res
+                    invalidFiles.push(fileName); // Track invalid file
-                        .status(400)
+
-                        .json({ error: `Invalid file type for ${fileName}` });
+                    // return res
+                    //     .status(400)
+                    //     .json({ error: `Invalid file type for ${fileName}` });
                 }
             } catch (error) {
                 console.log(
                     `Error reading file ${fileName} for MIME type validation`,
                     error
                 );
-                return res
+                // return res
-                    .status(500)
+                //     .status(500)
-                    .json({ error: "Failed to validate file type" });
+                //     .json({ error: "Failed to validate file type" });
             }
         } else {
             console.log(
                 `\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n\nFile ${fileName} has an unsupported MIME type: ${fileMimeType}\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\`
             );
-            return res.status(400).json({
+            invalidFiles.push(fileName); // Track invalid file
-                error: `Unsupported MIME type for ${fileName}`,
+
-            });
+            // return res.status(400).json({
+            //     error: `Unsupported MIME type for ${fileName}`,
+            // });
         }
     }
     //console.log("allowedFilesFormData: ", allowedFilesFormData);
 
+    // If no valid files are found
+    // if (Object.keys(allowedFilesFormData).length === 0) {
+    //     return res.status(400).json({
+    //         error: "No valid files found",
+    //         invalidFiles: invalidFiles, // Return the list of invalid files
+    //     });
+    // }
+
+    invalidFiles = invalidFiles.map((fileName) => {
+        return `${fileName} - Invalid file`;
+    });
+
     try {
         const data = await uploadSingleFile(
             allowedFilesFormData,
             containerID,
             casefolderID
         ).then((data) => {
-            return res.status(200).json({ data });
+            return res.status(200).json({ data, invalidFiles });
         });
-        return res.status(200).json({ data });
+        return res.status(200).json({ data, invalidFiles });
     } catch (error) {
         consoleLogger(error);
         return res.status(500).json({ error: "Failed to upload files" });