Ensured consistency between FE & BE files validations. (#5191)

+ Improvements.

app/assets/locales/en.json

@@ -126,7 +126,7 @@
       "presentation": "Presentation",
       "click_to_upload": "Click to Upload",
       "drag_and_drop": " or drag and drop",
-      "upload_description": "Upload any office document or PDF file. Depending on the size of the file, it may require additional time to upload before it can be used",
+      "upload_description": "Upload any office document or PDF file (not larger than {{size}}). Depending on the size of the file, it may require additional time to upload before it can be used",
       "are_you_sure_delete_presentation": "Are you sure you want to delete this presentation?"
     },
     "shared_access": {
@@ -255,7 +255,7 @@
         "brand_image": "Brand Image",
         "click_to_upload": "Click to Upload",
         "drag_and_drop": " or drag and drop",
-        "upload_brand_image_description": "Upload any PNG, JPG, or SVG file. Depending on the size of the file, it may require additional time to upload before it can be used",
+        "upload_brand_image_description": "Upload any PNG, JPG, or SVG file (not larger than {{size}}). Depending on the size of the file, it may require additional time to upload before it can be used",
         "remove_branding_image": "Remove Branding Image"
       },
       "administration": {

app/javascript/components/admin/site_settings/appearance/BrandingImage.jsx

@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
 import FilesDragAndDrop from '../../../shared_components/utilities/FilesDragAndDrop';
 import useDeleteBrandingImage from '../../../../hooks/mutations/admin/site_settings/useDeleteBrandingImage';
+import { IMAGE_MAX_FILE_COEFF, IMAGE_SUPPORTED_EXTENSIONS } from '../../../../helpers/FileValidationHelper';
 
 export default function BrandingImage() {
   const { t } = useTranslation();
@@ -33,7 +34,7 @@ export default function BrandingImage() {
       <FilesDragAndDrop
         numOfFiles={1}
         onDrop={(files) => updateSiteSetting.mutate(files[0])}
-        formats={['.jpg', '.png', '.svg']}
+        formats={IMAGE_SUPPORTED_EXTENSIONS}
       >
         <Card className="border border-2 border-whitesmoke mt-3 text-center">
           <label htmlFor="file" className="presentation-upload">
@@ -55,7 +56,7 @@ export default function BrandingImage() {
                 </span>
               </Card.Title>
               <span className="text-muted">
-                { t('admin.site_settings.appearance.upload_brand_image_description') }
+                { t('admin.site_settings.appearance.upload_brand_image_description', { size: `${IMAGE_MAX_FILE_COEFF} MB` }) }
               </span>
             </Card.Body>
           </label>

app/javascript/components/rooms/room/presentation/Presentation.jsx

@@ -26,6 +26,7 @@ import useUploadPresentation from '../../../../hooks/mutations/rooms/useUploadPr
 import useRoom from '../../../../hooks/queries/rooms/useRoom';
 import DeletePresentationForm from './forms/DeletePresentationForm';
 import FilesDragAndDrop from '../../../shared_components/utilities/FilesDragAndDrop';
+import { PRESENTATION_MAX_FILE_COEFF, PRESENTATION_SUPPORTED_EXTENSIONS } from '../../../../helpers/FileValidationHelper';
 
 export default function Presentation() {
   const { t } = useTranslation();
@@ -42,8 +43,7 @@ export default function Presentation() {
       <FilesDragAndDrop
         onDrop={onDrop}
         numOfFiles={1}
-        formats={['.doc', '.docx', '.ppt', '.pptx', '.pdf', '.xls', '.xlsx', '.txt',
-          '.rtf', '.odt', '.ods', '.odp', '.odg', '.odc', '.odi', '.jpg', '.jpeg', '.png']}
+        formats={PRESENTATION_SUPPORTED_EXTENSIONS}
       >
         <div className="pt-3">
           <Card className="border-0 card-shadow text-center">
@@ -66,7 +66,7 @@ export default function Presentation() {
                   </span>
                 </Card.Title>
                 <Card.Text>
-                  { t('room.presentation.upload_description') }
+                  { t('room.presentation.upload_description', { size: `${PRESENTATION_MAX_FILE_COEFF} MB` }) }
                 </Card.Text>
               </Card.Body>
             </label>

app/javascript/helpers/FileValidationHelper.jsx

@@ -14,32 +14,47 @@
 // You should have received a copy of the GNU Lesser General Public License along
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
 
-export const fileValidation = (file, type) => {
-  const IMAGE_MAX_FILE_SIZE = 3_000_000;
-  const IMAGE_SUPPORTED_FORMATS = ['image/jpeg', 'image/png', 'image/svg+xml'];
+const IMAGE_SUPPORTED_FORMATS = {
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+};
+
+const PRESENTATION_SUPPORTED_FORMATS = {
+  '.doc': 'application/msword',
+  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  '.ppt': 'application/vnd.ms-powerpoint',
+  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  '.pdf': 'application/pdf',
+  '.xls': 'application/vnd.ms-excel',
+  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.txt': 'text/plain',
+  '.rtf': 'application/rtf',
+  '.odt': 'application/vnd.oasis.opendocument.text',
+  '.ods': 'application/vnd.oasis.opendocument.spreadsheet',
+  '.odp': 'application/vnd.oasis.opendocument.presentation',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+};
+
+export const IMAGE_SUPPORTED_EXTENSIONS = Object.keys(IMAGE_SUPPORTED_FORMATS);
+export const IMAGE_SUPPORTED_MIMES = Object.values(IMAGE_SUPPORTED_FORMATS);
+export const PRESENTATION_SUPPORTED_EXTENSIONS = Object.keys(PRESENTATION_SUPPORTED_FORMATS);
+export const PRESENTATION_SUPPORTED_MIMES = Object.values(PRESENTATION_SUPPORTED_FORMATS);
 
-  const PRESENTATION_MAX_FILE_SIZE = 10_000_000;
-  const PRESENTATION_SUPPORTED_FORMATS = [
-    'application/msword',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    'application/vnd.ms-powerpoint',
-    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-    'application/pdf',
-    'application/vnd.ms-excel',
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-    'text/plain',
-    'application/rtf',
-    'application/vnd.oasis.opendocument.text',
-    'application/vnd.oasis.opendocument.spreadsheet',
-    'application/vnd.oasis.opendocument.presentation',
-    'application/vnd'];
+export const IMAGE_MAX_FILE_COEFF = 3;
+export const PRESENTATION_MAX_FILE_COEFF = 10;
 
-  const MAX_FILE_SIZE = type === 'image' ? IMAGE_MAX_FILE_SIZE : PRESENTATION_MAX_FILE_SIZE;
-  const SUPPORTED_FORMATS = type === 'image' ? IMAGE_SUPPORTED_FORMATS : PRESENTATION_SUPPORTED_FORMATS;
+export const fileValidation = (file, type) => {
+  const MEBIBYTE = 1024 * 1024;
+  const MAX_FILE_SIZE = type === 'image' ? IMAGE_MAX_FILE_COEFF * MEBIBYTE : PRESENTATION_MAX_FILE_COEFF * MEBIBYTE;
+  const SUPPORTED_MIMES = type === 'image' ? IMAGE_SUPPORTED_MIMES : PRESENTATION_SUPPORTED_MIMES;
 
   if (file.size > MAX_FILE_SIZE) {
     throw new Error('fileSizeTooLarge');
-  } else if (!SUPPORTED_FORMATS.includes(file.type)) {
+  } else if (!SUPPORTED_MIMES.includes(file.type)) {
     throw new Error('fileTypeNotSupported');
   }
 };