diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx index 4de4c4c804..ccf5fe6745 100644 --- a/src/components/views/messages/MFileBody.tsx +++ b/src/components/views/messages/MFileBody.tsx @@ -27,6 +27,7 @@ import { presentableTextForFile } from "../../../utils/FileUtils"; import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; import { IBodyProps } from "./IBodyProps"; import { FileDownloader } from "../../../utils/FileDownloader"; +import TextWithTooltip from "../elements/TextWithTooltip"; export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on @@ -202,9 +203,12 @@ export default class MFileBody extends React.Component { placeholder = ( - - { presentableTextForFile(content, _t("Attachment"), false) } - + + { presentableTextForFile(content, _t("Attachment"), true, true) } + ); } diff --git a/src/utils/FileUtils.ts b/src/utils/FileUtils.ts index 355fa2135c..c83f2ed417 100644 --- a/src/utils/FileUtils.ts +++ b/src/utils/FileUtils.ts @@ -26,12 +26,14 @@ import { _t } from '../languageHandler'; * @param {IMediaEventContent} content The "content" key of the matrix event. * @param {string} fallbackText The fallback text * @param {boolean} withSize Whether to include size information. Default true. + * @param {boolean} shortened Ensure the extension of the file name is visible. Default false. * @return {string} the human readable link text for the attachment. */ export function presentableTextForFile( content: IMediaEventContent, fallbackText = _t("Attachment"), withSize = true, + shortened = false, ): string { let text = fallbackText; if (content.body && content.body.length > 0) { @@ -40,6 +42,21 @@ export function presentableTextForFile( text = content.body; } + // We shorten to 15 characters somewhat arbitrarily, and assume most files + // will have a 3 character (plus full stop) extension. The goal is to knock + // the label down to 15-25 characters, not perfect accuracy. + if (shortened && text.length > 19) { + const parts = text.split('.'); + let fileName = parts.slice(0, parts.length - 1).join('.').substring(0, 15); + const extension = parts[parts.length - 1]; + + // Trim off any full stops from the file name to avoid a case where we + // add an ellipsis that looks really funky. + fileName = fileName.replace(/\.*$/g, ''); + + text = `${fileName}...${extension}`; + } + if (content.info && content.info.size && withSize) { // If we know the size of the file then add it as human readable // string to the end of the link text so that the user knows how