From f4dd8e579639637057e8717067bb0627d9eb1de3 Mon Sep 17 00:00:00 2001 From: Thomas Balthazar Date: Tue, 5 Jul 2016 21:37:21 +0200 Subject: 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 | 1 + .../components/admin_console/storage_settings.jsx | 41 +++++++++++----------- webapp/components/file_upload.jsx | 7 ++-- .../user_settings/user_settings_general.jsx | 3 +- webapp/i18n/en.json | 7 ++-- webapp/utils/constants.jsx | 1 - 6 files changed, 32 insertions(+), 28 deletions(-) diff --git a/utils/config.go b/utils/config.go index 5ebf29e3e..922709786 100644 --- a/utils/config.go +++ b/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 { 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() { - /* - } - placeholder={Utils.localizeMessage('admin.image.maxFileSizeExample', 'Ex "52428800"')} - helpText={ - - } - value={this.state.maxFileSize} - onChange={this.handleChange} - />*/ - return ( + + } + placeholder={Utils.localizeMessage('admin.image.maxFileSizeExample', '50')} + helpText={ + + } + value={this.state.maxFileSize} + onChange={this.handleChange} + /> ); } 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; } diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 3677ec80e..95f267740 100644 --- a/webapp/i18n/en.json +++ b/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", diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index ac00262c3..e748cae4b 100644 --- a/webapp/utils/constants.jsx +++ b/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, -- cgit v1.2.3-1-g7c22