Ensure consistent download file name on download from ImageView (#29913)

* Ensure consistent download file name on download from ImageView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ensure consistent download file name on download from ImageView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-05-12 09:24:48 +01:00
committed by GitHub
parent 54a00baff8
commit 308f892cef

View File

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, createRef, type CSSProperties, useRef, useState } from "react";
import React, { type JSX, createRef, type CSSProperties, useRef, useState, useMemo } from "react";
import FocusLock from "react-focus-lock";
import { type MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix";
@@ -33,6 +33,7 @@ import AccessibleButton from "./AccessibleButton";
import Modal from "../../../Modal";
import ErrorDialog from "../dialogs/ErrorDialog";
import { FileDownloader } from "../../../utils/FileDownloader";
import { MediaEventHelper } from "../../../utils/MediaEventHelper.ts";
// Max scale to keep gaps around the image
const MAX_SCALE = 0.95;
@@ -549,7 +550,7 @@ export default class ImageView extends React.Component<IProps, IState> {
title={_t("lightbox|rotate_right")}
onClick={this.onRotateClockwiseClick}
/>
<DownloadButton url={this.props.src} fileName={this.props.name} />
<DownloadButton url={this.props.src} fileName={this.props.name} mxEvent={this.props.mxEvent} />
{contextMenuButton}
<AccessibleButton
className="mx_ImageView_button mx_ImageView_button_close"
@@ -582,10 +583,19 @@ export default class ImageView extends React.Component<IProps, IState> {
}
}
function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
function DownloadButton({
url,
fileName,
mxEvent,
}: {
url: string;
fileName?: string;
mxEvent?: MatrixEvent;
}): JSX.Element {
const downloader = useRef(new FileDownloader()).current;
const [loading, setLoading] = useState(false);
const blobRef = useRef<Blob>(undefined);
const mediaEventHelper = useMemo(() => (mxEvent ? new MediaEventHelper(mxEvent) : undefined), [mxEvent]);
function showError(e: unknown): void {
Modal.createDialog(ErrorDialog, {
@@ -625,7 +635,7 @@ function DownloadButton({ url, fileName }: { url: string; fileName?: string }):
async function downloadBlob(blob: Blob): Promise<void> {
await downloader.download({
blob,
name: fileName ?? _t("common|image"),
name: mediaEventHelper?.fileName ?? fileName ?? _t("common|image"),
});
setLoading(false);
}