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

* PLT-6844 Change file uploading to use superagent

* Fixed handling of upload errors

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 {FileTypes} from 'mattermost-redux/action_types';
-import {uploadFile as uploadFileRedux} from 'mattermost-redux/actions/files';
+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) {
+export function uploadFile(file, name, channelId, clientId, successCallback, errorCallback) {
-    const fileFormData = new FormData();
+    const {dispatch, getState} = store;
-    fileFormData.append('files', file, name);
-    fileFormData.append('channel_id', channelId);
-    fileFormData.append('client_ids', clientId);
 
-    uploadFileRedux(channelId, null, [clientId], fileFormData)(dispatch, getState).then(
+    function handleResponse(err, res) {
-        (data) => {
+        if (err) {
-            if (data && success) {
+            let e;
-                success(data);
+            if (res && res.body && res.body.id) {
-            } else if (data == null && error) {
+                e = res.body;
-                const serverError = getState().requests.files.uploadFiles.error;
+            } else if (err.status === 0 || !err.status) {
-                error({id: serverError.server_error_id, ...serverError});
+                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) {

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;