Make attachments uploadable to a thread (#7064)

src/components/structures/RoomView.tsx

@@ -786,7 +786,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 break;
             case 'picture_snapshot':
                 ContentMessages.sharedInstance().sendContentListToRoom(
-                    [payload.file], this.state.room.roomId, this.context);
+                    [payload.file], this.state.room.roomId, null, this.context);
                 break;
             case 'notifier_enabled':
             case Action.UploadStarted:
@@ -1292,7 +1292,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         ev.stopPropagation();
         ev.preventDefault();
         ContentMessages.sharedInstance().sendContentListToRoom(
-            ev.dataTransfer.files, this.state.room.roomId, this.context,
+            ev.dataTransfer.files, this.state.room.roomId, null, this.context,
         );
         dis.fire(Action.FocusSendMessageComposer);
 

src/components/structures/ThreadView.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import { MatrixEvent, Room } from 'matrix-js-sdk/src';
+import { IEventRelation, MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
 import { RelationType } from 'matrix-js-sdk/src/@types/event';
 
@@ -37,6 +37,8 @@ import { MatrixClientPeg } from '../../MatrixClientPeg';
 import { E2EStatus } from '../../utils/ShieldUtils';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
+import ContentMessages from '../../ContentMessages';
+import UploadBar from './UploadBar';
 import { ChevronFace, ContextMenuTooltipButton } from './ContextMenu';
 import { _t } from '../../languageHandler';
 import IconizedContextMenu, {
@@ -304,6 +306,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
         const highlightedEventId = this.props.initialEventHighlighted
             ? this.props.initialEvent?.getId()
             : null;
+
+        const threadRelation: IEventRelation = {
+            rel_type: RelationType.Thread,
+            event_id: this.state.thread?.id,
+        };
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -343,13 +351,14 @@ export default class ThreadView extends React.Component<IProps, IState> {
                         />
                     ) }
 
+                    { ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
+                        <UploadBar room={this.props.room} relation={threadRelation} />
+                    ) }
+
                     { this.state?.thread?.timelineSet && (<MessageComposer
                         room={this.props.room}
                         resizeNotifier={this.props.resizeNotifier}
-                        relation={{
-                            rel_type: RelationType.Thread,
-                            event_id: this.state.thread.id,
-                        }}
+                        relation={threadRelation}
                         replyToEvent={this.state.replyToEvent}
                         permalinkCreator={this.props.permalinkCreator}
                         e2eStatus={this.props.e2eStatus}

src/components/structures/UploadBar.tsx

@@ -27,9 +27,11 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import { IUpload } from "../../models/IUpload";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { IEventRelation } from 'matrix-js-sdk/src';
 
 interface IProps {
     room: Room;
+    relation?: IEventRelation;
 }
 
 interface IState {
@@ -64,7 +66,7 @@ export default class UploadBar extends React.Component<IProps, IState> {
     }
 
     private getUploadsInRoom(): IUpload[] {
-        const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+        const uploads = ContentMessages.sharedInstance().getCurrentUploads(this.props.relation);
         return uploads.filter(u => u.roomId === this.props.room.roomId);
     }