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 <lansevermore>
raccoongang · Apr 29, 2024 · d1f7641 · d1f7641
1 parent 7cc8899
commit d1f7641
Show file tree

Hide file tree

Showing 22 changed files with 58 additions and 10 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -68,4 +68,4 @@ export const CLIPBOARD_STATUS = {
 
 export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];
 
-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
@@ -32,6 +32,7 @@ import { getFileSizeToClosestByte } from '../../utils';
 import FileThumbnail from './FileThumbnail';
 import FileInfoModalSidebar from './FileInfoModalSidebar';
 import FileValidationModal from './FileValidationModal';
+import { UPLOAD_FILE_MAX_SIZE } from '../../constants';
 
 const FilesPage = ({
   courseId,
@@ -90,7 +91,6 @@ const FilesPage = ({
     usageErrorMessages: errorMessages.usageMetrics,
     fileType: 'file',
   };
-  const maxFileSize = 20 * 1048576;
 
   const activeColumn = {
     id: 'activeStatus',
@@ -205,7 +205,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
@@ -15,6 +15,7 @@ import { FileUpload as FileUploadIcon } from '@openedx/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 ? (
     <div>
       {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
@@ -131,4 +131,27 @@ describe('<ModalDropzone />', () => {
 
     await expect(uploadAssets(courseId, fileData, () => {})).rejects.toThrow('Network Error');
   });
+
+  it('displays an error message when the file size exceeds the limit', async () => {
+    const maxSizeInBytes = 20 * 1000 * 1000;
+
+    const { getByText, getByRole } = render(<RootWrapper {...props} maxSize={maxSizeInBytes} />);
+    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
@@ -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
@@ -99,12 +99,13 @@ const useModalDropzone = ({
         onChange(url);
         onSavingStatus({ status: RequestStatus.SUCCESSFUL });
         onClose();
-        setDisabledUploadBtn(true);
-        setUploadProgress(0);
-        setPreviewUrl(null);
       }
     } 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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={(
                 <Icon src={PdfIcon} className="modal-preview-icon" />
               )}
-              maxSize={UPLOAD_FILE_MAX_SIZE}
             />
             <PromptIfDirty dirty={dirty} />
           </>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,4 +68,4 @@ export const CLIPBOARD_STATUS = {

		export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];

		export const UPLOAD_FILE_MAX_SIZE = 100 * 1024 * 1024; // 100mb
		export const UPLOAD_FILE_MAX_SIZE = 20 * 1000 * 1000; // 20mb