[MM-28245] Handle upload files only for top screen (#4761)

* Handle upload files only for top screen

* Return early in handlePasteFiles too

app/components/post_draft/uploads/uploads.js

@@ -150,30 +150,36 @@ export default class Uploads extends PureComponent {
     };
 
     handlePasteFiles = (error, files) => {
-        if (this.props.screenId === EphemeralStore.getNavigationTopComponentId()) {
-            if (error) {
-                this.showPasteFilesErrorDialog();
-                return;
-            }
-
-            const {maxFileSize} = this.props;
-            const availableCount = MAX_FILE_COUNT - this.props.files.length;
-            if (files.length > availableCount) {
-                this.handleFileMaxWarning();
-                return;
-            }
-
-            const largeFile = files.find((image) => image.fileSize > maxFileSize);
-            if (largeFile) {
-                this.handleFileSizeWarning();
-                return;
-            }
-
-            this.handleUploadFiles(files);
+        if (this.props.screenId !== EphemeralStore.getNavigationTopComponentId()) {
+            return;
         }
+
+        if (error) {
+            this.showPasteFilesErrorDialog();
+            return;
+        }
+
+        const {maxFileSize} = this.props;
+        const availableCount = MAX_FILE_COUNT - this.props.files.length;
+        if (files.length > availableCount) {
+            this.handleFileMaxWarning();
+            return;
+        }
+
+        const largeFile = files.find((image) => image.fileSize > maxFileSize);
+        if (largeFile) {
+            this.handleFileSizeWarning();
+            return;
+        }
+
+        this.handleUploadFiles(files);
     };
 
     handleUploadFiles = async (files) => {
+        if (this.props.screenId !== EphemeralStore.getNavigationTopComponentId()) {
+            return;
+        }
+
         let exceed = false;
 
         const totalFiles = files.length;

app/components/post_draft/uploads/uploads.test.js

@@ -0,0 +1,40 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Preferences from '@mm-redux/constants/preferences';
+
+import EphemeralStore from '@store/ephemeral_store';
+import Uploads from './uploads';
+
+describe('Uploads', () => {
+    const baseProps = {
+        channelId: 'channel-id',
+        files: [],
+        filesUploadingForCurrentChannel: true,
+        handleRemoveLastFile: jest.fn(),
+        initUploadFiles: jest.fn(),
+        maxFileSize: 100,
+        theme: Preferences.THEMES.default,
+    };
+
+    test('handleUploadFiles should return early if screen is not the top screen', async () => {
+        const topScreenId = 'top-screen';
+        EphemeralStore.getNavigationTopComponentId = jest.fn(() => (topScreenId));
+
+        const props = {
+            ...baseProps,
+            screenId: `not-${topScreenId}`,
+        };
+        const wrapper = shallow(
+            <Uploads {...props}/>,
+        );
+        const instance = wrapper.instance();
+        instance.handleFileSizeWarning = jest.fn();
+
+        await instance.handleUploadFiles([]);
+        expect(instance.handleFileSizeWarning).not.toHaveBeenCalled();
+        expect(props.initUploadFiles).not.toHaveBeenCalled();
+    });
+});