PLT-6844 Change file uploading to use superagent (#6785)

* PLT-6844 Change file uploading to use superagent

* Fixed handling of upload errors

2 files changed, 70 insertions, 17 deletions

diff --git a/webapp/actions/file_actions.jsx b/webapp/actions/file_actions.jsx
index c34af94c4..9a565a07c 100644
--- a/webapp/actions/file_actions.jsx
+++ b/webapp/actions/file_actions.jsx
@@ -1,28 +1,81 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {batchActions} from 'redux-batched-actions';
+import request from 'superagent';
+
 import store from 'stores/redux_store.jsx';
-const dispatch = store.dispatch;
-const getState = store.getState;
-import {uploadFile as uploadFileRedux} from 'mattermost-redux/actions/files';
+
+import {FileTypes} from 'mattermost-redux/action_types';
+import {forceLogoutIfNecessary} from 'mattermost-redux/actions/helpers';
+import {getLogErrorAction} from 'mattermost-redux/actions/errors';
 import {Client4} from 'mattermost-redux/client';
 
-export function uploadFile(file, name, channelId, clientId, success, error) {
-    const fileFormData = new FormData();
-    fileFormData.append('files', file, name);
-    fileFormData.append('channel_id', channelId);
-    fileFormData.append('client_ids', clientId);
+export function uploadFile(file, name, channelId, clientId, successCallback, errorCallback) {
+    const {dispatch, getState} = store;
 
-    uploadFileRedux(channelId, null, [clientId], fileFormData)(dispatch, getState).then(
-        (data) => {
-            if (data && success) {
-                success(data);
-            } else if (data == null && error) {
-                const serverError = getState().requests.files.uploadFiles.error;
-                error({id: serverError.server_error_id, ...serverError});
+    function handleResponse(err, res) {
+        if (err) {
+            let e;
+            if (res && res.body && res.body.id) {
+                e = res.body;
+            } else if (err.status === 0 || !err.status) {
+                e = {message: this.translations.connectionError};
+            } else {
+                e = {message: this.translations.unknownError + ' (' + err.status + ')'};
+            }
+
+            forceLogoutIfNecessary(err, dispatch);
+
+            const failure = {
+                type: FileTypes.UPLOAD_FILES_FAILURE,
+                clientIds: [clientId],
+                channelId,
+                rootId: null,
+                error: err
+            };
+
+            dispatch(batchActions([failure, getLogErrorAction(err)]), getState);
+
+            if (errorCallback) {
+                errorCallback(e, err, res);
+            }
+        } else if (res) {
+            const data = res.body.file_infos.map((fileInfo, index) => {
+                return {
+                    ...fileInfo,
+                    clientId: res.body.client_ids[index]
+                };
+            });
+
+            dispatch(batchActions([
+                {
+                    type: FileTypes.RECEIVED_UPLOAD_FILES,
+                    data,
+                    channelId,
+                    rootId: null
+                },
+                {
+                    type: FileTypes.UPLOAD_FILES_SUCCESS
+                }
+            ]), getState);
+
+            if (successCallback) {
+                successCallback(res.body, res);
             }
         }
-    );
+    }
+
+    dispatch({type: FileTypes.UPLOAD_FILES_REQUEST}, getState);
+
+    return request.
+        post(Client4.getFilesRoute()).
+        set(Client4.getOptions().headers).
+        attach('files', file, name).
+        field('channel_id', channelId).
+        field('client_ids', clientId).
+        accept('application/json').
+        end(handleResponse);
 }
 
 export async function getPublicLink(fileId, success) {
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index 6b36e83fb..17bb50a2b 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -99,7 +99,7 @@ class FileUpload extends React.Component {
                 channelId,
                 clientId,
                 this.fileUploadSuccess.bind(this, channelId),
-                this.fileUploadFail.bind(this, clientId)
+                this.fileUploadFail.bind(this, clientId, channelId)
             );
 
             const requests = this.state.requests;