diff --git a/src/components/EmailTemplateForm/index.jsx b/src/components/EmailTemplateForm/index.jsx
index f384bd2c4a..b1c61335a9 100644
--- a/src/components/EmailTemplateForm/index.jsx
+++ b/src/components/EmailTemplateForm/index.jsx
@@ -54,7 +54,7 @@ export const EMAIL_TEMPLATE_FIELDS = {
type: 'file',
label: 'add files',
value: [],
- description: "Max files size shouldn't exceed 2mb.",
+ description: "Max files size shouldn't exceed 250kb.",
},
}),
};
diff --git a/src/components/MultipleFileInputField/MultipleFileInputField.jsx b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
index 902c0ff2f4..47f7fe8eaf 100644
--- a/src/components/MultipleFileInputField/MultipleFileInputField.jsx
+++ b/src/components/MultipleFileInputField/MultipleFileInputField.jsx
@@ -6,6 +6,7 @@ import {
import classNames from 'classnames';
import * as FontAwesome from '@fortawesome/free-solid-svg-icons/faTimes';
import { getSizeInBytes, formatBytes } from './utils';
+import { MAX_FILES_SIZE, FILE_SIZE_EXCEEDS_ERROR } from './constants';
const MultipleFileInputField = ({
input,
@@ -23,13 +24,12 @@ const MultipleFileInputField = ({
const [size, setSize] = useState('0');
const [filesSizeError, setFilesSizeError] = useState(null);
const { name: inputName, onChange: inputOnChange, value: inputValues } = input;
- const MAX_FILES_SIZE = 2097152;
const handleInputChange = (e) => {
const file = e.target.files[0];
const totalFilesSize = getSizeInBytes(size) + file.size; // size of already uploaded files and new files
if (totalFilesSize > MAX_FILES_SIZE) {
- setFilesSizeError('Total files size exceeds 2MB');
+ setFilesSizeError(FILE_SIZE_EXCEEDS_ERROR);
} else {
const fileReader = new FileReader();
fileReader.onload = () => {
diff --git a/src/components/MultipleFileInputField/MultipleFileInputField.test.jsx b/src/components/MultipleFileInputField/MultipleFileInputField.test.jsx
index cf3976913a..359c1d8e77 100644
--- a/src/components/MultipleFileInputField/MultipleFileInputField.test.jsx
+++ b/src/components/MultipleFileInputField/MultipleFileInputField.test.jsx
@@ -1,10 +1,11 @@
import React from 'react';
import {
- screen, render, fireEvent,
+ screen, render, fireEvent, waitFor,
} from '@testing-library/react';
import { formatBytes, getSizeInBytes } from './utils';
import '@testing-library/jest-dom/extend-expect';
import MultipleFileInputField from './MultipleFileInputField';
+import { MAX_FILES_SIZE, FILE_SIZE_EXCEEDS_ERROR } from './constants';
const formatBytesTestData = [[100, '100 Bytes'], [1024, '1 KB'], [1048576, '1 MB'], [1200000, '1.14 MB'], [4550000, '4.34 MB']];
const getSizeInBytesTestData = [['1KB', 1024], ['1 MB', 1048576], ['100 Bytes', 100], ['276 KB', 282624], ['1.2 MB', 1258291.2]];
@@ -72,4 +73,13 @@ describe('', () => {
expect(readAsArrayBuffer).toHaveBeenCalled();
expect(props.input.onChange).toHaveBeenCalledTimes(1);
});
+
+ it('renders error when selected files exceeds size', async () => {
+ const { container } = render();
+ expect(screen.getByText('Select files')).toBeInTheDocument();
+ expect(container.querySelector('input')).toBeInTheDocument();
+ const file = new Blob([['a'.repeat(MAX_FILES_SIZE + 1)]], { type: 'text/plain', size: MAX_FILES_SIZE + 1, name: 'abc.txt' });
+ fireEvent.change(container.querySelector('input'), { target: { files: [file] } });
+ await waitFor(() => expect(screen.queryByText(FILE_SIZE_EXCEEDS_ERROR)).toBeInTheDocument());
+ });
});
diff --git a/src/components/MultipleFileInputField/constants.js b/src/components/MultipleFileInputField/constants.js
new file mode 100644
index 0000000000..26f5b28878
--- /dev/null
+++ b/src/components/MultipleFileInputField/constants.js
@@ -0,0 +1,2 @@
+export const MAX_FILES_SIZE = 256000;
+export const FILE_SIZE_EXCEEDS_ERROR = 'Total files size exceeds 250kb';