Implement MSC4039: Add an MSC for a new Widget API action to upload files into the media repository

package.json

@@ -99,7 +99,7 @@
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-widget-api": "^1.5.0",
+        "matrix-widget-api": "^1.6.0",
         "memoize-one": "^6.0.0",
         "minimist": "^1.2.5",
         "oidc-client-ts": "^2.2.4",

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -136,6 +136,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             clientId: ELEMENT_CLIENT_ID,
             clientTheme: SettingsStore.getValue("theme"),
             clientLanguage: getUserLanguage(),
+            baseUrl: MatrixClientPeg.safeGet().baseUrl,
         });
 
         const parsed = new URL(templated);

src/stores/widgets/StopGapWidget.ts

@@ -218,6 +218,7 @@ export class StopGapWidget extends EventEmitter {
             clientTheme: SettingsStore.getValue("theme"),
             clientLanguage: getUserLanguage(),
             deviceId: this.client.getDeviceId() ?? undefined,
+            baseUrl: this.client.baseUrl,
         };
         const templated = this.mockWidget.getCompleteUrl(Object.assign(defaults, fromCustomisation), opts?.asPopout);
 

src/stores/widgets/StopGapWidgetDriver.ts

@@ -32,6 +32,7 @@ import {
     WidgetEventCapability,
     WidgetKind,
     ISearchUserDirectoryResult,
+    IGetMediaConfigResult,
 } from "matrix-widget-api";
 import {
     ClientEvent,
@@ -523,4 +524,18 @@ export class StopGapWidgetDriver extends WidgetDriver {
             })),
         };
     }
+
+    public async getMediaConfig(): Promise<IGetMediaConfigResult> {
+        const client = MatrixClientPeg.safeGet();
+
+        return await client.getMediaConfig();
+    }
+
+    public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
+        const client = MatrixClientPeg.safeGet();
+
+        const uploadResult = await client.uploadContent(file);
+
+        return { contentUri: uploadResult.content_uri };
+    }
 }

test/stores/widgets/StopGapWidget-test.ts

@@ -42,7 +42,7 @@ describe("StopGapWidget", () => {
                 id: "test",
                 creatorUserId: "@alice:example.org",
                 type: "example",
-                url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id",
+                url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url",
                 roomId: "!1:example.org",
             },
             room: mkRoom(client, "!1:example.org"),
@@ -62,7 +62,7 @@ describe("StopGapWidget", () => {
 
     it("should replace parameters in widget url template", () => {
         expect(widget.embedUrl).toBe(
-            "https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
+            "https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
         );
     });
 

test/stores/widgets/StopGapWidgetDriver-test.ts

@@ -447,4 +447,44 @@ describe("StopGapWidgetDriver", () => {
             expect(client.searchUserDirectory).toHaveBeenCalledWith({ term: "foo", limit: 25 });
         });
     });
+
+    describe("getMediaConfig", () => {
+        let driver: WidgetDriver;
+
+        beforeEach(() => {
+            driver = mkDefaultDriver();
+        });
+
+        it("gets the media configuration", async () => {
+            client.getMediaConfig.mockResolvedValue({
+                "m.upload.size": 1000,
+            });
+
+            await expect(driver.getMediaConfig()).resolves.toEqual({
+                "m.upload.size": 1000,
+            });
+
+            expect(client.getMediaConfig).toHaveBeenCalledWith();
+        });
+    });
+
+    describe("uploadFile", () => {
+        let driver: WidgetDriver;
+
+        beforeEach(() => {
+            driver = mkDefaultDriver();
+        });
+
+        it("uploads a file", async () => {
+            client.uploadContent.mockResolvedValue({
+                content_uri: "mxc://...",
+            });
+
+            await expect(driver.uploadFile("data")).resolves.toEqual({
+                contentUri: "mxc://...",
+            });
+
+            expect(client.uploadContent).toHaveBeenCalledWith("data");
+        });
+    });
 });

test/test-utils/test-utils.ts

@@ -249,6 +249,8 @@ export function createTestClient(): MatrixClient {
         addThreePidOnly: jest.fn(),
         requestMsisdnToken: jest.fn(),
         submitMsisdnToken: jest.fn(),
+        getMediaConfig: jest.fn(),
+        baseUrl: "https://matrix-client.matrix.org",
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);

yarn.lock

@@ -7577,10 +7577,10 @@ matrix-web-i18n@^2.1.0:
     lodash "^4.17.21"
     walk "^2.3.15"
 
-matrix-widget-api@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.5.0.tgz#4ae3e46a7f2854f944ddaf8a5af63d72fba76c45"
-  integrity sha512-hKGfqQKK5qVMwW0Sp8l2TiuW8UuHafTvUZNSWBPghedB/rSFbVLlr0mufuEV0iq/pQ7ChW96q/WEC6Llie4SnA==
+matrix-widget-api@^1.5.0, matrix-widget-api@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.6.0.tgz#f0075411edffc6de339580ade7e6e6e6edb01af4"
+  integrity sha512-VXIJyAZ/WnBmT4C7ePqevgMYGneKMCP/0JuCOqntSsaNlCRHJvwvTxmqUU+ufOpzIF5gYNyIrAjbgrEbK3iqJQ==
   dependencies:
     "@types/events" "^3.0.0"
     events "^3.2.0"