diff --git a/packages/shared-components/src/event-tiles/FileBody/FileBody.module.css b/packages/shared-components/src/event-tiles/FileBody/FileBody.module.css
new file mode 100644
index 00000000000..93225c0bdc6
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/FileBody.module.css
@@ -0,0 +1,84 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.root {
+    display: block;
+}
+
+.root > span {
+    display: block;
+    margin-top: var(--cpd-space-2x);
+}
+
+.download {
+    color: var(--cpd-color-text-action-accent);
+    height: var(--cpd-space-9x);
+    margin-top: var(--cpd-space-2x);
+}
+
+.download object {
+    margin-left: -16px;
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
+}
+
+/* Remove the border and padding for iframes for download links. */
+.download iframe {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    width: 100%;
+}
+
+.info {
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    text-align: left;
+    font: inherit;
+    display: inline-block;
+}
+
+.infoIcon {
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    border-radius: 20px;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    position: relative;
+    vertical-align: middle;
+    margin-right: 12px;
+}
+
+.infoIcon::before {
+    content: "";
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    /* Using a data URL for the attachment icon to avoid external dependencies */
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12.207 2.793a1 1 0 0 0-1.414 0l-8 8a1 1 0 1 0 1.414 1.414L11 5.414V19a1 1 0 1 0 2 0V5.414l6.793 6.793a1 1 0 0 0 1.414-1.414l-8-8Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    background-color: var(--cpd-color-icon-secondary);
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+}
+
+.infoFilename {
+    font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-primary);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
+    vertical-align: middle;
+}
diff --git a/packages/shared-components/src/event-tiles/FileBody/FileBody.stories.tsx b/packages/shared-components/src/event-tiles/FileBody/FileBody.stories.tsx
new file mode 100644
index 00000000000..e33ab3ea5c1
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/FileBody.stories.tsx
@@ -0,0 +1,157 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { FileBody, type FileBodyViewSnapshot, type FileBodyActions } from "./FileBody";
+import { useMockedViewModel } from "../../useMockedViewModel";
+
+type FileBodyProps = FileBodyViewSnapshot & FileBodyActions;
+
+const FileBodyWrapper = ({
+    onPlaceholderClick,
+    onDownloadClick,
+    onDecryptClick,
+    onIframeLoad,
+    ...rest
+}: FileBodyProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onPlaceholderClick,
+        onDownloadClick,
+        onDecryptClick,
+        onIframeLoad,
+    });
+    return <FileBody vm={vm} />;
+};
+
+const meta: Meta<typeof FileBodyWrapper> = {
+    title: "Event Tiles/FileBody",
+    component: FileBodyWrapper,
+    tags: ["autodocs"],
+    args: {
+        fileInfo: {
+            filename: "Important Document.pdf",
+            tooltip: "Important Document.pdf",
+            mimeType: "application/pdf",
+        },
+        downloadLabel: "Download",
+        showGenericPlaceholder: true,
+        showDownloadLink: true,
+        isEncrypted: false,
+        isDecrypted: false,
+        forExport: false,
+        onPlaceholderClick: fn(),
+        onDownloadClick: fn(),
+        onDecryptClick: fn(),
+        onIframeLoad: fn(),
+    },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof FileBodyWrapper> = (args) => <FileBodyWrapper {...args} />;
+
+/**
+ * Default file body with placeholder and download button
+ */
+export const Default = Template.bind({});
+
+/**
+ * File body without the generic placeholder
+ */
+export const WithoutPlaceholder = Template.bind({});
+WithoutPlaceholder.args = {
+    showGenericPlaceholder: false,
+};
+
+/**
+ * File body without download link
+ */
+export const WithoutDownloadLink = Template.bind({});
+WithoutDownloadLink.args = {
+    showDownloadLink: false,
+};
+
+/**
+ * Encrypted file that hasn't been decrypted yet - shows decrypt button
+ */
+export const EncryptedNotDecrypted = Template.bind({});
+EncryptedNotDecrypted.args = {
+    isEncrypted: true,
+    isDecrypted: false,
+};
+
+/**
+ * Encrypted file that has been decrypted - shows iframe for download
+ */
+export const EncryptedDecrypted = Template.bind({});
+EncryptedDecrypted.args = {
+    isEncrypted: true,
+    isDecrypted: true,
+    iframeSrc: "usercontent/",
+};
+
+/**
+ * File body in export mode with a direct link
+ */
+export const ExportMode = Template.bind({});
+ExportMode.args = {
+    forExport: true,
+    exportUrl: "mxc://server/file123",
+};
+
+/**
+ * File body with an error message
+ */
+export const WithError = Template.bind({});
+WithError.args = {
+    error: "Invalid file",
+};
+
+/**
+ * Large file name that will be truncated
+ */
+export const LongFilename = Template.bind({});
+LongFilename.args = {
+    fileInfo: {
+        filename: "This is a very long filename that should be truncated when displayed.pdf",
+        tooltip: "This is a very long filename that should be truncated when displayed.pdf",
+        mimeType: "application/pdf",
+    },
+};
+
+/**
+ * Different file types
+ */
+export const ImageFile = Template.bind({});
+ImageFile.args = {
+    fileInfo: {
+        filename: "photo.jpg",
+        tooltip: "photo.jpg (2.3 MB)",
+        mimeType: "image/jpeg",
+    },
+};
+
+export const VideoFile = Template.bind({});
+VideoFile.args = {
+    fileInfo: {
+        filename: "video.mp4",
+        tooltip: "video.mp4 (45 MB)",
+        mimeType: "video/mp4",
+    },
+};
+
+export const AudioFile = Template.bind({});
+AudioFile.args = {
+    fileInfo: {
+        filename: "song.mp3",
+        tooltip: "song.mp3 (5.2 MB)",
+        mimeType: "audio/mpeg",
+    },
+};
diff --git a/packages/shared-components/src/event-tiles/FileBody/FileBody.test.tsx b/packages/shared-components/src/event-tiles/FileBody/FileBody.test.tsx
new file mode 100644
index 00000000000..ea81faa5152
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/FileBody.test.tsx
@@ -0,0 +1,192 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { createRef } from "react";
+import { render } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { FileBody, type FileBodyViewSnapshot, type FileBodyActions } from "./FileBody";
+import { MockViewModel } from "../../viewmodel/MockViewModel";
+
+describe("FileBody", () => {
+    const defaultFileInfo = {
+        filename: "test-file.pdf",
+        tooltip: "test-file.pdf",
+        mimeType: "application/pdf",
+    };
+
+    const defaultSnapshot: FileBodyViewSnapshot = {
+        fileInfo: defaultFileInfo,
+        downloadLabel: "Download",
+        showGenericPlaceholder: true,
+        showDownloadLink: true,
+        isEncrypted: false,
+        isDecrypted: false,
+        forExport: false,
+    };
+
+    function createViewModel(snapshot: FileBodyViewSnapshot, actions: FileBodyActions = {}) {
+        const vm = new MockViewModel(snapshot);
+        return Object.assign(vm, actions);
+    }
+
+    it("renders with placeholder and download button for unencrypted file", () => {
+        const onDownloadClick = jest.fn();
+        const vm = createViewModel(defaultSnapshot, { onDownloadClick });
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.textContent).toContain("test-file.pdf");
+        expect(container.querySelector(".mx_MFileBody_download")).toBeTruthy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders without placeholder when showGenericPlaceholder is false", () => {
+        const vm = createViewModel({ ...defaultSnapshot, showGenericPlaceholder: false });
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.querySelector(".mx_MFileBody_info")).toBeFalsy();
+        expect(container.querySelector(".mx_MFileBody_download")).toBeTruthy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders without download link when showDownloadLink is false", () => {
+        const vm = createViewModel({ ...defaultSnapshot, showDownloadLink: false });
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.textContent).toContain("test-file.pdf");
+        expect(container.querySelector(".mx_MFileBody_download")).toBeFalsy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("calls onPlaceholderClick when placeholder is clicked", async () => {
+        const user = userEvent.setup();
+        const onPlaceholderClick = jest.fn();
+        const vm = createViewModel(defaultSnapshot, { onPlaceholderClick });
+        const { container } = render(<FileBody vm={vm} />);
+
+        const placeholder = container.querySelector(".mx_MFileBody_info");
+        await user.click(placeholder!);
+        expect(onPlaceholderClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onDownloadClick when download button is clicked for unencrypted file", async () => {
+        const user = userEvent.setup();
+        const onDownloadClick = jest.fn((e: React.MouseEvent) => e.preventDefault());
+        const vm = createViewModel(defaultSnapshot, { onDownloadClick });
+        const { container } = render(<FileBody vm={vm} />);
+
+        const downloadLink = container.querySelector(".mx_MFileBody_download a");
+        await user.click(downloadLink!);
+        expect(onDownloadClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders decrypt button for encrypted file that hasn't been decrypted", () => {
+        const onDecryptClick = jest.fn();
+        const vm = createViewModel(
+            {
+                ...defaultSnapshot,
+                isEncrypted: true,
+                isDecrypted: false,
+            },
+            { onDecryptClick },
+        );
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.querySelector(".mx_MFileBody_download button")).toBeTruthy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("calls onDecryptClick when decrypt button is clicked", async () => {
+        const user = userEvent.setup();
+        const onDecryptClick = jest.fn();
+        const vm = createViewModel(
+            {
+                ...defaultSnapshot,
+                isEncrypted: true,
+                isDecrypted: false,
+            },
+            { onDecryptClick },
+        );
+        const { container } = render(<FileBody vm={vm} />);
+
+        const downloadBtn = container.querySelector(".mx_MFileBody_download button");
+        await user.click(downloadBtn!);
+        expect(onDecryptClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders iframe for encrypted file that has been decrypted", () => {
+        const iframeRef = createRef<HTMLIFrameElement>();
+        const dummyLinkRef = createRef<HTMLAnchorElement>();
+        const onIframeLoad = jest.fn();
+        const vm = createViewModel(
+            {
+                ...defaultSnapshot,
+                isEncrypted: true,
+                isDecrypted: true,
+                iframeSrc: "usercontent/",
+                iframeRef,
+                dummyLinkRef,
+            },
+            { onIframeLoad },
+        );
+        const { container } = render(<FileBody vm={vm} />);
+
+        const iframe = container.querySelector("iframe");
+        expect(iframe).toBeTruthy();
+        expect(iframe?.getAttribute("src")).toBe("usercontent/");
+        expect(iframe?.getAttribute("sandbox")).toBe("allow-scripts allow-downloads");
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders export mode with link", () => {
+        const vm = createViewModel({
+            ...defaultSnapshot,
+            forExport: true,
+            exportUrl: "mxc://server/file",
+        });
+        const { container } = render(<FileBody vm={vm} />);
+
+        const link = container.querySelector("a");
+        expect(link?.getAttribute("href")).toBe("mxc://server/file");
+        expect(link?.textContent).toContain("test-file.pdf");
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders error message", () => {
+        const vm = createViewModel({
+            ...defaultSnapshot,
+            error: "Invalid file",
+        });
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.textContent).toContain("test-file.pdf");
+        expect(container.textContent).toContain("Invalid file");
+        expect(container.querySelector(".mx_MFileBody_download")).toBeFalsy();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("applies custom className", () => {
+        const vm = createViewModel({
+            ...defaultSnapshot,
+            className: "custom-class",
+        });
+        const { container } = render(<FileBody vm={vm} />);
+
+        expect(container.querySelector(".custom-class")).toBeTruthy();
+    });
+
+    it("shows tooltip on filename", () => {
+        const vm = createViewModel({
+            ...defaultSnapshot,
+            fileInfo: { ...defaultFileInfo, tooltip: "Full filename with path" },
+        });
+        const { container } = render(<FileBody vm={vm} />);
+
+        const filenameElement = container.querySelector(".mx_MFileBody_info_filename");
+        expect(filenameElement?.getAttribute("title")).toBe("Full filename with path");
+    });
+});
diff --git a/packages/shared-components/src/event-tiles/FileBody/FileBody.tsx b/packages/shared-components/src/event-tiles/FileBody/FileBody.tsx
new file mode 100644
index 00000000000..679c9ac485c
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/FileBody.tsx
@@ -0,0 +1,190 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { Button } from "@vector-im/compound-web";
+import { DownloadIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+
+import styles from "./FileBody.module.css";
+import { type ViewModel } from "../../viewmodel/ViewModel";
+import { useViewModel } from "../../useViewModel";
+
+export interface FileInfo {
+    /** The filename to display */
+    filename: string;
+    /** The tooltip text for the file */
+    tooltip: string;
+    /** MIME type of the file */
+    mimeType?: string;
+}
+
+/**
+ * Snapshot of the FileBody view state
+ */
+export interface FileBodyViewSnapshot {
+    /** Information about the file to display */
+    fileInfo: FileInfo;
+    /** The text to display on the download button */
+    downloadLabel: string;
+    /** Whether to show the generic file placeholder */
+    showGenericPlaceholder: boolean;
+    /** Whether to show the download link */
+    showDownloadLink: boolean;
+    /** Whether the file is encrypted */
+    isEncrypted: boolean;
+    /** Whether an encrypted file has been decrypted */
+    isDecrypted: boolean;
+    /** Whether this is for export mode */
+    forExport: boolean;
+    /** The URL for export mode links */
+    exportUrl?: string;
+    /** Error message to display instead of file content */
+    error?: string;
+    /** The iframe src URL for encrypted downloads */
+    iframeSrc?: string;
+    /** Ref for the iframe element */
+    iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+    /** Ref for the dummy download link (for styling encrypted downloads) */
+    dummyLinkRef?: React.RefObject<HTMLAnchorElement | null>;
+    /** Additional className for the root element */
+    className?: string;
+}
+
+/**
+ * Actions that can be performed on the FileBody
+ */
+export interface FileBodyActions {
+    /** Called when the placeholder is clicked */
+    onPlaceholderClick?: () => void;
+    /** Called when the download button is clicked (for unencrypted files) */
+    onDownloadClick?: (e: React.MouseEvent) => void;
+    /** Called when the decrypt button is clicked */
+    onDecryptClick?: (e: React.MouseEvent) => void;
+    /** Called when iframe loads (for encrypted, decrypted files) */
+    onIframeLoad?: () => void;
+}
+
+/**
+ * ViewModel type for FileBody component
+ */
+export type FileBodyViewModel = ViewModel<FileBodyViewSnapshot> & FileBodyActions;
+
+export interface FileBodyProps {
+    vm: FileBodyViewModel;
+}
+
+/**
+ * FileBody is a presentational component for displaying file attachments.
+ * It handles the UI for encrypted/unencrypted files, download buttons, and placeholders.
+ */
+export function FileBody({ vm }: FileBodyProps): JSX.Element {
+    const {
+        fileInfo,
+        downloadLabel,
+        showGenericPlaceholder,
+        showDownloadLink,
+        isEncrypted,
+        isDecrypted,
+        forExport,
+        exportUrl,
+        error,
+        iframeSrc,
+        iframeRef,
+        dummyLinkRef,
+        className,
+    } = useViewModel(vm);
+
+    const renderPlaceholder = (): React.ReactNode => {
+        return (
+            <button
+                type="button"
+                className={classNames("mx_MediaBody", styles.info, "mx_MFileBody_info")}
+                onClick={vm.onPlaceholderClick}
+            >
+                <span className={classNames(styles.infoIcon, "mx_MFileBody_info_icon")} />
+                <span
+                    className={classNames(styles.infoFilename, "mx_MFileBody_info_filename")}
+                    title={fileInfo.tooltip}
+                >
+                    {fileInfo.filename}
+                </span>
+            </button>
+        );
+    };
+
+    const renderDownloadButton = (): React.ReactNode => {
+        // For encrypted files that haven't been decrypted yet
+        if (isEncrypted && !isDecrypted) {
+            return (
+                <div className={classNames(styles.download, "mx_MFileBody_download")}>
+                    <Button size="sm" kind="secondary" Icon={DownloadIcon} onClick={vm.onDecryptClick}>
+                        {downloadLabel}
+                    </Button>
+                </div>
+            );
+        }
+
+        // For encrypted files that have been decrypted (with iframe)
+        if (isEncrypted && isDecrypted) {
+            return (
+                <div className={classNames(styles.download, "mx_MFileBody_download")}>
+                    <div aria-hidden style={{ display: "none" }}>
+                        {/* Dummy copy of the button for style calculation */}
+                        <Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" ref={dummyLinkRef} />
+                    </div>
+                    <iframe
+                        aria-hidden
+                        title={fileInfo.filename}
+                        src={iframeSrc}
+                        onLoad={vm.onIframeLoad}
+                        ref={iframeRef}
+                        sandbox="allow-scripts allow-downloads"
+                    />
+                </div>
+            );
+        }
+
+        // For unencrypted files
+        return (
+            <div className={classNames(styles.download, "mx_MFileBody_download")}>
+                <Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" onClick={vm.onDownloadClick}>
+                    {downloadLabel}
+                </Button>
+            </div>
+        );
+    };
+
+    const placeholder = showGenericPlaceholder ? renderPlaceholder() : null;
+
+    // Export mode
+    if (forExport && exportUrl) {
+        return (
+            <span className={classNames(styles.root, "mx_MFileBody", className)}>
+                <a href={exportUrl}>{placeholder}</a>
+            </span>
+        );
+    }
+
+    // Error state
+    if (error) {
+        return (
+            <span className={classNames(styles.root, "mx_MFileBody", className)}>
+                {placeholder}
+                <span>{error}</span>
+            </span>
+        );
+    }
+
+    // Normal display
+    return (
+        <span className={classNames(styles.root, "mx_MFileBody", className)}>
+            {placeholder}
+            {showDownloadLink && renderDownloadButton()}
+        </span>
+    );
+}
diff --git a/packages/shared-components/src/event-tiles/FileBody/__snapshots__/FileBody.test.tsx.snap b/packages/shared-components/src/event-tiles/FileBody/__snapshots__/FileBody.test.tsx.snap
new file mode 100644
index 00000000000..dee95066b40
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/__snapshots__/FileBody.test.tsx.snap
@@ -0,0 +1,265 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`FileBody renders decrypt button for encrypted file that hasn't been decrypted 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <button
+      class="mx_MediaBody info mx_MFileBody_info"
+      type="button"
+    >
+      <span
+        class="infoIcon mx_MFileBody_info_icon"
+      />
+      <span
+        class="infoFilename mx_MFileBody_info_filename"
+        title="test-file.pdf"
+      >
+        test-file.pdf
+      </span>
+    </button>
+    <div
+      class="download mx_MFileBody_download"
+    >
+      <button
+        class="_button_vczzf_8 _has-icon_vczzf_57"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+          />
+        </svg>
+        Download
+      </button>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders error message 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <button
+      class="mx_MediaBody info mx_MFileBody_info"
+      type="button"
+    >
+      <span
+        class="infoIcon mx_MFileBody_info_icon"
+      />
+      <span
+        class="infoFilename mx_MFileBody_info_filename"
+        title="test-file.pdf"
+      >
+        test-file.pdf
+      </span>
+    </button>
+    <span>
+      Invalid file
+    </span>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders export mode with link 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <a
+      href="mxc://server/file"
+    >
+      <button
+        class="mx_MediaBody info mx_MFileBody_info"
+        type="button"
+      >
+        <span
+          class="infoIcon mx_MFileBody_info_icon"
+        />
+        <span
+          class="infoFilename mx_MFileBody_info_filename"
+          title="test-file.pdf"
+        >
+          test-file.pdf
+        </span>
+      </button>
+    </a>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders iframe for encrypted file that has been decrypted 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <button
+      class="mx_MediaBody info mx_MFileBody_info"
+      type="button"
+    >
+      <span
+        class="infoIcon mx_MFileBody_info_icon"
+      />
+      <span
+        class="infoFilename mx_MFileBody_info_filename"
+        title="test-file.pdf"
+      >
+        test-file.pdf
+      </span>
+    </button>
+    <div
+      class="download mx_MFileBody_download"
+    >
+      <div
+        aria-hidden="true"
+        style="display: none;"
+      >
+        <a
+          class="_button_vczzf_8 _has-icon_vczzf_57"
+          data-kind="secondary"
+          data-size="sm"
+          role="link"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+            />
+          </svg>
+        </a>
+      </div>
+      <iframe
+        aria-hidden="true"
+        sandbox="allow-scripts allow-downloads"
+        src="usercontent/"
+        title="test-file.pdf"
+      />
+    </div>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders with placeholder and download button for unencrypted file 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <button
+      class="mx_MediaBody info mx_MFileBody_info"
+      type="button"
+    >
+      <span
+        class="infoIcon mx_MFileBody_info_icon"
+      />
+      <span
+        class="infoFilename mx_MFileBody_info_filename"
+        title="test-file.pdf"
+      >
+        test-file.pdf
+      </span>
+    </button>
+    <div
+      class="download mx_MFileBody_download"
+    >
+      <a
+        class="_button_vczzf_8 _has-icon_vczzf_57"
+        data-kind="secondary"
+        data-size="sm"
+        role="link"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+          />
+        </svg>
+        Download
+      </a>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders without download link when showDownloadLink is false 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <button
+      class="mx_MediaBody info mx_MFileBody_info"
+      type="button"
+    >
+      <span
+        class="infoIcon mx_MFileBody_info_icon"
+      />
+      <span
+        class="infoFilename mx_MFileBody_info_filename"
+        title="test-file.pdf"
+      >
+        test-file.pdf
+      </span>
+    </button>
+  </span>
+</div>
+`;
+
+exports[`FileBody renders without placeholder when showGenericPlaceholder is false 1`] = `
+<div>
+  <span
+    class="root mx_MFileBody"
+  >
+    <div
+      class="download mx_MFileBody_download"
+    >
+      <a
+        class="_button_vczzf_8 _has-icon_vczzf_57"
+        data-kind="secondary"
+        data-size="sm"
+        role="link"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+          />
+        </svg>
+        Download
+      </a>
+    </div>
+  </span>
+</div>
+`;
diff --git a/packages/shared-components/src/event-tiles/FileBody/index.tsx b/packages/shared-components/src/event-tiles/FileBody/index.tsx
new file mode 100644
index 00000000000..fef3ba14161
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/FileBody/index.tsx
@@ -0,0 +1,15 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export {
+    FileBody,
+    type FileBodyProps,
+    type FileInfo,
+    type FileBodyViewSnapshot,
+    type FileBodyActions,
+    type FileBodyViewModel,
+} from "./FileBody";
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index 68935afd3fc..0857b1d1e00 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -11,6 +11,7 @@ export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
+export * from "./event-tiles/FileBody";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";
 export * from "./pill-input/Pill";
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 1c55385d2ca..eb7df5630fa 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -1,333 +1,41 @@
 /*
 Copyright 2024 New Vector Ltd.
-Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type AllHTMLAttributes, createRef } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
-import { type MediaEventContent } from "matrix-js-sdk/src/types";
-import { Button } from "@vector-im/compound-web";
-import { DownloadIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import React, { useContext, useMemo } from "react";
+import { FileBody as SharedFileBody } from "@element-hq/web-shared-components";
 
-import { _t } from "../../../languageHandler";
-import Modal from "../../../Modal";
-import AccessibleButton from "../elements/AccessibleButton";
-import { mediaFromContent } from "../../../customisations/Media";
-import ErrorDialog from "../dialogs/ErrorDialog";
-import { downloadLabelForFile, presentableTextForFile } from "../../../utils/FileUtils";
 import { type IBodyProps } from "./IBodyProps";
-import { FileDownloader } from "../../../utils/FileDownloader";
-import TextWithTooltip from "../elements/TextWithTooltip";
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-
-export let DOWNLOAD_ICON_URL: string; // cached copy of the download.svg asset for the sandboxed iframe later on
-
-async function cacheDownloadIcon(): Promise<void> {
-    if (DOWNLOAD_ICON_URL) return; // cached already
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const svg = await fetch(require("@vector-im/compound-design-tokens/icons/download.svg").default).then((r) =>
-        r.text(),
-    );
-    DOWNLOAD_ICON_URL = "data:image/svg+xml;base64," + window.btoa(svg);
-}
-
-// Cache the asset immediately
-// noinspection JSIgnoredPromiseFromCall
-cacheDownloadIcon();
-
-// User supplied content can contain scripts, we have to be careful that
-// we don't accidentally run those script within the same origin as the
-// client. Otherwise those scripts written by remote users can read
-// the access token and end-to-end keys that are in local storage.
-//
-// For attachments downloaded directly from the homeserver we can use
-// Content-Security-Policy headers to disable script execution.
-//
-// But attachments with end-to-end encryption are more difficult to handle.
-// We need to decrypt the attachment on the client and then display it.
-// To display the attachment we need to turn the decrypted bytes into a URL.
-//
-// There are two ways to turn bytes into URLs, data URL and blob URLs.
-// Data URLs aren't suitable for downloading a file because Chrome has a
-// 2MB limit on the size of URLs that can be viewed in the browser or
-// downloaded. This limit does not seem to apply when the url is used as
-// the source attribute of an image tag.
-//
-// Blob URLs are generated using window.URL.createObjectURL and unfortunately
-// for our purposes they inherit the origin of the page that created them.
-// This means that any scripts that run when the URL is viewed will be able
-// to access local storage.
-//
-// The easiest solution is to host the code that generates the blob URL on
-// a different domain to the client.
-// Another possibility is to generate the blob URL within a sandboxed iframe.
-// The downside of using a second domain is that it complicates hosting,
-// the downside of using a sandboxed iframe is that the browers are overly
-// restrictive in what you are allowed to do with the generated URL.
-
-/**
- * Get the current CSS style for a DOMElement.
- * @param {HTMLElement} element The element to get the current style of.
- * @return {string} The CSS style encoded as a string.
- */
-export function computedStyle(element: HTMLElement | null): string {
-    if (!element) {
-        return "";
-    }
-    const style = window.getComputedStyle(element, null);
-    let cssText = style.cssText;
-    // noinspection EqualityComparisonWithCoercionJS
-    if (cssText == "") {
-        // Firefox doesn't implement ".cssText" for computed styles.
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=137687
-        for (const rule of style) {
-            cssText += rule + ":";
-            cssText += style.getPropertyValue(rule) + ";";
-        }
-    }
-    return cssText;
-}
+import RoomContext from "../../../contexts/RoomContext";
+import { MFileBodyViewModel } from "../../../viewmodels/messages/MFileBodyViewModel";
 
 interface IProps extends IBodyProps {
     /* whether or not to show the default placeholder for the file. Defaults to true. */
     showGenericPlaceholder?: boolean;
 }
 
-interface IState {
-    decryptedBlob?: Blob;
-}
-
-export default class MFileBody extends React.Component<IProps, IState> {
-    public static contextType = RoomContext;
-    declare public context: React.ContextType<typeof RoomContext>;
-
-    public state: IState = {};
-    private iframe = createRef<HTMLIFrameElement>();
-    private dummyLink = createRef<HTMLAnchorElement>();
-    private userDidClick = false;
-    private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);
-
-    private getContentUrl(): string | null {
-        if (this.props.forExport) return null;
-        const media = mediaFromContent(this.props.mxEvent.getContent());
-        return media.srcHttp;
-    }
-    private get content(): MediaEventContent {
-        return this.props.mxEvent.getContent<MediaEventContent>();
-    }
-
-    private get fileName(): string {
-        return this.props.mediaEventHelper?.fileName || _t("common|attachment");
-    }
-
-    private get linkText(): string {
-        return downloadLabelForFile(this.content, true);
-    }
+/**
+ * MFileBody component that wraps the shared FileBody with a ViewModel.
+ * This component creates and manages the MFileBodyViewModel instance.
+ */
+export default function MFileBody(props: IProps): React.ReactElement {
+    const context = useContext(RoomContext);
 
-    private downloadFile(fileName: string, text: string): void {
-        if (!this.state.decryptedBlob) return;
-        this.fileDownloader.download({
-            blob: this.state.decryptedBlob,
-            name: fileName,
-            autoDownload: this.userDidClick,
-            opts: {
-                imgSrc: DOWNLOAD_ICON_URL,
-                imgStyle: null,
-                style: computedStyle(this.dummyLink.current),
-                textContent: text,
-            },
+    const viewModel = useMemo(() => {
+        return new MFileBodyViewModel({
+            ...props,
+            timelineRenderingType: context.timelineRenderingType,
         });
-    }
-
-    private decryptFile = async (): Promise<void> => {
-        if (this.state.decryptedBlob) {
-            return;
-        }
-        try {
-            this.userDidClick = true;
-            this.setState({
-                decryptedBlob: await this.props.mediaEventHelper!.sourceBlob.value,
-            });
-        } catch (err) {
-            logger.warn("Unable to decrypt attachment: ", err);
-            Modal.createDialog(ErrorDialog, {
-                title: _t("common|error"),
-                description: _t("timeline|m.file|error_decrypting"),
-            });
-        }
-    };
-
-    private onPlaceholderClick = async (): Promise<void> => {
-        const mediaHelper = this.props.mediaEventHelper;
-        if (mediaHelper?.media.isEncrypted) {
-            await this.decryptFile();
-            this.downloadFile(this.fileName, this.linkText);
-        } else {
-            // As a button we're missing the `download` attribute for styling reasons, so
-            // download with the file downloader.
-            this.fileDownloader.download({
-                blob: await mediaHelper!.sourceBlob.value,
-                name: this.fileName,
-            });
-        }
-    };
-
-    public render(): React.ReactNode {
-        const isEncrypted = this.props.mediaEventHelper?.media.isEncrypted;
-        const contentUrl = this.getContentUrl();
-        const fileType = this.content.info?.mimetype ?? "application/octet-stream";
-        // defaultProps breaks types on IBodyProps, so instead define the default here.
-        const showGenericPlaceholder = this.props.showGenericPlaceholder ?? true;
-
-        let showDownloadLink =
-            !showGenericPlaceholder ||
-            (this.context.timelineRenderingType !== TimelineRenderingType.Room &&
-                this.context.timelineRenderingType !== TimelineRenderingType.Search &&
-                this.context.timelineRenderingType !== TimelineRenderingType.Pinned);
-
-        let placeholder: React.ReactNode = null;
-        if (showGenericPlaceholder) {
-            placeholder = (
-                <AccessibleButton className="mx_MediaBody mx_MFileBody_info" onClick={this.onPlaceholderClick}>
-                    <span className="mx_MFileBody_info_icon" />
-                    <TextWithTooltip tooltip={presentableTextForFile(this.content, _t("common|attachment"), true)}>
-                        <span className="mx_MFileBody_info_filename">
-                            {presentableTextForFile(this.content, _t("common|attachment"), true, true)}
-                        </span>
-                    </TextWithTooltip>
-                </AccessibleButton>
-            );
-            showDownloadLink = false;
-        }
-
-        if (this.props.forExport) {
-            const content = this.props.mxEvent.getContent();
-            // During export, the content url will point to the MSC, which will later point to a local url
-            return (
-                <span className="mx_MFileBody">
-                    <a href={content.file?.url || content.url}>{placeholder}</a>
-                </span>
-            );
-        }
-
-        if (this.context.timelineRenderingType === TimelineRenderingType.Thread) {
-            showDownloadLink = false;
-        }
-
-        if (isEncrypted) {
-            if (!this.state.decryptedBlob) {
-                // Need to decrypt the attachment
-                // Wait for the user to click on the link before downloading
-                // and decrypting the attachment.
-
-                // This button should actually Download because usercontent/ will try to click itself
-                // but it is not guaranteed between various browsers' settings.
-                return (
-                    <span className="mx_MFileBody">
-                        {placeholder}
-                        {showDownloadLink && (
-                            <div className="mx_MFileBody_download">
-                                <Button size="sm" kind="secondary" Icon={DownloadIcon} onClick={this.decryptFile}>
-                                    {this.linkText}
-                                </Button>
-                            </div>
-                        )}
-                    </span>
-                );
-            }
-
-            const url = "usercontent/"; // XXX: this path should probably be passed from the skin
-
-            // If the attachment is encrypted then put the link inside an iframe.
-            return (
-                <span className="mx_MFileBody">
-                    {placeholder}
-                    {showDownloadLink && (
-                        <div className="mx_MFileBody_download">
-                            <div aria-hidden style={{ display: "none" }}>
-                                {/*
-                                 * Add dummy copy of the button
-                                 * We'll use it to learn how the download button
-                                 * would have been styled if it was rendered inline.
-                                 */}
-                                {/* this violates multiple eslint rules
-                            so ignore it completely */}
-                                <Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" ref={this.dummyLink} />
-                            </div>
-                            {/*
-                            TODO: Move iframe (and dummy link) into FileDownloader.
-                            We currently have it set up this way because of styles applied to the iframe
-                            itself which cannot be easily handled/overridden by the FileDownloader. In
-                            future, the download link may disappear entirely at which point it could also
-                            be suitable to just remove this bit of code.
-                         */}
-                            <iframe
-                                aria-hidden
-                                title={presentableTextForFile(this.content, _t("common|attachment"), true, true)}
-                                src={url}
-                                onLoad={() => this.downloadFile(this.fileName, this.linkText)}
-                                ref={this.iframe}
-                                sandbox="allow-scripts allow-downloads"
-                            />
-                        </div>
-                    )}
-                </span>
-            );
-        } else if (contentUrl) {
-            const downloadProps: Pick<
-                AllHTMLAttributes<HTMLAnchorElement>,
-                "target" | "rel" | "href" | "onClick" | "download"
-            > = {
-                target: "_blank",
-                rel: "noreferrer noopener",
-
-                // We cannot rely on href+download to download media due to the authenticated media API as it relies
-                // on authentication via headers, so we'll have to download the file into memory and then download it.
-                onClick: (e) => {
-                    logger.log(`Downloading ${fileType} as blob (unencrypted)`);
-
-                    // Avoid letting the <a> do its thing
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    // Start a fetch for the download
-                    // Based upon https://stackoverflow.com/a/49500465
-                    this.props.mediaEventHelper?.sourceBlob.value.then((blob) => {
-                        const blobUrl = URL.createObjectURL(blob);
-
-                        // We have to create an anchor to download the file
-                        const tempAnchor = document.createElement("a");
-                        tempAnchor.download = this.fileName;
-                        tempAnchor.href = blobUrl;
-                        document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
-                        tempAnchor.click();
-                        tempAnchor.remove();
-                    });
-                },
-            };
-
-            return (
-                <span className="mx_MFileBody">
-                    {placeholder}
-                    {showDownloadLink && (
-                        <div className="mx_MFileBody_download">
-                            <Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" {...downloadProps}>
-                                {this.linkText}
-                            </Button>
-                        </div>
-                    )}
-                </span>
-            );
-        } else {
-            return (
-                <span className="mx_MFileBody">
-                    {placeholder}
-                    {_t("timeline|m.file|error_invalid")}
-                </span>
-            );
-        }
-    }
+    }, [
+        props.mxEvent,
+        props.forExport,
+        props.showGenericPlaceholder,
+        props.mediaEventHelper,
+        context.timelineRenderingType,
+    ]);
+
+    return <SharedFileBody vm={viewModel} />;
 }
diff --git a/src/utils/FileBodyUtils.ts b/src/utils/FileBodyUtils.ts
new file mode 100644
index 00000000000..871bed61a06
--- /dev/null
+++ b/src/utils/FileBodyUtils.ts
@@ -0,0 +1,44 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export let DOWNLOAD_ICON_URL: string; // cached copy of the download.svg asset for the sandboxed iframe later on
+
+export async function cacheDownloadIcon(): Promise<void> {
+    if (DOWNLOAD_ICON_URL) return; // cached already
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const svg = await fetch(require("@vector-im/compound-design-tokens/icons/download.svg").default).then((r) =>
+        r.text(),
+    );
+    DOWNLOAD_ICON_URL = "data:image/svg+xml;base64," + window.btoa(svg);
+}
+
+// Cache the asset immediately
+// noinspection JSIgnoredPromiseFromCall
+cacheDownloadIcon();
+
+/**
+ * Get the current CSS style for a DOMElement.
+ * @param {HTMLElement} element The element to get the current style of.
+ * @return {string} The CSS style encoded as a string.
+ */
+export function computedStyle(element: HTMLElement | null): string {
+    if (!element) {
+        return "";
+    }
+    const style = window.getComputedStyle(element, null);
+    let cssText = style.cssText;
+    // noinspection EqualityComparisonWithCoercionJS
+    if (cssText == "") {
+        // Firefox doesn't implement ".cssText" for computed styles.
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=137687
+        for (const rule of style) {
+            cssText += rule + ":";
+            cssText += style.getPropertyValue(rule) + ";";
+        }
+    }
+    return cssText;
+}
diff --git a/src/viewmodels/messages/MFileBodyViewModel.ts b/src/viewmodels/messages/MFileBodyViewModel.ts
new file mode 100644
index 00000000000..ba6b7c762cb
--- /dev/null
+++ b/src/viewmodels/messages/MFileBodyViewModel.ts
@@ -0,0 +1,240 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { type MediaEventContent } from "matrix-js-sdk/src/types";
+import {
+    BaseViewModel,
+    type FileBodyViewSnapshot,
+    type FileBodyActions,
+    type FileInfo,
+} from "@element-hq/web-shared-components";
+import { createRef } from "react";
+
+import { _t } from "../../languageHandler";
+import Modal from "../../Modal";
+import { mediaFromContent } from "../../customisations/Media";
+import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
+import { downloadLabelForFile, presentableTextForFile } from "../../utils/FileUtils";
+import { type IBodyProps } from "../../components/views/messages/IBodyProps";
+import { FileDownloader } from "../../utils/FileDownloader";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
+import { computedStyle, DOWNLOAD_ICON_URL } from "../../utils/FileBodyUtils";
+
+export interface MFileBodyViewModelProps extends IBodyProps {
+    /* whether or not to show the default placeholder for the file. Defaults to true. */
+    showGenericPlaceholder?: boolean;
+    timelineRenderingType?: TimelineRenderingType;
+}
+
+export class MFileBodyViewModel
+    extends BaseViewModel<FileBodyViewSnapshot, MFileBodyViewModelProps>
+    implements FileBodyActions
+{
+    private iframe = createRef<HTMLIFrameElement>();
+    private dummyLink = createRef<HTMLAnchorElement>();
+    private userDidClick = false;
+    private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);
+    private decryptedBlob?: Blob;
+
+    public constructor(props: MFileBodyViewModelProps) {
+        const snapshot = MFileBodyViewModel.createInitialSnapshot(props);
+        super(props, snapshot);
+    }
+
+    private static createInitialSnapshot(props: MFileBodyViewModelProps): FileBodyViewSnapshot {
+        const content = props.mxEvent.getContent<MediaEventContent>();
+        const isEncrypted = props.mediaEventHelper?.media.isEncrypted;
+        const contentUrl = MFileBodyViewModel.getContentUrl(props);
+        const fileType = content.info?.mimetype ?? "application/octet-stream";
+        const showGenericPlaceholder = props.showGenericPlaceholder ?? true;
+
+        let showDownloadLink =
+            !showGenericPlaceholder ||
+            (props.timelineRenderingType !== TimelineRenderingType.Room &&
+                props.timelineRenderingType !== TimelineRenderingType.Search &&
+                props.timelineRenderingType !== TimelineRenderingType.Pinned);
+
+        if (props.timelineRenderingType === TimelineRenderingType.Thread) {
+            showDownloadLink = false;
+        }
+
+        const fileInfo: FileInfo = {
+            filename: presentableTextForFile(content, _t("common|attachment"), true, true),
+            tooltip: presentableTextForFile(content, _t("common|attachment"), true),
+            mimeType: fileType,
+        };
+
+        const downloadLabel = downloadLabelForFile(content, true);
+
+        // Export mode
+        if (props.forExport) {
+            return {
+                fileInfo,
+                downloadLabel,
+                showGenericPlaceholder,
+                showDownloadLink,
+                isEncrypted: false,
+                isDecrypted: false,
+                forExport: true,
+                exportUrl: content.file?.url || content.url,
+            };
+        }
+
+        // Error state
+        if (!isEncrypted && !contentUrl) {
+            return {
+                fileInfo,
+                downloadLabel,
+                showGenericPlaceholder,
+                showDownloadLink,
+                isEncrypted: false,
+                isDecrypted: false,
+                forExport: false,
+                error: _t("timeline|m.file|error_invalid"),
+            };
+        }
+
+        // Initial state for encrypted or unencrypted files
+        return {
+            fileInfo,
+            downloadLabel,
+            showGenericPlaceholder,
+            showDownloadLink,
+            isEncrypted: !!isEncrypted,
+            isDecrypted: false,
+            forExport: false,
+        };
+    }
+
+    private static getContentUrl(props: MFileBodyViewModelProps): string | null {
+        if (props.forExport) return null;
+        const media = mediaFromContent(props.mxEvent.getContent());
+        return media.srcHttp;
+    }
+
+    private get content(): MediaEventContent {
+        return this.props.mxEvent.getContent<MediaEventContent>();
+    }
+
+    private get fileName(): string {
+        return this.props.mediaEventHelper?.fileName || _t("common|attachment");
+    }
+
+    private get linkText(): string {
+        return downloadLabelForFile(this.content, true);
+    }
+
+    private downloadFile(fileName: string, text: string): void {
+        if (!this.decryptedBlob) return;
+        this.fileDownloader.download({
+            blob: this.decryptedBlob,
+            name: fileName,
+            autoDownload: this.userDidClick,
+            opts: {
+                imgSrc: DOWNLOAD_ICON_URL,
+                imgStyle: null,
+                style: computedStyle(this.dummyLink.current),
+                textContent: text,
+            },
+        });
+    }
+
+    private decryptFile = async (): Promise<void> => {
+        if (this.decryptedBlob) {
+            return;
+        }
+        try {
+            this.userDidClick = true;
+            this.decryptedBlob = await this.props.mediaEventHelper!.sourceBlob.value;
+
+            // Update snapshot to reflect decrypted state
+            this.snapshot.merge({
+                isDecrypted: true,
+                iframeSrc: "usercontent/",
+                iframeRef: this.iframe,
+                dummyLinkRef: this.dummyLink,
+            });
+        } catch (err) {
+            logger.warn("Unable to decrypt attachment: ", err);
+            Modal.createDialog(ErrorDialog, {
+                title: _t("common|error"),
+                description: _t("timeline|m.file|error_decrypting"),
+            });
+        }
+    };
+
+    public get onPlaceholderClick(): (() => void) | undefined {
+        return async () => {
+            const mediaHelper = this.props.mediaEventHelper;
+            if (mediaHelper?.media.isEncrypted) {
+                await this.decryptFile();
+                this.downloadFile(this.fileName, this.linkText);
+            } else {
+                // As a button we're missing the `download` attribute for styling reasons, so
+                // download with the file downloader.
+                this.fileDownloader.download({
+                    blob: await mediaHelper!.sourceBlob.value,
+                    name: this.fileName,
+                });
+            }
+        };
+    }
+
+    public get onDownloadClick(): ((e: React.MouseEvent) => void) | undefined {
+        const current = this.snapshot.current;
+        if (current.isEncrypted && !current.isDecrypted) {
+            return undefined;
+        }
+
+        return (e: React.MouseEvent) => {
+            logger.log(
+                `Downloading ${this.content.info?.mimetype ?? "application/octet-stream"} as blob (unencrypted)`,
+            );
+
+            // Avoid letting the <a> do its thing
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Start a fetch for the download
+            // Based upon https://stackoverflow.com/a/49500465
+            this.props.mediaEventHelper?.sourceBlob.value.then((blob) => {
+                const blobUrl = URL.createObjectURL(blob);
+
+                // We have to create an anchor to download the file
+                const tempAnchor = document.createElement("a");
+                tempAnchor.download = this.fileName;
+                tempAnchor.href = blobUrl;
+                document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
+                tempAnchor.click();
+                tempAnchor.remove();
+            });
+        };
+    }
+
+    public get onDecryptClick(): ((e: React.MouseEvent) => void) | undefined {
+        const current = this.snapshot.current;
+        if (!current.isEncrypted || current.isDecrypted) {
+            return undefined;
+        }
+
+        return async (e: React.MouseEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            await this.decryptFile();
+        };
+    }
+
+    public get onIframeLoad(): (() => void) | undefined {
+        const current = this.snapshot.current;
+        if (!current.isEncrypted || !current.isDecrypted) {
+            return undefined;
+        }
+
+        return () => this.downloadFile(this.fileName, this.linkText);
+    }
+}
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
index f14bbb08aa9..650618b968c 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
@@ -3,19 +3,17 @@
 exports[`<MFileBody/> should show a download button in file rendering type 1`] = `
 <div>
   <span
-    class="mx_MFileBody"
+    class="_root_crpne_8 mx_MFileBody"
   >
     <div
-      class="mx_MFileBody_download"
+      class="_download_crpne_17 mx_MFileBody_download"
     >
       <a
         class="_button_vczzf_8 _has-icon_vczzf_57"
         data-kind="secondary"
         data-size="sm"
-        rel="noreferrer noopener"
         role="link"
         tabindex="0"
-        target="_blank"
       >
         <svg
           aria-hidden="true"