How to Convert File Size to Readable Format in JavaScript

When dealing with files, it's generally beneficial to present the file size in a comprehensible format. By default, file sizes are given in bytes, which may confuse most users. To render the file size more readable, we can modify it into an easily digestible format like kilobytes or megabytes.

The `readableFileSize` Function

A method for transforming file size into an easily understandable format involves developing a function that accepts a numerical value as input, signifying the file size in bytes. This function subsequently alters the file size into kilobytes or megabytes, based on the file's dimensions. Ultimately, the function generates a textual depiction of the file size in either kilobytes or megabytes.

The following is the implementation of the readableFileSize function:

export function readableFileSize(attachmentSize) {
  const DEFAULT_SIZE = 0;
  const fileSize = attachmentSize ?? DEFAULT_SIZE;

  if (!fileSize) {
    return `${DEFAULT_SIZE} kb`;
  }

  const sizeInKb = fileSize / 1024;

  if (sizeInKb > 1024) {
    return `${(sizeInKb / 1024).toFixed(2)} mb`;
  } else {
    return `${sizeInKb.toFixed(2)} kb`;
  }
}

Now let's dissect the function's implementation and examine its inner workings.

Default Value

The function starts by assigning a default value to the file size. If the attachmentSize parameter is undefined, a default size of 0 bytes is used. This is achieved using the nullish coalescing operator (??), which returns the right-hand side operand if the left-hand side operand is null or undefined.

const DEFAULT_SIZE = 0;
const fileSize = attachmentSize ?? DEFAULT_SIZE;

Check for Empty Size

Next, the function examines whether the file size is 0 or undefined. If the file size is either 0 or undefined, the default size in kilobytes is returned.

if (!fileSize) {
  return `${DEFAULT_SIZE} kb`;
}

Convert to Kilobytes or Megabytes

Subsequently, the function adjusts the file size to kilobytes or megabytes, depending on the file's size. If the file size is less than or equal to 1024 kilobytes, the file size in kilobytes is returned. Alternatively, the file size is converted to megabytes and returned in that format.

const sizeInKb = fileSize / 1024;

if (sizeInKb > 1024) {
  return `${(sizeInKb / 1024).toFixed(2)} mb`;
} else {
  return `${sizeInKb.toFixed(2)} kb`;
}

To convert the file size to kilobytes, the function divides the file size by 1024. If the file size exceeds 1024 kilobytes (i.e., 1 megabyte or more), the file size is divided by 1024 again to convert it to megabytes. The toFixed method rounds the file size to two decimal places.

Usage Example

Here is a sample demonstrating the utilization of the readableFileSize function:

const fileSizeInBytes = 256640;
const fileSize = readableFileSize(fileSizeInBytes); // Output: "250.31 kb"

In this instance, the file size in bytes (256640) is passed to the readableFileSize function, which returns a string representation of the file size in kilobytes (250.31 kb).

Conclusion

The readableFileSize function is a straightforward yet practical utility function for converting file size into a more legible format. By displaying the file size in kilobytes or megabytes, users can more easily grasp the data quantity they're handling. This is particularly helpful when working with sizable files, where the file size in bytes can be difficult to comprehend.

How to Convert File Size to Readable Format in JavaScript ​

The readableFileSize Function ​

Default Value ​

Check for Empty Size ​

Convert to Kilobytes or Megabytes ​

Usage Example ​

Conclusion ​