PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* fix file size display from kB to KB

* add a wrapper function for filesize

---------

Co-authored-by: Neeraj <neerajv@thirdrocktechkno.com>
This commit is contained in:
Neeraj Vageele 2023-04-11 19:18:41 +05:30 committed by GitHub
parent 8a150252bf
commit ce0bd00c5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/UploadBar.tsx
View file

@ -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">

4
src/components/views/dialogs/UploadConfirmDialog.tsx
View file

@ -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>

10
src/components/views/dialogs/UploadFailureDialog.tsx
View file

@ -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>,

9
src/components/views/messages/MFileBody.tsx
View file

@ -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<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>

21
src/utils/FileUtils.ts
View file

@ -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);
}