fix: [AXIMST-510] there is no message if a user upload a large file

raccoongang · Feb 23, 2024 · f8ec3b0 · f8ec3b0
1 parent 5697088
commit f8ec3b0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 10 deletions.
diff --git 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
@@ -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,
+              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 '@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 ? (
     <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
@@ -87,4 +87,27 @@ describe('<ModalDropzone />', () => {
       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(<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
@@ -98,16 +98,17 @@ const useModalDropzone = ({
       if (url) {
         onChange(url);
         onSavingStatus({ status: RequestStatus.SUCCESSFUL });
-        setDisabledUploadBtn(true);
-        setUploadProgress(0);
-        setPreviewUrl(null);
 
         setTimeout(() => {
           onClose();
         }, 1000);
       }
     } catch (error) {
       onSavingStatus({ status: RequestStatus.FAILED });
+    } finally {
+      setDisabledUploadBtn(true);
+      setUploadProgress(0);
+      setPreviewUrl(null);
     }
   };
 

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} />
           </>