Merged PR 1519: checking mime types by magic sig, extension and headers
checking mime types by magic sig, extension and headers Related work items: #12956
This commit is contained in:
Robert Bond
@@ -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>
|
||||
{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>
|
||||
)}
|
||||
{/* <aside>{thumbs}</aside> */}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</Dropzone>
|
||||
{rejectedFiles.length > 0 && (
|
||||
<div style={{ color: "red", marginTop: "10px" }}>
|
||||
{rejectedFiles.length > 0 && completedUploadFiles == true && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -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 && (
|
||||
<div style={{ color: "red", marginTop: "10px" }}>
|
||||
{rejectedFiles.length > 0 && completedUploadFiles == true && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
"date-fns": "^2.30.0",
|
||||
"dom": "^0.0.3",
|
||||
"express": "^4.18.2",
|
||||
"file-type": "^20.4.1",
|
||||
"fs": "0.0.2",
|
||||
"google-map-react": "^2.2.1",
|
||||
"govuk-frontend": "^5.0.0",
|
||||
|
||||
@@ -7,6 +7,8 @@ import {
|
||||
import nextConnect from "next-connect";
|
||||
import middleware from "../middleware/middleware";
|
||||
import { consoleLogger } from "../../../actions";
|
||||
import { fileTypeFromBuffer } from "file-type";
|
||||
import fs from "fs";
|
||||
|
||||
const ApiProxy = nextConnect();
|
||||
ApiProxy.use(middleware);
|
||||
@@ -35,31 +37,99 @@ 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"])) {
|
||||
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"],
|
||||
}));
|
||||
const file = fileDetails[0];
|
||||
const filePath = file.path;
|
||||
|
||||
// Check the MIME type from file headers
|
||||
const fileMimeType = file.headers["content-type"];
|
||||
if (allowedMimeTypes.includes(fileMimeType)) {
|
||||
// Check file signature (magic number) using file-type
|
||||
const buffer = fs.readFileSync(filePath);
|
||||
|
||||
try {
|
||||
const type = await fileTypeFromBuffer(buffer); // Correct usage of fileTypeFromBuffer
|
||||
console.log("checking mime type ", type);
|
||||
if (type && allowedMimeTypes.includes(type.mime)) {
|
||||
// If the MIME type from the file signature matches the allowed list
|
||||
allowedFilesFormData[fileName] = fileDetails.map(
|
||||
(file) => ({
|
||||
fieldName: file.fieldName,
|
||||
originalFilename: file.originalFilename,
|
||||
path: file.path,
|
||||
size: file.size,
|
||||
headers: file.headers,
|
||||
contentType: fileMimeType,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.log(
|
||||
`\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n\nFile ${fileName} has an invalid MIME type based on its content.\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\`
|
||||
);
|
||||
invalidFiles.push(fileName); // Track invalid file
|
||||
|
||||
// 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
|
||||
// .status(500)
|
||||
// .json({ error: "Failed to validate file type" });
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
`\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\n\nFile ${fileName} has an unsupported MIME type: ${fileMimeType}\n\n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\`
|
||||
);
|
||||
invalidFiles.push(fileName); // Track invalid file
|
||||
|
||||
// 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" });
|
||||
|
||||
Reference in New Issue
Block a user