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 16cf5cce0f..be24884f2f 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 616790c64a..f0b5b50922 100644 --- a/src/i18n/messages/ar.json +++ b/src/i18n/messages/ar.json @@ -1050,6 +1050,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} />