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

utils/config.go

@@ -256,6 +256,7 @@ func getClientConfig(c *model.Config) map[string]string {
 
 	props["EnableCustomEmoji"] = strconv.FormatBool(*c.ServiceSettings.EnableCustomEmoji)
 	props["RestrictCustomEmojiCreation"] = *c.ServiceSettings.RestrictCustomEmojiCreation
+	props["MaxFileSize"] = strconv.FormatInt(*c.FileSettings.MaxFileSize, 10)
 
 	if IsLicensed {
 		if *License.Features.CustomBrand {

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>
         );
     }

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}));
         }
     }
 

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

webapp/i18n/en.json

@@ -265,6 +265,9 @@
   "admin.image.amazonS3RegionExample": "Ex \"us-east-1\"",
   "admin.image.amazonS3RegionTitle": "Amazon S3 Region:",
   "admin.image.amazonS3SecretDescription": "Obtain this credential from your Amazon EC2 administrator.",
+  "admin.image.maxFileSizeTitle": "Maximum File Size:",
+  "admin.image.maxFileSizeExample": "50",
+  "admin.image.maxFileSizeDescription": "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.",
   "admin.image.amazonS3SecretExample": "Ex \"jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY\"",
   "admin.image.amazonS3SecretTitle": "Amazon S3 Secret Access Key:",
   "admin.image.localDescription": "Directory to which files and images are written. If blank, defaults to ./data/.",
@@ -941,8 +944,8 @@
   "file_attachment.download": "Download",
   "file_info_preview.size": "Size ",
   "file_info_preview.type": "File type ",
-  "file_upload.fileAbove": "File above {max}MB could not be uploaded: {filename}",
-  "file_upload.filesAbove": "Files above {max}MB could not be uploaded: {filenames}",
+  "file_upload.fileAbove": "File above {max}MB cannot be uploaded: {filename}",
+  "file_upload.filesAbove": "Files above {max}MB cannot be uploaded: {filenames}",
   "file_upload.limited": "Uploads limited to {count} files maximum. Please use additional posts for more files.",
   "file_upload.pasted": "Image Pasted at ",
   "filtered_user_list.any_team": "All Users",

webapp/utils/constants.jsx

@@ -210,7 +210,6 @@ export default {
     },
     MAX_DISPLAY_FILES: 5,
     MAX_UPLOAD_FILES: 5,
-    MAX_FILE_SIZE: 50000000, // 50 MB
     THUMBNAIL_WIDTH: 128,
     THUMBNAIL_HEIGHT: 100,
     WEB_VIDEO_WIDTH: 640,