From 68d753394e4447ac8ad94b7545e80619c5d97c9a Mon Sep 17 00:00:00 2001 From: monteri <36768631+monteri@users.noreply.github.com> Date: Fri, 23 Feb 2024 17:41:41 +0200 Subject: [PATCH] fix: [AXIMST-510] there is no message if a user upload a large file (#183) * fix: [AXIMST-510] there is no message if a user upload a large file * fix: after review * fix: add translations --------- Co-authored-by: monteri --- src/constants.js | 2 +- src/files-and-videos/files-page/FilesPage.jsx | 4 ++-- src/generic/modal-dropzone/ModalDropzone.jsx | 11 +++++++-- .../modal-dropzone/ModalDropzone.test.jsx | 23 +++++++++++++++++++ src/generic/modal-dropzone/messages.js | 4 ++++ .../modal-dropzone/useModalDropzone.jsx | 7 +++--- src/i18n/messages/ar.json | 1 + src/i18n/messages/de.json | 1 + src/i18n/messages/de_DE.json | 1 + src/i18n/messages/es_419.json | 1 + src/i18n/messages/fa_IR.json | 1 + src/i18n/messages/fr.json | 1 + src/i18n/messages/fr_CA.json | 1 + src/i18n/messages/hi.json | 1 + src/i18n/messages/it.json | 1 + src/i18n/messages/it_IT.json | 1 + src/i18n/messages/pt.json | 1 + src/i18n/messages/pt_PT.json | 1 + src/i18n/messages/ru.json | 1 + src/i18n/messages/uk.json | 1 + src/i18n/messages/zh_CN.json | 1 + src/textbooks/textbook-form/TextbookForm.jsx | 2 -- 22 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/constants.js b/src/constants.js index 2cdd7433f0..8a2c605781 100644 --- a/src/constants.js +++ b/src/constants.js @@ -57,4 +57,4 @@ export const COURSE_BLOCK_NAMES = /** @type {const} */ ({ component: { id: 'component', name: 'Component' }, }); -export const UPLOAD_FILE_MAX_SIZE = 100 * 1024 * 1024; // 100mb +export const UPLOAD_FILE_MAX_SIZE = 20 * 1000 * 1000; // 20mb diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx index 1d9c7872b1..cbc0a1f11c 100644 --- a/src/files-and-videos/files-page/FilesPage.jsx +++ b/src/files-and-videos/files-page/FilesPage.jsx @@ -30,6 +30,7 @@ import { import { getFileSizeToClosestByte } from '../../utils'; import FileThumbnail from './FileThumbnail'; import FileInfoModalSidebar from './FileInfoModalSidebar'; +import { UPLOAD_FILE_MAX_SIZE } from '../../constants'; const FilesPage = ({ courseId, @@ -81,7 +82,6 @@ const FilesPage = ({ usageErrorMessages: errorMessages.usageMetrics, fileType: 'file', }; - const maxFileSize = 20 * 1048576; const activeColumn = { id: 'activeStatus', @@ -195,7 +195,7 @@ const FilesPage = ({ handleErrorReset, handleFileOrder, tableColumns, - maxFileSize, + maxFileSize: UPLOAD_FILE_MAX_SIZE, thumbnailPreview, infoModalSidebar, files: assets, diff --git a/src/generic/modal-dropzone/ModalDropzone.jsx b/src/generic/modal-dropzone/ModalDropzone.jsx index 19151b4a59..1448eec446 100644 --- a/src/generic/modal-dropzone/ModalDropzone.jsx +++ b/src/generic/modal-dropzone/ModalDropzone.jsx @@ -15,6 +15,7 @@ import { FileUpload as FileUploadIcon } from '@edx/paragon/icons'; import useModalDropzone from './useModalDropzone'; import messages from './messages'; +import { UPLOAD_FILE_MAX_SIZE } from '../../constants'; const ModalDropzone = ({ fileTypes, @@ -27,7 +28,7 @@ const ModalDropzone = ({ onCancel, onChange, onSavingStatus, - maxSize, + maxSize = UPLOAD_FILE_MAX_SIZE, }) => { const { intl, @@ -43,6 +44,11 @@ const ModalDropzone = ({ onChange, onCancel, onClose, fileTypes, onSavingStatus, }); + const invalidSizeMore = intl.formatMessage( + messages.uploadImageDropzoneInvalidSizeMore, + { maxSize: maxSize / (1000 * 1000) }, + ); + const inputComponent = previewUrl ? (
{previewComponent || ( @@ -94,6 +100,7 @@ const ModalDropzone = ({ onProcessUpload={handleSelectFile} inputComponent={inputComponent} accept={accept} + errorMessages={{ invalidSizeMore }} validator={imageValidator} maxSize={maxSize} /> @@ -120,7 +127,7 @@ ModalDropzone.defaultProps = { imageHelpText: '', previewComponent: null, imageDropzoneText: '', - maxSize: Infinity, + maxSize: UPLOAD_FILE_MAX_SIZE, }; ModalDropzone.propTypes = { diff --git a/src/generic/modal-dropzone/ModalDropzone.test.jsx b/src/generic/modal-dropzone/ModalDropzone.test.jsx index 36a2cc5cd7..5e3438abff 100644 --- a/src/generic/modal-dropzone/ModalDropzone.test.jsx +++ b/src/generic/modal-dropzone/ModalDropzone.test.jsx @@ -87,4 +87,27 @@ describe('', () => { expect(uploadButton).not.toBeDisabled(); }); }); + + it('displays an error message when the file size exceeds the limit', async () => { + const maxSizeInBytes = 20 * 1000 * 1000; + + const { getByText, getByRole } = render(); + const dropzoneInput = getByRole('presentation', { hidden: true }); + + const file = new File( + [new ArrayBuffer(maxSizeInBytes + 1)], + 'test-file.png', + { type: 'image/png' }, + ); + + userEvent.upload(dropzoneInput.firstChild, file); + + await waitFor(() => { + // Assert that the error message is displayed + const maxSizeInMB = maxSizeInBytes / (1000 * 1000); + const expectedErrorMessage = messages.uploadImageDropzoneInvalidSizeMore + .defaultMessage.replace('{maxSize}', maxSizeInMB); + expect(getByText(expectedErrorMessage)).toBeInTheDocument(); + }); + }); }); diff --git a/src/generic/modal-dropzone/messages.js b/src/generic/modal-dropzone/messages.js index db1292b282..73a2701d2b 100644 --- a/src/generic/modal-dropzone/messages.js +++ b/src/generic/modal-dropzone/messages.js @@ -21,6 +21,10 @@ const messages = defineMessages({ id: 'course-authoring.certificates.modal-dropzone.upload.modal', defaultMessage: 'Upload', }, + uploadImageDropzoneInvalidSizeMore: { + id: 'course-authoring.certificates.modal-dropzone.validation.invalid-size-more', + defaultMessage: 'Image size must be less than {maxSize}MB.', + }, }); export default messages; diff --git a/src/generic/modal-dropzone/useModalDropzone.jsx b/src/generic/modal-dropzone/useModalDropzone.jsx index ddf78814b6..c35d0ef0d4 100644 --- a/src/generic/modal-dropzone/useModalDropzone.jsx +++ b/src/generic/modal-dropzone/useModalDropzone.jsx @@ -98,9 +98,6 @@ const useModalDropzone = ({ if (url) { onChange(url); onSavingStatus({ status: RequestStatus.SUCCESSFUL }); - setDisabledUploadBtn(true); - setUploadProgress(0); - setPreviewUrl(null); setTimeout(() => { onClose(); @@ -108,6 +105,10 @@ const useModalDropzone = ({ } } catch (error) { onSavingStatus({ status: RequestStatus.FAILED }); + } finally { + setDisabledUploadBtn(true); + setUploadProgress(0); + setPreviewUrl(null); } }; diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json index 8e3b6a5ddc..ff470387df 100644 --- a/src/i18n/messages/ar.json +++ b/src/i18n/messages/ar.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/de.json +++ b/src/i18n/messages/de.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/de_DE.json b/src/i18n/messages/de_DE.json index 0bfe1fe3b2..ff07fbe935 100644 --- a/src/i18n/messages/de_DE.json +++ b/src/i18n/messages/de_DE.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json index fa8339511b..24fa5a4f63 100644 --- a/src/i18n/messages/es_419.json +++ b/src/i18n/messages/es_419.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/fa_IR.json b/src/i18n/messages/fa_IR.json index be93c08f12..180a9aa4d0 100644 --- a/src/i18n/messages/fa_IR.json +++ b/src/i18n/messages/fa_IR.json @@ -74,6 +74,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json index b1c6e68ede..4605f8bdb1 100644 --- a/src/i18n/messages/fr.json +++ b/src/i18n/messages/fr.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/fr_CA.json b/src/i18n/messages/fr_CA.json index 0e261d708a..cd65962d00 100644 --- a/src/i18n/messages/fr_CA.json +++ b/src/i18n/messages/fr_CA.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/hi.json b/src/i18n/messages/hi.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/hi.json +++ b/src/i18n/messages/hi.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/it.json b/src/i18n/messages/it.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/it.json +++ b/src/i18n/messages/it.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/it_IT.json b/src/i18n/messages/it_IT.json index b3d419c842..aa3e9eff58 100644 --- a/src/i18n/messages/it_IT.json +++ b/src/i18n/messages/it_IT.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json index a4a020fc3d..a010bf4a68 100644 --- a/src/i18n/messages/pt.json +++ b/src/i18n/messages/pt.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json index 4830dd6414..51d987da89 100644 --- a/src/i18n/messages/pt_PT.json +++ b/src/i18n/messages/pt_PT.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/uk.json b/src/i18n/messages/uk.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/uk.json +++ b/src/i18n/messages/uk.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json index f9c5cb31b6..9d682919a9 100644 --- a/src/i18n/messages/zh_CN.json +++ b/src/i18n/messages/zh_CN.json @@ -1051,6 +1051,7 @@ "course-authoring.certificates.modal-dropzone.image.button": "Upload signature image", "course-authoring.certificates.modal-dropzone.cancel.modal": "Cancel", "course-authoring.certificates.modal-dropzone.upload.modal": "Upload", + "course-authoring.certificates.modal-dropzone.validation.invalid-size-more": "Image size must be less than {maxSize}MB", "course-authoring.certificates.details.confirm-modal": "Delete this certificate?", "course-authoring.certificates.details.confirm-modal.message": "Deleting this certificate is permanent and cannot be undone.", "course-authoring.certificates.details.confirm.edit": "Edit this certificate?", diff --git a/src/textbooks/textbook-form/TextbookForm.jsx b/src/textbooks/textbook-form/TextbookForm.jsx index 3ba4f699cc..7162a199ca 100644 --- a/src/textbooks/textbook-form/TextbookForm.jsx +++ b/src/textbooks/textbook-form/TextbookForm.jsx @@ -21,7 +21,6 @@ import FormikControl from '../../generic/FormikControl'; import PromptIfDirty from '../../generic/PromptIfDirty'; import ModalDropzone from '../../generic/modal-dropzone/ModalDropzone'; import { useModel } from '../../generic/model-store'; -import { UPLOAD_FILE_MAX_SIZE } from '../../constants'; import textbookFormValidationSchema from './validations'; import messages from './messages'; @@ -166,7 +165,6 @@ const TextbookForm = ({ previewComponent={( )} - maxSize={UPLOAD_FILE_MAX_SIZE} />