Javascript human readable byte size function

March 31, 2020

Here is a small function which converts a bytes in to a readable format (B, KB, MB, GB, TB).

Function

const TB = 1000000000000;
const GB = 1000000000;
const MB = 1000000;
const KB = 1000;

function bytesReadable(byteSize, decimals) {
    let unit;
    let i;
    let remainder;

    // Get the whole number, and the remainder for the
    // decimals later on.
    if (byteSize > TB) {
        unit = "TB";
        i = Math.floor(byteSize / TB);
        remainder = byteSize - (i * TB);
    }else if (byteSize > GB) {
        unit = "GB";
        i = Math.floor(byteSize / GB);
        remainder = byteSize - (i * GB);
    }else if (byteSize > MB) {
        unit = "MB";
        i = Math.floor(byteSize / MB);
        remainder = byteSize - (i * MB);

    }else if (byteSize > KB){
        unit = "KB";
        i = Math.floor(byteSize / KB),
            remainder = byteSize - i * KB;
    }else{
        // Can't go smaller than bytes!
        return i.toString() + " " + unit;
    }

    if (decimals === 0){
        return i.toString() + " " + unit;
    }

    // Now we calculate the eventual missing leading
    // zeroes to pad up if needed.
    let width;
    if (remainder > GB){
        width = 12;
    }else if (remainder > MB){
        width = 9;
    }else if (remainder > KB){
        width = 6;
    }else{
        width = 3;
    }

    // Fill up leading zeroes if they are missing
    let remainderString = remainder.toString();

    for (let i = remainderString.length; i < width; i++){
        remainderString = "0" + remainderString;
    }

    // Check to prevent unwanted behaviour
    if (decimals > remainderString.length){
        decimals = remainderString.length;
    }

    return i.toString() + "." + remainderString.substr(0, decimals) + " " + unit;
}

Sample

console.log(bytesReadable(425005, 2));
console.log(bytesReadable(8741208, 2));
console.log(bytesReadable(114448910, 2));
console.log(bytesReadable(557891, 2));
console.log(bytesReadable(114710, 2));
console.log(bytesReadable(8933578, 2));
console.log(bytesReadable(5849684981, 2));
console.log(bytesReadable(12033687, 2));
console.log(bytesReadable(742289, 2));
console.log(bytesReadable(678007439, 2));

// Output
425.00 KB
  8.74 MB
114.44 MB
557.89 KB
114.71 KB
  8.93 MB
  5.84 GB
 12.03 MB
742.28 KB
678.00 MB

Read more →

Overload CSS `cursor: wait` page wide with jquery

December 4, 2018

Problem:

cursor wait demo on nested children

You probably want to tell users on your page to wait for something important that is happening in the background. Most likely performing asynchronous page calls, calculations, DOM manipulation etc...

But just like any CSS property, the nested elements override the parent's property. This is troublesome if you have a lot of buttons and custom cursors in your style.

Read more →