fix: change max files size limit from 2mb to 250kb (#661)

* fix: change max files size limit from 2mb to 250kb

* test: add test for max files size error

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.",
     },
   }),
 };

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 = () => {

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('<MultipleFileInputField />', () => {
     expect(readAsArrayBuffer).toHaveBeenCalled();
     expect(props.input.onChange).toHaveBeenCalledTimes(1);
   });
+
+  it('renders error when selected files exceeds size', async () => {
+    const { container } = render(<MultipleFileInputField {...props} />);
+    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());
+  });
 });

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