PLT-6277 Moved profile image cropping to server (#6269)

* PLT-6277 Moved profile image cropping to server

* Cosmetic refactoring of SettingPicture component

1 files changed, 12 insertions, 25 deletions

diff --git a/webapp/components/user_settings/user_settings_general/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
index 58f718549..5e9763f12 100644
--- a/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
@@ -113,7 +113,6 @@ class UserSettingsGeneralTab extends React.Component {
         this.updatePicture = this.updatePicture.bind(this);
         this.updateSection = this.updateSection.bind(this);
         this.updatePosition = this.updatePosition.bind(this);
-        this.updatedCroppedPicture = this.updatedCroppedPicture.bind(this);
 
         this.state = this.setupInitialState(props);
     }
@@ -241,7 +240,7 @@ class UserSettingsGeneralTab extends React.Component {
     submitPicture(e) {
         e.preventDefault();
 
-        if (!this.state.picture) {
+        if (!this.state.pictureFile) {
             return;
         }
 
@@ -252,12 +251,12 @@ class UserSettingsGeneralTab extends React.Component {
         trackEvent('settings', 'user_settings_update', {field: 'picture'});
 
         const {formatMessage} = this.props.intl;
-        const picture = this.state.picture;
+        const file = this.state.pictureFile;
 
-        if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') {
+        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
             this.setState({clientError: formatMessage(holders.validImage)});
             return;
-        } else if (picture.size > this.state.maxFileSize) {
+        } else if (file.size > this.state.maxFileSize) {
             this.setState({clientError: formatMessage(holders.imageTooLarge)});
             return;
         }
@@ -265,7 +264,7 @@ class UserSettingsGeneralTab extends React.Component {
         this.setState({loadingPicture: true});
 
         uploadProfileImage(
-            picture,
+            file,
             () => {
                 this.updateSection('');
                 this.submitActive = false;
@@ -324,25 +323,14 @@ class UserSettingsGeneralTab extends React.Component {
         this.setState({confirmEmail: e.target.value});
     }
 
-    updatedCroppedPicture(file) {
-        if (file) {
-            this.setState({picture: file});
-
-            this.submitActive = true;
-            this.setState({clientError: null});
-        } else {
-            this.setState({picture: null});
-        }
-    }
-
     updatePicture(e) {
         if (e.target.files && e.target.files[0]) {
-            this.setState({picture: e.target.files[0]});
+            this.setState({pictureFile: e.target.files[0]});
 
             this.submitActive = true;
             this.setState({clientError: null});
         } else {
-            this.setState({picture: null});
+            this.setState({pictureFile: null});
         }
     }
 
@@ -368,7 +356,7 @@ class UserSettingsGeneralTab extends React.Component {
             originalEmail: user.email,
             email: '',
             confirmEmail: '',
-            picture: null,
+            pictureFile: null,
             loadingPicture: false,
             emailChangeInProgress: false,
             maxFileSize: global.window.mm_config.MaxFileSize
@@ -1124,17 +1112,16 @@ class UserSettingsGeneralTab extends React.Component {
                     title={formatMessage(holders.profilePicture)}
                     submit={this.submitPicture}
                     src={Client.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
-                    server_error={serverError}
-                    client_error={clientError}
+                    serverError={serverError}
+                    clientError={clientError}
                     updateSection={(e) => {
                         this.updateSection('');
                         e.preventDefault();
                     }}
-                    picture={this.state.picture}
-                    pictureChange={this.updatePicture}
+                    file={this.state.pictureFile}
+                    onFileChange={this.updatePicture}
                     submitActive={this.submitActive}
                     loadingPicture={this.state.loadingPicture}
-                    imageCropChange={this.updatedCroppedPicture}
                 />
             );
         } else {