Skip to content

Commit

Permalink
Fix dropzone
Browse files Browse the repository at this point in the history
  • Loading branch information
@aleksandr-slobodian
aleksandr-slobodian committed Dec 13, 2024
1 parent bed34ff commit 5c5cd40
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 50 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-dropzone": "^14.2.3",
"react-dropzone": "^14.3.5",
"react-error-boundary": "^4.1.2",
"react-i18next": "^15.1.4",
"react-use": "^17.6.0"
Expand Down
71 changes: 37 additions & 34 deletions src/components/certificate-import-dialog/CertificateImportDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,44 +67,46 @@ export const CertificateImportDialog: React.FunctionComponent<

const { t } = useTranslation();

const { getRootProps, isDragActive, isDragReject } = useDropzone({
multiple: false,
accept: APP_CERTIFICATE_ALLOWED_MIMES,
maxSize: APP_CERTIFICATE_MAX_SIZE_BYTES,
onDropRejected: ([file]) => {
file.errors.forEach((err) => {
let msg;
if (err.code === "file-too-large") {
msg = t("certificates.dialog.import.file.error.too-large", {
size: formatBytes(APP_CERTIFICATE_MAX_SIZE_BYTES),
});
}
if (err.code === "file-invalid-type") {
msg = t("certificates.dialog.import.file.error.invalid-type");
}
const { getInputProps, getRootProps, isDragActive, isDragReject } =
useDropzone({
multiple: false,
accept: APP_CERTIFICATE_ALLOWED_MIMES,
maxSize: APP_CERTIFICATE_MAX_SIZE_BYTES,
onDropRejected: ([file]) => {
file.errors.forEach((err) => {
let msg;
if (err.code === "too-many-files") {
msg = t("certificates.dialog.import.file.error.to-many-files");
} else if (err.code === "file-too-large") {
msg = t("certificates.dialog.import.file.error.too-large", {
size: formatBytes(APP_CERTIFICATE_MAX_SIZE_BYTES),
});
} else if (err.code === "file-invalid-type") {
msg = t("certificates.dialog.import.file.error.invalid-type");
}

if (msg) {
onDropRejected(msg);
if (msg) {
onDropRejected(msg);
}
});
},
onDropAccepted: async ([file]) => {
if (!file) {
return false;
}
});
},
onDropAccepted: async ([file]) => {
if (!file) {
return false;
}

const parts = file.name.split(".");
const ext = parts.length > 1 ? (parts.pop() as string) : "";
const parts = file.name.split(".");
const ext = parts.length > 1 ? (parts.pop() as string) : "";

try {
const buf = await file.arrayBuffer();
onDropAccepted(buf, ext, file.type);
} catch (error) {
onDropError(error);
}
},
onError: onDropError,
});
try {
const buf = await file.arrayBuffer();
onDropAccepted(buf, ext, file.type);
} catch (error) {
onDropError(error);
}
},
onError: onDropError,
});

return (
<Dialog open fullScreen className={styles.dialog} onClose={onDialogClose}>
Expand Down Expand Up @@ -146,6 +148,7 @@ export const CertificateImportDialog: React.FunctionComponent<
}),
})}
>
<input {...getInputProps()} />
<Typography variant="s2" color="gray-10">
<Trans
i18nKey="certificates.dialog.import.drop-zone.title"
Expand Down
33 changes: 33 additions & 0 deletions src/components/certificate-import-dialog/CretificateImportDialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,4 +248,37 @@ describe("<CertificateImportDialog />", () => {
expect(onDropRejectedMock).toBeCalledTimes(1);
expect(onDropRejectedMock).toBeCalledWith("File is larger than 5 Mb.");
});

it("Should handle too many files rejection correctly", async () => {
const onDropRejectedMock = vi.fn();
render(
<CertificateImportDialog
{...defaultProps}
onDropRejected={onDropRejectedMock}
/>
);

const dropzone = getDropZone();

await act(async () => {
fireEvent.drop(dropzone, {
dataTransfer: {
files: [
{
name: "file1.cer",
type: "application/pkix-cert",
},
{
name: "file2.cer",
type: "application/pkix-cert",
},
],
types: ["Files"],
},
});
});

expect(onDropRejectedMock).toBeCalledTimes(1);
expect(onDropRejectedMock).toBeCalledWith("You can select only one file.");
});
});
1 change: 1 addition & 0 deletions src/i18n/locales/en/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
},
"file": {
"error": {
"to-many-files": "You can select only one file.",
"too-large": "File is larger than {{size}}.",
"invalid-type": "Wrong file format. Use PEM or DER formats."
}
Expand Down
30 changes: 15 additions & 15 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2062,10 +2062,10 @@ asynckit@^0.4.0:
resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==

attr-accept@^2.2.2:
version "2.2.2"
resolved "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz"
integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
attr-accept@^2.2.4:
version "2.2.5"
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==

autoprefixer@^10.4.20:
version "10.4.20"
Expand Down Expand Up @@ -2747,12 +2747,12 @@ file-entry-cache@^8.0.0:
dependencies:
flat-cache "^4.0.0"

file-selector@^0.6.0:
version "0.6.0"
resolved "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz"
integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
file-selector@^2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-2.1.2.tgz#fe7c7ee9e550952dfbc863d73b14dc740d7de8b4"
integrity sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==
dependencies:
tslib "^2.4.0"
tslib "^2.7.0"

filename-reserved-regex@^2.0.0:
version "2.0.0"
Expand Down Expand Up @@ -3919,13 +3919,13 @@ react-docgen@^7.0.0:
loose-envify "^1.1.0"
scheduler "^0.23.2"

react-dropzone@^14.2.3:
version "14.2.3"
resolved "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz"
integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
react-dropzone@^14.3.5:
version "14.3.5"
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.3.5.tgz#1a8bd312c8a353ec78ef402842ccb3589c225add"
integrity sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==
dependencies:
attr-accept "^2.2.2"
file-selector "^0.6.0"
attr-accept "^2.2.4"
file-selector "^2.1.0"
prop-types "^15.8.1"

react-error-boundary@^4.1.2:
Expand Down

0 comments on commit 5c5cd40

Please sign in to comment.