Skip to content

Override upload file max size in mb #2370

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

Closed
MuPp3t33r wants to merge 8 commits into from
Closed

Override upload file max size in mb #2370

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0769b61
feat: Allow admin to override the maximum file upload size
MuPp3t33r Aug 19, 2025
6706b67
fix: use new getUploadFileMaxSize function added to constants
MuPp3t33r Aug 19, 2025
7c43ce8
fix: use new getUploadFileMaxSize function added to constants
MuPp3t33r Aug 19, 2025
02e4da3
fix: use new getUploadFileMaxSize function added to constants
MuPp3t33r Aug 19, 2025
f0e0252
fix: default value for maxSize had wrong type
bradenmacdonald Aug 19, 2025
a19d1ab
docs: Create OVERRIDE_UPLOAD_FILE_MAX_SIZE_IN_MB.rst
MuPp3t33r Aug 22, 2025
8189209
docs: Update README.rst
MuPp3t33r Aug 22, 2025
574a34c
test: Create constants.test.ts
MuPp3t33r Aug 22, 2025
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
13 changes: 12 additions & 1 deletion src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { getConfig } from '@edx/frontend-platform';

export const DATE_FORMAT = 'MM/dd/yyyy';
export const TIME_FORMAT = 'HH:mm';
export const DATE_TIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss\\Z';
Expand Down Expand Up @@ -52,7 +54,16 @@ export const DECODED_ROUTES = {
],
};

export const UPLOAD_FILE_MAX_SIZE = 20 * 1024 * 1024; // 100mb
// FilesUpload page - Default max size: 20MB else use env override if exists and valid number
const DEFAULT_UPLOAD_FILE_MAX_SIZE = 20 * 1024 * 1024; // 20 MB

export const getUploadFileMaxSize = () => {
Copy link
Copy Markdown
Contributor

@feanil feanil Nov 7, 2025

Choose a reason for hiding this comment

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

Should this function should live in utils.tsx and not in constants.js?

const config = getConfig();
const overrideMaxFileSizeMB = parseInt(config.OVERRIDE_UPLOAD_FILE_MAX_SIZE_IN_MB, 10);
Copy link
Copy Markdown
Contributor

@feanil feanil Nov 7, 2025

Choose a reason for hiding this comment

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

Putting OVERRIDE in the name is redundant for a config setting. I think MAX_ASSET_UPLOAD_FILE_SIZE_IN_MB is a clear name. Is there a reason not to use the same name we use in the backend as the name of the setting in the mfe config and as the name of the constant in the frontend? Unless there is a change in the meaning of the constant, keeping the name the same should reduce cognitive load for future readers of the code.

return !Number.isNaN(overrideMaxFileSizeMB) && overrideMaxFileSizeMB > 0
? overrideMaxFileSizeMB * 1024 * 1024
: DEFAULT_UPLOAD_FILE_MAX_SIZE;
};

export const COURSE_BLOCK_NAMES = ({
chapter: { id: 'chapter', name: 'Section' },
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { CheckboxFilter, Container } from '@openedx/paragon';
import { getUploadFileMaxSize } from '@src/constants';
import Placeholder from '../../editors/Placeholder';

import { RequestStatus } from '../../data/constants';
Expand Down Expand Up @@ -90,7 +91,7 @@ const FilesPage = ({
usageErrorMessages: errorMessages.usageMetrics,
fileType: 'file',
};
const maxFileSize = 20 * 1048576;
const maxFileSize = getUploadFileMaxSize();

const activeColumn = {
id: 'activeStatus',
Expand Down
8 changes: 4 additions & 4 deletions src/generic/modal-dropzone/ModalDropzone.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import {
} from '@openedx/paragon';
import { FileUpload as FileUploadIcon } from '@openedx/paragon/icons';

import { getUploadFileMaxSize } from '@src/constants';
import useModalDropzone from './useModalDropzone';
import messages from './messages';
import { UPLOAD_FILE_MAX_SIZE } from '../../constants';

const ModalDropzone = ({
fileTypes,
Expand All @@ -30,7 +30,7 @@ const ModalDropzone = ({
onChange,
onSavingStatus,
onSelectFile,
maxSize = UPLOAD_FILE_MAX_SIZE,
maxSize,
}) => {
const {
intl,
Expand All @@ -48,7 +48,7 @@ const ModalDropzone = ({

const invalidSizeMore = invalidFileSizeMore || intl.formatMessage(
messages.uploadImageDropzoneInvalidSizeMore,
{ maxSize: maxSize / (1000 * 1000) },
{ maxSize: (maxSize || getUploadFileMaxSize()) / (1024 * 1024) },
);

const inputComponent = previewUrl ? (
Expand Down Expand Up @@ -129,7 +129,7 @@ ModalDropzone.defaultProps = {
imageHelpText: '',
previewComponent: null,
imageDropzoneText: '',
maxSize: UPLOAD_FILE_MAX_SIZE,
maxSize: '',
Comment thread
bradenmacdonald marked this conversation as resolved.
Outdated
invalidFileSizeMore: '',
onSelectFile: null,
};
Expand Down
6 changes: 3 additions & 3 deletions src/textbooks/textbook-form/TextbookForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import {
useToggle,
} from '@openedx/paragon';

import { getUploadFileMaxSize } from '@src/constants';
import FormikControl from '../../generic/FormikControl';
import PromptIfDirty from '../../generic/prompt-if-dirty/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 @@ -171,7 +171,7 @@ const TextbookForm = ({
onSavingStatus={onSavingStatus}
invalidFileSizeMore={intl.formatMessage(
messages.uploadModalFileInvalidSizeText,
{ maxSize: UPLOAD_FILE_MAX_SIZE / (1000 * 1000) },
{ maxSize: getUploadFileMaxSize() / (1024 * 1024) },
)}
onSelectFile={setSelectedFile}
previewComponent={(
Expand All @@ -180,7 +180,7 @@ const TextbookForm = ({
<span className="modal-preview-text">{selectedFile}</span>
</div>
)}
maxSize={UPLOAD_FILE_MAX_SIZE}
maxSize={getUploadFileMaxSize()}
/>
<PromptIfDirty dirty={dirty} />
</>
Expand Down
Loading