diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index c87ad4754f..7b091410d2 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import { Room } from "matrix-js-sdk/src/models/room"; -import { filesize } from "filesize"; import { IEventRelation } from "matrix-js-sdk/src/matrix"; import { Optional } from "matrix-events-sdk"; @@ -29,6 +28,7 @@ import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButto import { RoomUpload } from "../../models/RoomUpload"; import { ActionPayload } from "../../dispatcher/payloads"; import { UploadPayload } from "../../dispatcher/payloads/UploadPayload"; +import { fileSize } from "../../utils/FileUtils"; interface IProps { room: Room; @@ -114,7 +114,7 @@ export default class UploadBar extends React.PureComponent { count: this.state.countFiles - 1, }); - const uploadSize = filesize(this.state.currentTotal!); + const uploadSize = fileSize(this.state.currentTotal!); return (
diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx index b57184af9f..a2203f30cb 100644 --- a/src/components/views/dialogs/UploadConfirmDialog.tsx +++ b/src/components/views/dialogs/UploadConfirmDialog.tsx @@ -16,13 +16,13 @@ limitations under the License. */ import React from "react"; -import { filesize } from "filesize"; import { Icon as FileIcon } from "../../../../res/img/feather-customised/files.svg"; import { _t } from "../../../languageHandler"; import { getBlobSafeMimeType } from "../../../utils/blobs"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; +import { fileSize } from "../../../utils/FileUtils"; interface IProps { file: File; @@ -116,7 +116,7 @@ export default class UploadConfirmDialog extends React.Component { {preview &&
{preview}
}
{placeholder} - {this.props.file.name} ({filesize(this.props.file.size)}) + {this.props.file.name} ({fileSize(this.props.file.size)})
diff --git a/src/components/views/dialogs/UploadFailureDialog.tsx b/src/components/views/dialogs/UploadFailureDialog.tsx index 2bec57dd0d..3e4860665d 100644 --- a/src/components/views/dialogs/UploadFailureDialog.tsx +++ b/src/components/views/dialogs/UploadFailureDialog.tsx @@ -14,13 +14,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { filesize } from "filesize"; import React from "react"; import { _t } from "../../../languageHandler"; import ContentMessages from "../../../ContentMessages"; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; +import { fileSize } from "../../../utils/FileUtils"; interface IProps { badFiles: File[]; @@ -52,8 +52,8 @@ export default class UploadFailureDialog extends React.Component { "This file is too large to upload. " + "The file size limit is %(limit)s but this file is %(sizeOfThisFile)s.", { - limit: filesize(this.props.contentMessages.getUploadLimit()), - sizeOfThisFile: filesize(this.props.badFiles[0].size), + limit: fileSize(this.props.contentMessages.getUploadLimit()), + sizeOfThisFile: fileSize(this.props.badFiles[0].size), }, { b: (sub) => {sub}, @@ -71,7 +71,7 @@ export default class UploadFailureDialog extends React.Component { message = _t( "These files are too large to upload. " + "The file size limit is %(limit)s.", { - limit: filesize(this.props.contentMessages.getUploadLimit()), + limit: fileSize(this.props.contentMessages.getUploadLimit()), }, { b: (sub) => {sub}, @@ -89,7 +89,7 @@ export default class UploadFailureDialog extends React.Component { message = _t( "Some files are too large to be uploaded. " + "The file size limit is %(limit)s.", { - limit: filesize(this.props.contentMessages.getUploadLimit()), + limit: fileSize(this.props.contentMessages.getUploadLimit()), }, { b: (sub) => {sub}, diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx index ae7a8d881d..4e85652217 100644 --- a/src/components/views/messages/MFileBody.tsx +++ b/src/components/views/messages/MFileBody.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import React, { AllHTMLAttributes, createRef } from "react"; -import { filesize } from "filesize"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; @@ -23,7 +22,7 @@ import Modal from "../../../Modal"; import AccessibleButton from "../elements/AccessibleButton"; import { mediaFromContent } from "../../../customisations/Media"; import ErrorDialog from "../dialogs/ErrorDialog"; -import { presentableTextForFile } from "../../../utils/FileUtils"; +import { fileSize, presentableTextForFile } from "../../../utils/FileUtils"; import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent"; import { IBodyProps } from "./IBodyProps"; import { FileDownloader } from "../../../utils/FileDownloader"; @@ -198,7 +197,7 @@ export default class MFileBody extends React.Component { public render(): React.ReactNode { const isEncrypted = this.props.mediaEventHelper?.media.isEncrypted; const contentUrl = this.getContentUrl(); - const fileSize = this.content.info ? this.content.info.size : null; + const contentFileSize = this.content.info ? this.content.info.size : null; const fileType = this.content.info ? this.content.info.mimetype : "application/octet-stream"; let placeholder: React.ReactNode = null; @@ -310,7 +309,7 @@ export default class MFileBody extends React.Component { // we won't try and convert it. Likewise, if the file size is unknown then we'll assume // it is too big. There is the risk of the reported file size and the actual file size // being different, however the user shouldn't normally run into this problem. - const fileTooBig = typeof fileSize === "number" ? fileSize > 524288000 : true; + const fileTooBig = typeof contentFileSize === "number" ? contentFileSize > 524288000 : true; if (["application/pdf"].includes(fileType) && !fileTooBig) { // We want to force a download on this type, so use an onClick handler. @@ -351,7 +350,7 @@ export default class MFileBody extends React.Component { {this.context.timelineRenderingType === TimelineRenderingType.File && (
- {this.content.info?.size ? filesize(this.content.info.size) : ""} + {this.content.info?.size ? fileSize(this.content.info.size) : ""}
)} diff --git a/src/utils/FileUtils.ts b/src/utils/FileUtils.ts index 456e7d9d05..537f25a765 100644 --- a/src/utils/FileUtils.ts +++ b/src/utils/FileUtils.ts @@ -69,7 +69,26 @@ export function presentableTextForFile( // it since it is "ugly", users generally aren't aware what it // means and the type of the attachment can usually be inferred // from the file extension. - text += " (" + filesize(content.info.size) + ")"; + text += " (" + fileSize(content.info.size, { base: 2, standard: "jedec" }) + ")"; } return text; } + +/** + * wrapper function to set default values for filesize function + * + * @param size size of file + * @param options options to customize the response type or size type conversion e.g. 12kB, 12KB + * @returns {string | number | any[] | { + * value: any; + * symbol: any; + * exponent: number; + * unit: string;}} formatted file size with unit e.g. 12kB, 12KB + */ +export function fileSize( + size: Parameters[0], + options?: Parameters[1], +): ReturnType { + const defaultOption: Parameters[1] = { base: 2, standard: "jedec", ...options }; + return filesize(size, defaultOption); +}