Rework Upload internals to use MVVM (#33307)

* Initial reword of upload to MVVM.

* Update tests

* More incremental improvements

* Refactor tests to use helper method for composer uploads.

* Add drag and drop tests

* lint

* Add commentary

* fixup test

* More precise selector

* Retarget uploads

* lint

* fixup

* one more type

* update snap

* Fixup composerUploadFiles

* fix import

* lint

* Copy and paste fixes too

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

* tidy up

* Test cleanup

* More clean up

* another fix

* Use condensed version

* Cleanup tests

* more cleaning

* last bity

* s/throw Error/throw new Error/

apps/web/playwright/e2e/timeline/timeline.spec.ts

@@ -751,7 +751,7 @@ test.describe("Timeline", () => {
             await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();
         });
 
-        test("should render file size in kibibytes on a file tile", async ({ page, room }) => {
+        test("should render file size in kibibytes on a file tile", async ({ page, app, room }) => {
             await page.goto(`/#/room/${room.roomId}`);
             await expect(
                 page
@@ -760,12 +760,7 @@ test.describe("Timeline", () => {
             ).toBeVisible();
 
             // Upload a file from the message composer
-            await page
-                .locator(".mx_MessageComposer_actions input[type='file']")
-                .setInputFiles(getSampleFilePath("matrix-org-client-versions.json"));
-
-            // Click "Upload" button
-            await page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
+            await app.composerUploadFiles("room", getSampleFilePath("matrix-org-client-versions.json"));
 
             // Wait until the file is sent
             await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();

apps/web/playwright/pages/ElementAppPage.ts

@@ -169,8 +169,7 @@ export class ElementAppPage {
     ): ReturnType<Locator["setInputFiles"]> {
         const input = this.page
             .locator(location === "room" ? ".mx_RoomView_body" : ".mx_RightPanel")
-            .getByRole("region", { name: "Message composer" })
-            .locator("input[type='file']");
+            .getByTestId("room-upload-context-input");
         return input.setInputFiles(...params);
     }