From 76a05eddfa5c3710ef37ccafa6cb05e2d7ab4886 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 25 Mar 2021 22:29:21 -0600
Subject: [PATCH] Fix upload bar not populating when starting uploads

Fixes https://github.com/vector-im/element-web/issues/16713

See diff for more information
---
 src/components/structures/UploadBar.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
index 4a1fd4313d..e19e312f58 100644
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -43,7 +43,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
 
     constructor(props) {
         super(props);
-        this.state = {uploadsHere: []};
+
+        // Set initial state to any available upload in this room - we might be mounting
+        // earlier than the first progress event, so should show something relevant.
+        const uploadsHere = this.getUploadsInRoom();
+        this.state = {currentUpload: uploadsHere[0], uploadsHere};
     }
 
     componentDidMount() {
@@ -56,6 +60,11 @@ export default class UploadBar extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
     }
 
+    private getUploadsInRoom(): IUpload[] {
+        const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+        return uploads.filter(u => u.roomId === this.props.room.roomId);
+    }
+
     private onAction = (payload: ActionPayload) => {
         switch (payload.action) {
             case Action.UploadStarted:
@@ -64,8 +73,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
             case Action.UploadCanceled:
             case Action.UploadFailed: {
                 if (!this.mounted) return;
-                const uploads = ContentMessages.sharedInstance().getCurrentUploads();
-                const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+                const uploadsHere = this.getUploadsInRoom();
                 this.setState({currentUpload: uploadsHere[0], uploadsHere});
                 break;
             }