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 { 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 { 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 { 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; }