improvement: add a new service function for reading the file

bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/component.jsx

@@ -2,7 +2,6 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
 import { findDOMNode } from 'react-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Styled from './styles';
 import {
   EFFECT_TYPES,
@@ -12,6 +11,7 @@ import {
   isVirtualBackgroundSupported,
 } from '/imports/ui/services/virtual-background/service';
 import { CustomVirtualBackgroundsContext } from './context';
+import VirtualBgService from '/imports/ui/components/video-preview/virtual-background/service';
 
 const propTypes = {
   intl: PropTypes.shape({
@@ -76,8 +76,6 @@ const intlMessages = defineMessages({
   }, {})
 });
 
-const MAX_FILE_SIZE = 5000;
-
 const VirtualBgSelector = ({
   intl,
   handleVirtualBgSelected,
@@ -91,6 +89,7 @@ const VirtualBgSelector = ({
   });
 
   const inputElementsRef = useRef([]);
+  const customBgSelectorRef = useRef(null);
 
   const {
     dispatch,
@@ -100,6 +99,8 @@ const VirtualBgSelector = ({
     loadFromDB,
   } = useContext(CustomVirtualBackgroundsContext);
 
+  const { MIME_TYPES_ALLOWED } = VirtualBgService;
+
   useEffect(() => {
     if (!loaded && isVisualEffects) loadFromDB();
   }, []);
@@ -157,32 +158,22 @@ const VirtualBgSelector = ({
     );
   }
 
-  const customBgSelectorRef = useRef(null);
-
   const handleCustomBgChange = (event) => {
     const file = event.target.files[0];
-    const { name: filename, size } = file;
+    const { readFile } = VirtualBgService;
-    const sizeInKB = size / 1024;
 
-    if (sizeInKB > MAX_FILE_SIZE) return;
+    readFile(
-
+      file,
-    const reader = new FileReader();
+      (background) => {
-    const substrings = filename.split('.');
+        dispatch({
-    substrings.pop();
+          type: 'new',
-    const filenameWithoutExtension = substrings.join('');
+          background,
-
+        });
-    reader.onload = function (e) {
+      },
-      const background = {
+      (error) => {
-        filename: filenameWithoutExtension,
+        // Add some logging, notification, etc.
-        data: e.target.result,
+      }
-        uniqueId: _.uniqueId(),
+    );
-      };
-      dispatch({
-        type: 'new',
-        background,
-      });
-    }
-    reader.readAsDataURL(file);
   }
 
   const renderThumbnailSelector = () => {
@@ -346,7 +337,7 @@ const VirtualBgSelector = ({
                 id="customBgSelector"
                 onChange={handleCustomBgChange}
                 style={{ display: 'none' }}
-                accept="image/png, image/jpeg"
+                accept={MIME_TYPES_ALLOWED.join(', ')}
               />
               <div aria-hidden className="sr-only" id={`vr-cam-btn-custom`}>
                 {intl.formatMessage(intlMessages.customLabel)}

bigbluebutton-html5/imports/ui/components/video-preview/virtual-background/service.js

@@ -1,6 +1,10 @@
+import _ from 'lodash';
 import logger from '/imports/startup/client/logger';
 import { notify } from '/imports/ui/services/notification';
 
+const MIME_TYPES_ALLOWED = ['image/png', 'image/jpeg'];
+const MAX_FILE_SIZE = 5000; // KBytes
+
 const withObjectStore = ({
   onError,
   onSuccess,
@@ -92,8 +96,44 @@ const del = (key) => {
   });
 };
 
+const parseFilename = (filename = '') => {
+  const substrings = filename.split('.');
+  substrings.pop();
+  const filenameWithoutExtension = substrings.join('');
+  return filenameWithoutExtension;
+};
+
+const readFile = (file, onSuccess, onError) => {
+  const { name, size, type } = file;
+  const sizeInKB = size / 1024;
+
+  if (sizeInKB > MAX_FILE_SIZE) {
+    return onError(new Error('Maximum file size exceeded.'));
+  }
+
+  if (!MIME_TYPES_ALLOWED.includes(type)) {
+    return onError(new Error('File type not allowed.'));
+  }
+
+  const filenameWithoutExtension = parseFilename(name);
+  const reader = new FileReader();
+
+  reader.onload = function (e) {
+    const background = {
+      filename: filenameWithoutExtension,
+      data: e.target.result,
+      uniqueId: _.uniqueId(),
+    };
+    onSuccess(background);
+  }
+  reader.readAsDataURL(file);
+};
+
 export default {
   load,
   save,
   del,
+  readFile,
+  MIME_TYPES_ALLOWED,
+  MAX_FILE_SIZE,
 };

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/drag-and-drop/component.jsx

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { injectIntl, defineMessages } from 'react-intl';
-import _ from 'lodash';
 import Auth from '/imports/ui/services/auth';
 import ConfirmationModal from '/imports/ui/components/common/modal/confirmation/component';
 import { CustomVirtualBackgroundsContext } from '/imports/ui/components/video-preview/virtual-background/context';
 import { EFFECT_TYPES } from '/imports/ui/services/virtual-background/service';
 import { withModalMounter } from '/imports/ui/components/common/modal/service';
+import VirtualBgService from '/imports/ui/components/video-preview/virtual-background/service';
 
 const intlMessages = defineMessages({
   confirmationTitle: {
@@ -18,9 +18,6 @@ const intlMessages = defineMessages({
   },
 });
 
-const MIME_TYPES_ALLOWED = ['image/png', 'image/jpeg'];
-const MAX_FILE_SIZE = 5000; // KBytes
-
 const DragAndDrop = (props) => {
   const { children, mountModal, intl } = props;
 
@@ -62,28 +59,23 @@ const DragAndDrop = (props) => {
     if (Auth.userID !== userId) return {};
 
     const startAndSaveVirtualBackground = (file) => {
-      const { name: filename } = file;
+      const { readFile } = VirtualBgService;
-      const reader = new FileReader();
-      const substrings = filename.split('.');
-      substrings.pop();
-      const filenameWithoutExtension = substrings.join('');
 
-      reader.onload = function (e) {
+      readFile(
-        const background = {
+        file,
-          filename: filenameWithoutExtension,
+        (background) => {
-          data: e.target.result,
+          const { filename, data } = background;
-          uniqueId: _.uniqueId(),
+          onAction(EFFECT_TYPES.IMAGE_TYPE, filename, data).then(() => {
-        };
+            dispatchCustomBackground({
-
+              type: 'new',
-        onAction(EFFECT_TYPES.IMAGE_TYPE, filename, e.target.result).then(() => {
+              background,
-          dispatchCustomBackground({
+            });
-            type: 'new',
-            background,
           });
-        });
+        },
-      };
+        (error) => {
-
+          // Add some logging, notification, etc.
-      reader.readAsDataURL(file);
+        }
+      );
     };
 
     const onDragOverHandler = (e) => {
@@ -99,10 +91,6 @@ const DragAndDrop = (props) => {
 
       const { files } = e.dataTransfer;
       const file = files[0];
-      const { size, type } = file;
-      const sizeInKB = size / 1024;
-
-      if (sizeInKB > MAX_FILE_SIZE || !MIME_TYPES_ALLOWED.includes(type)) return;
 
       if (Session.get('skipBackgroundDropConfirmation')) {
         return startAndSaveVirtualBackground(file);