fix profile upload by using RNFetchBlob (#1900)

app/actions/views/edit_profile.js

@@ -1,8 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {uploadProfileImage, updateMe} from 'mattermost-redux/actions/users';
-import {buildFileUploadData} from 'app/utils/file';
+import {updateMe} from 'mattermost-redux/actions/users';
 
 export function updateUser(user, success, error) {
     return async (dispatch, getState) => {
@@ -16,10 +15,3 @@ export function updateUser(user, success, error) {
         return result;
     };
 }
-
-export function handleUploadProfileImage(image, userId) {
-    return async (dispatch, getState) => {
-        const imageData = buildFileUploadData(image);
-        return await uploadProfileImage(userId, imageData)(dispatch, getState);
-    };
-}

app/screens/edit_profile/edit_profile.js

@@ -5,17 +5,21 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
 import {View} from 'react-native';
-
+import RNFetchBlob from 'react-native-fetch-blob';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
+import {Client4} from 'mattermost-redux/client';
+
+import {buildFileUploadData, encodeHeaderURIStringToUTF8} from 'app/utils/file';
+import {emptyFunction} from 'app/utils/general';
+import {preventDoubleTap} from 'app/utils/tap';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+
 import Loading from 'app/components/loading';
 import ErrorText from 'app/components/error_text';
 import StatusBar from 'app/components/status_bar/index';
 import ProfilePicture from 'app/components/profile_picture';
 import AttachmentButton from 'app/components/attachment_button';
-import {emptyFunction} from 'app/utils/general';
-import {preventDoubleTap} from 'app/utils/tap';
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import EditProfileItem from './edit_profile_item';
 
@@ -49,7 +53,6 @@ const holders = {
 export default class EditProfile extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
-            handleUploadProfileImage: PropTypes.func.isRequired,
             updateUser: PropTypes.func.isRequired,
         }).isRequired,
         config: PropTypes.object.isRequired,
@@ -165,11 +168,7 @@ export default class EditProfile extends PureComponent {
         };
 
         if (profileImage) {
-            const {error} = await this.props.actions.handleUploadProfileImage(profileImage, this.props.currentUser.id);
-            if (error) {
-                this.handleRequestError(error);
-                return;
-            }
+            this.uploadProfileImage().catch(this.handleUploadError);
         }
 
         if (this.canUpdate()) {
@@ -189,6 +188,26 @@ export default class EditProfile extends PureComponent {
         this.emitCanUpdateAccount(true);
     };
 
+    uploadProfileImage = () => {
+        const {profileImage} = this.state;
+        const {currentUser} = this.props;
+        const fileData = buildFileUploadData(profileImage);
+
+        const headers = {
+            Authorization: `Bearer ${Client4.getToken()}`,
+            'Content-Type': 'multipart/form-data',
+        };
+
+        const fileInfo = {
+            name: 'image',
+            filename: encodeHeaderURIStringToUTF8(fileData.name),
+            data: RNFetchBlob.wrap(profileImage.uri.replace('file://', '')),
+            type: fileData.type,
+        };
+
+        return RNFetchBlob.fetch('POST', `${Client4.getUserRoute(currentUser.id)}/image`, headers, [fileInfo]);
+    };
+
     updateField = (field) => {
         this.setState(field, () => {
             this.emitCanUpdateAccount(this.canUpdate(field));

app/screens/edit_profile/index.js

@@ -7,7 +7,7 @@ import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
-import {updateUser, handleUploadProfileImage} from 'app/actions/views/edit_profile';
+import {updateUser} from 'app/actions/views/edit_profile';
 
 import EditProfile from './edit_profile';
 
@@ -21,7 +21,6 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
-            handleUploadProfileImage,
             updateUser,
         }, dispatch),
     };