Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Feb 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f83a20e
fix: [AXIMST-510] there is no message if a user upload a large file
Feb 22, 2024
deca896
fix: after review
Feb 23, 2024
a0b8b5e
fix: add translations
Feb 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I have a file with such size as shown on the picture it will 20312736.
image
In that time if I set 20 * 1024 * 1024 it results in 20971520. This means that 20312736 is valid size. But when I upload to the server I receive 413 error that means the file is too large.

The solution is to set 20 * 1000 * 1000 that works good for both backend and frontend.

4 changes: 2 additions & 2 deletions src/files-and-videos/files-page/FilesPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -81,7 +82,6 @@ const FilesPage = ({
usageErrorMessages: errorMessages.usageMetrics,
fileType: 'file',
};
const maxFileSize = 20 * 1048576;

const activeColumn = {
id: 'activeStatus',
Expand Down Expand Up @@ -195,7 +195,7 @@ const FilesPage = ({
handleErrorReset,
handleFileOrder,
tableColumns,
maxFileSize,
UPLOAD_FILE_MAX_SIZE,
ruzniaievdm marked this conversation as resolved.
Show resolved Hide resolved
thumbnailPreview,
infoModalSidebar,
files: assets,
Expand Down
11 changes: 9 additions & 2 deletions src/generic/modal-dropzone/ModalDropzone.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,7 +28,7 @@ const ModalDropzone = ({
onCancel,
onChange,
onSavingStatus,
maxSize,
maxSize = UPLOAD_FILE_MAX_SIZE,
ruzniaievdm marked this conversation as resolved.
Show resolved Hide resolved
}) => {
const {
intl,
Expand All @@ -43,6 +44,11 @@ const ModalDropzone = ({
onChange, onCancel, onClose, fileTypes, onSavingStatus,
});

const invalidSizeMore = intl.formatMessage(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nit]

Suggested change
const invalidSizeMore = intl.formatMessage(
const invalidSizeMoreMsg = intl.formatMessage(

messages.uploadImageDropzoneInvalidSizeMore,
{ maxSize: maxSize / (1000 * 1000) },
);

const inputComponent = previewUrl ? (
<div>
{previewComponent || (
Expand Down Expand Up @@ -94,6 +100,7 @@ const ModalDropzone = ({
onProcessUpload={handleSelectFile}
inputComponent={inputComponent}
accept={accept}
errorMessages={{ invalidSizeMore }}
validator={imageValidator}
maxSize={maxSize}
/>
Expand All @@ -120,7 +127,7 @@ ModalDropzone.defaultProps = {
imageHelpText: '',
previewComponent: null,
imageDropzoneText: '',
maxSize: Infinity,
maxSize: UPLOAD_FILE_MAX_SIZE,
};

ModalDropzone.propTypes = {
Expand Down
23 changes: 23 additions & 0 deletions src/generic/modal-dropzone/ModalDropzone.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
});
4 changes: 4 additions & 0 deletions src/generic/modal-dropzone/messages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
khudym marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage: 'Image size must be less than {maxSize}MB.',
},
});

export default messages;
7 changes: 4 additions & 3 deletions src/generic/modal-dropzone/useModalDropzone.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ill take this approach with finally into account:)

};

Expand Down
2 changes: 0 additions & 2 deletions src/textbooks/textbook-form/TextbookForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -166,7 +165,6 @@ const TextbookForm = ({
previewComponent={(
<Icon src={PdfIcon} className="modal-preview-icon" />
)}
maxSize={UPLOAD_FILE_MAX_SIZE}
/>
<PromptIfDirty dirty={dirty} />
</>
Expand Down