imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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>