fix file size display from kB to KB (#10561)

* fix file size display from kB to KB

* add a wrapper function for filesize

---------

Co-authored-by: Neeraj <neerajv@thirdrocktechkno.com>

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<IProps, IState> {
             count: this.state.countFiles - 1,
         });
 
-        const uploadSize = filesize(this.state.currentTotal!);
+        const uploadSize = fileSize(this.state.currentTotal!);
         return (
             <div className="mx_UploadBar">
                 <div className="mx_UploadBar_filename">

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<IProps> {
                             {preview && <div>{preview}</div>}
                             <div id={fileId}>
                                 {placeholder}
-                                {this.props.file.name} ({filesize(this.props.file.size)})
+                                {this.props.file.name} ({fileSize(this.props.file.size)})
                             </div>
                         </div>
                     </div>

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<IProps> {
                 "This file is <b>too large</b> 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) => <b>{sub}</b>,
@@ -71,7 +71,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
             message = _t(
                 "These files are <b>too large</b> to upload. " + "The file size limit is %(limit)s.",
                 {
-                    limit: filesize(this.props.contentMessages.getUploadLimit()),
+                    limit: fileSize(this.props.contentMessages.getUploadLimit()),
                 },
                 {
                     b: (sub) => <b>{sub}</b>,
@@ -89,7 +89,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
             message = _t(
                 "Some files are <b>too large</b> to be uploaded. " + "The file size limit is %(limit)s.",
                 {
-                    limit: filesize(this.props.contentMessages.getUploadLimit()),
+                    limit: fileSize(this.props.contentMessages.getUploadLimit()),
                 },
                 {
                     b: (sub) => <b>{sub}</b>,

src/components/views/messages/MFileBody.tsx

@@ -15,15 +15,14 @@ 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";
 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<IProps, IState> {
     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<IProps, IState> {
             // 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<IProps, IState> {
                             </a>
                             {this.context.timelineRenderingType === TimelineRenderingType.File && (
                                 <div className="mx_MImageBody_size">
-                                    {this.content.info?.size ? filesize(this.content.info.size) : ""}
+                                    {this.content.info?.size ? fileSize(this.content.info.size) : ""}
                                 </div>
                             )}
                         </div>

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 += " (" + <string>filesize(content.info.size) + ")";
+        text += " (" + <string>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<typeof filesize>[0],
+    options?: Parameters<typeof filesize>[1],
+): ReturnType<typeof filesize> {
+    const defaultOption: Parameters<typeof filesize>[1] = { base: 2, standard: "jedec", ...options };
+    return filesize(size, defaultOption);
+}