From 131ed90370b487d10849704401e82b6b20fb19be Mon Sep 17 00:00:00 2001 From: Shevijacobson Date: Sun, 22 Sep 2024 09:56:05 +0300 Subject: [PATCH 1/4] Extend file upload to support Excel and ODS Signed-off-by: Shevijacobson --- .../import-applications-form.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx index 274838de8a..db8fe43784 100644 --- a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx +++ b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx @@ -95,8 +95,13 @@ export const ImportApplicationsForm: React.FC = ({ } }} dropzoneProps={{ - accept: { "text/csv": [".csv"] }, - onDropRejected: handleFileRejected, + accept: { + "text/csv": [".csv"], + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": + [".xlsx"], + "application/vnd.ms-excel": [".xls"], + "application/vnd.oasis.opendocument.spreadsheet": [".ods"], + }, }} onClearClick={() => { setFile(undefined); @@ -106,7 +111,7 @@ export const ImportApplicationsForm: React.FC = ({ - You should select a CSV file. + {t("errors.invalidFileFormat")} From d227e1c0c1893ebdf70a5b1cecae619c1a715b49 Mon Sep 17 00:00:00 2001 From: Shevijacobson Date: Tue, 24 Sep 2024 13:50:30 +0300 Subject: [PATCH 2/4] add missing line Signed-off-by: Shevijacobson --- .../import-applications-form/import-applications-form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx index db8fe43784..3f0189d238 100644 --- a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx +++ b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx @@ -102,6 +102,7 @@ export const ImportApplicationsForm: React.FC = ({ "application/vnd.ms-excel": [".xls"], "application/vnd.oasis.opendocument.spreadsheet": [".ods"], }, + onDropRejected: handleFileRejected, }} onClearClick={() => { setFile(undefined); @@ -111,7 +112,7 @@ export const ImportApplicationsForm: React.FC = ({ - {t("errors.invalidFileFormat")} + You should select a CSV/EXEL/ODS file. From 312405dc7049dbc04251a7e011dcade627ddf037 Mon Sep 17 00:00:00 2001 From: shevijacobson Date: Sun, 6 Oct 2024 15:31:59 +0300 Subject: [PATCH 3/4] Edit unsupported file type message for uploads Signed-off-by: shevijacobson --- client/public/locales/en/translation.json | 1 + .../import-applications-form/import-applications-form.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index 6942e06e7d..98c21b4eb8 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -192,6 +192,7 @@ "duplicateTag": "A tag with this name already exists. Use a different name.", "duplicateWave": "The migration wave could not be created due to a conflict with an existing wave. Make sure the name and start/end dates are unique and try again.", "importErrorCheckDocumentation": "For status Error imports, check the documentation to ensure your file is structured correctly.", + "unsupportedFileType": "Unsupported file type. Only Excel, ODS, and CSV files are allowed.", "insecureTracker": "Insecure mode deactivates certificate verification. Use insecure mode for instances that have self-signed certificates.", "inheritedReviewTooltip": "This application is inheriting a review from an archetype.", "inheritedReviewTooltip_plural": "This application is inheriting reviews from {{count}} archetypes.", diff --git a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx index 3f0189d238..d050e7aeaa 100644 --- a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx +++ b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx @@ -112,7 +112,7 @@ export const ImportApplicationsForm: React.FC = ({ - You should select a CSV/EXEL/ODS file. + {t("message.unsupportedFileType")} From 9114f1e6c808bab70716c8acfafb473885a82ee6 Mon Sep 17 00:00:00 2001 From: shevijacobson Date: Sun, 3 Nov 2024 10:38:05 +0200 Subject: [PATCH 4/4] Convert Excel and ODS files to CSV before upload in onSubmit function Signed-off-by: shevijacobson --- .../import-applications-form.tsx | 29 ++++- package-lock.json | 113 ++++++++++++++++++ package.json | 4 + 3 files changed, 143 insertions(+), 3 deletions(-) diff --git a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx index d050e7aeaa..acab9ce15f 100644 --- a/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx +++ b/client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import axios, { AxiosResponse } from "axios"; import { useTranslation } from "react-i18next"; +import * as XLSX from "xlsx"; import { ActionGroup, @@ -39,13 +40,35 @@ export const ImportApplicationsForm: React.FC = ({ setIsFileRejected(true); }; - const onSubmit = () => { + const onSubmit = async () => { if (!file) { return; } + + let fileToUpload = file; + const fileExtension = file.name.split(".").pop()?.toLowerCase() || ""; + + if (["xls", "xlsx", "ods"].includes(fileExtension)) { + const data = await file.arrayBuffer(); + const workbook = XLSX.read(data, { type: "array" }); + + const csvData = XLSX.utils.sheet_to_csv( + workbook.Sheets[workbook.SheetNames[0]] + ); + const blob = new Blob([csvData], { type: "text/csv" }); + + fileToUpload = new File( + [blob], + file.name.replace(/\.(xls|xlsx|ods)$/, ".csv"), + { + type: "text/csv", + } + ); + } + const formData = new FormData(); - formData.set("file", file); - formData.set("fileName", file.name); + formData.set("file", fileToUpload); + formData.set("fileName", fileToUpload.name); formData.set( "createEntities", isCreateEntitiesChecked === true ? "true" : "false" diff --git a/package-lock.json b/package-lock.json index 9eb5e33fe7..643164c638 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,10 @@ "server", "client" ], + "dependencies": { + "@types/xlsx": "^0.0.35", + "xlsx": "^0.18.5" + }, "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.1.0", @@ -2954,6 +2958,12 @@ "@types/node": "*" } }, + "node_modules/@types/xlsx": { + "version": "0.0.35", + "resolved": "https://registry.npmjs.org/@types/xlsx/-/xlsx-0.0.35.tgz", + "integrity": "sha512-s0x3DYHZzOkxtjqOk/Nv1ezGzpbN7I8WX+lzlV/nFfTDOv7x4d8ZwGHcnaiB8UCx89omPsftQhS5II3jeWePxQ==", + "license": "MIT" + }, "node_modules/@types/yargs": { "version": "17.0.24", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz", @@ -3443,6 +3453,15 @@ "node": ">=0.4.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -4342,6 +4361,19 @@ "node": ">=4" } }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -4653,6 +4685,15 @@ "node": ">= 0.12.0" } }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", @@ -5227,6 +5268,18 @@ } } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "license": "Apache-2.0", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -7688,6 +7741,15 @@ "node": ">= 0.6" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -15053,6 +15115,18 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "license": "Apache-2.0", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/stack-utils": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz", @@ -17488,6 +17562,24 @@ "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", "dev": true }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/wrap-ansi": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", @@ -17584,6 +17676,27 @@ } } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "license": "Apache-2.0", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml-name-validator": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", diff --git a/package.json b/package.json index bddd1364c1..c2b2396c5f 100644 --- a/package.json +++ b/package.json @@ -79,5 +79,9 @@ "webpack-dev-server": { "express": "$express" } + }, + "dependencies": { + "@types/xlsx": "^0.0.35", + "xlsx": "^0.18.5" } }