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';