PLT-1316/PLT-3280 Change client-side max file size limit (#3354)

* Change client-side max file size limit

It now relies on the value set in config.json.
Re-enable and tweak the max file size setting in system console.

* Update file upload error message

3 files changed, 26 insertions, 25 deletions

diff --git a/webapp/components/admin_console/storage_settings.jsx b/webapp/components/admin_console/storage_settings.jsx
index e4efd433c..a3d4122b5 100644
--- a/webapp/components/admin_console/storage_settings.jsx
+++ b/webapp/components/admin_console/storage_settings.jsx
@@ -22,8 +22,8 @@ export default class StorageSettings extends AdminSettings {
 
         this.renderSettings = this.renderSettings.bind(this);
 
-        //maxFileSize: props.config.FileSettings.MaxFileSize,
         this.state = Object.assign(this.state, {
+            maxFileSize: props.config.FileSettings.MaxFileSize / 1024 / 1024,
             driverName: props.config.FileSettings.DriverName,
             directory: props.config.FileSettings.Directory,
             amazonS3AccessKeyId: props.config.FileSettings.AmazonS3AccessKeyId,
@@ -34,7 +34,7 @@ export default class StorageSettings extends AdminSettings {
     }
 
     getConfigFromState(config) {
-        //config.FileSettings.MaxFileSize = this.parseInt(this.state.maxFileSize);
+        config.FileSettings.MaxFileSize = this.parseInt(this.state.maxFileSize) * 1024 * 1024;
         config.FileSettings.DriverName = this.state.driverName;
         config.FileSettings.Directory = this.state.directory;
         config.FileSettings.AmazonS3AccessKeyId = this.state.amazonS3AccessKeyId;
@@ -57,25 +57,6 @@ export default class StorageSettings extends AdminSettings {
     }
 
     renderSettings() {
-        /*<TextSetting
-            id='maxFileSize'
-            label={
-                <FormattedMessage
-                    id='admin.image.maxFileSizeTitle'
-                    defaultMessage='Max File Size:'
-                />
-            }
-            placeholder={Utils.localizeMessage('admin.image.maxFileSizeExample', 'Ex "52428800"')}
-            helpText={
-                <FormattedMessage
-                    id='admin.image.maxFileSizeDescription'
-                    defaultMessage='Max File Size in bytes. If blank, will be set to 52428800 (50MB).'
-                />
-            }
-            value={this.state.maxFileSize}
-            onChange={this.handleChange}
-        />*/
-
         return (
             <SettingsGroup>
                 <DropdownSetting
@@ -196,6 +177,24 @@ export default class StorageSettings extends AdminSettings {
                     onChange={this.handleChange}
                     disabled={this.state.driverName !== DRIVER_S3}
                 />
+                <TextSetting
+                    id='maxFileSize'
+                    label={
+                        <FormattedMessage
+                            id='admin.image.maxFileSizeTitle'
+                            defaultMessage='Maximum File Size:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.image.maxFileSizeExample', '50')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.image.maxFileSizeDescription'
+                            defaultMessage='Maximum file size for message attachments in megabytes. Caution: Verify server memory can support your setting choice. Large file sizes increase the risk of server crashes and failed uploads due to network interruptions.'
+                        />
+                    }
+                    value={this.state.maxFileSize}
+                    onChange={this.handleChange}
+                />
             </SettingsGroup>
         );
     }
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index dcf55b6db..16ee096ed 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -44,6 +44,7 @@ class FileUpload extends React.Component {
         this.keyUpload = this.keyUpload.bind(this);
 
         this.state = {
+            maxFileSize: global.window.mm_config.MaxFileSize,
             requests: {}
         };
     }
@@ -75,7 +76,7 @@ class FileUpload extends React.Component {
         const tooLargeFiles = [];
 
         for (let i = 0; i < files.length && numUploads < uploadsRemaining; i++) {
-            if (files[i].size > Constants.MAX_FILE_SIZE) {
+            if (files[i].size > this.state.maxFileSize) {
                 tooLargeFiles.push(files[i]);
                 continue;
             }
@@ -106,9 +107,9 @@ class FileUpload extends React.Component {
         } else if (tooLargeFiles.length > 1) {
             var tooLargeFilenames = tooLargeFiles.map((file) => file.name).join(', ');
 
-            this.props.onUploadError(formatMessage(holders.filesAbove, {max: (Constants.MAX_FILE_SIZE / 1000000), filenames: tooLargeFilenames}));
+            this.props.onUploadError(formatMessage(holders.filesAbove, {max: (this.state.maxFileSize / 1048576), filenames: tooLargeFilenames}));
         } else if (tooLargeFiles.length > 0) {
-            this.props.onUploadError(formatMessage(holders.fileAbove, {max: (Constants.MAX_FILE_SIZE / 1000000), filename: tooLargeFiles[0].name}));
+            this.props.onUploadError(formatMessage(holders.fileAbove, {max: (this.state.maxFileSize / 1048576), filename: tooLargeFiles[0].name}));
         }
     }
 
diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx
index 37264fb7e..f8910b9bc 100644
--- a/webapp/components/user_settings/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general.jsx
@@ -95,6 +95,7 @@ class UserSettingsGeneralTab extends React.Component {
         this.updateSection = this.updateSection.bind(this);
 
         this.state = this.setupInitialState(props);
+        this.setState({maxFileSize: global.window.mm_config.MaxFileSize});
     }
     submitUsername(e) {
         e.preventDefault();
@@ -221,7 +222,7 @@ class UserSettingsGeneralTab extends React.Component {
         if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') {
             this.setState({clientError: formatMessage(holders.validImage)});
             return;
-        } else if (picture.size > Constants.MAX_FILE_SIZE) {
+        } else if (picture.size > this.state.maxFileSize) {
             this.setState({clientError: formatMessage(holders.imageTooLarge)});
             return;
         }