Correct way to convert size in bytes to KB MB GB in JavaScript

Question

I got this code to covert size in bytes via PHP   Now I want to convert those sizes to human readable sizes using JavaScript  I tried to convert this code to JavaScript  which looks like this   function formatSizeUnits bytes     if       bytes  gt   1073741824    bytes    bytes   1073741824  toFixed 2      GB       else if  bytes  gt   1048576       bytes    bytes   1048576  toFixed 2      MB       else if  bytes  gt   1024          bytes    bytes   1024  toFixed 2      KB       else if  bytes  gt  1              bytes   bytes     bytes       else if  bytes    1             bytes   bytes     byte       else                            bytes    0 bytes       return bytes      Is this the correct way of doing this  Is there an easier way

User · Answer

There are 2 real ways to represent sizes when related to bytes, they are SI units (10^3) or IEC units (2^10). There is also JEDEC but their method is ambiguous and confusing. I noticed the other examples have errors such as using KB instead of kB to represent a kilobyte so I decided to write a function that will solve each of these cases using the range of currently accepted units of measure.

There is a formatting bit at the end that will make the number look a bit better (at least to my eye) feel free to remove that formatting if it doesn't suit your purpose.

Enjoy.

// pBytes: the size in bytes to be converted.
// pUnits: 'si'|'iec' si units means the order of magnitude is 10^3, iec uses 2^10

function prettyNumber(pBytes, pUnits) {
    // Handle some special cases
    if(pBytes == 0) return '0 Bytes';
    if(pBytes == 1) return '1 Byte';
    if(pBytes == -1) return '-1 Byte';

    var bytes = Math.abs(pBytes)
    if(pUnits && pUnits.toLowerCase() && pUnits.toLowerCase() == 'si') {
        // SI units use the Metric representation based on 10^3 as a order of magnitude
        var orderOfMagnitude = Math.pow(10, 3);
        var abbreviations = ['Bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    } else {
        // IEC units use 2^10 as an order of magnitude
        var orderOfMagnitude = Math.pow(2, 10);
        var abbreviations = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
    }
    var i = Math.floor(Math.log(bytes) / Math.log(orderOfMagnitude));
    var result = (bytes / Math.pow(orderOfMagnitude, i));

    // This will get the sign right
    if(pBytes < 0) {
        result *= -1;
    }

    // This bit here is purely for show. it drops the percision on numbers greater than 100 before the units.
    // it also always shows the full number of bytes if bytes is the unit.
    if(result >= 99.995 || i==0) {
        return result.toFixed(0) + ' ' + abbreviations[i];
    } else {
        return result.toFixed(2) + ' ' + abbreviations[i];
    }
}

User · Answer

I just wanted to share my input  I had this problem so my solution is this  This will convert lower units to higher units and vice versa just supply the argument toUnit and fromUnit  export function fileSizeConverter size  number  fromUnit  string  toUnit  string    number   string     const units  string       B    KB    MB    GB    TB      const from   units indexOf fromUnit toUpperCase       const to   units indexOf toUnit toUpperCase       const BASE SIZE   1024    let result  number   string   0     if  from  lt  0    to  lt  0     return result    Error  Incorrect units        result   from  lt  to   size    BASE SIZE    to    size    BASE SIZE    from      return result toFixed 2       I got the idea from here

User · Answer

Using bitwise operation would be a better solution  Try this  function formatSizeUnits bytes        if     bytes  gt  gt  30    amp  0x3FF           bytes     bytes  gt  gt  gt  30             bytes  amp   3 0x3FF       GB        else if     bytes  gt  gt  20    amp  0x3FF           bytes     bytes  gt  gt  gt  20             bytes  amp   2 0x3FF        MB        else if     bytes  gt  gt  10    amp  0x3FF           bytes     bytes  gt  gt  gt  10             bytes  amp   0x3FF        KB        else if     bytes  gt  gt  1    amp  0x3FF           bytes     bytes  gt  gt  gt  1      Bytes        else         bytes   bytes    Byte        return bytes

User · Answer

function bytes2Size byteVal       var units   Bytes    KB    MB    GB    TB        var kounter 0      var kb  1024      var div byteVal 1      while div gt  kb           kounter            div  div kb            return div toFixed 1          units kounter

User · Answer

From this   source   function bytesToSize bytes       var sizes     Bytes    KB    MB    GB    TB       if  bytes    0  return  0 Byte      var i   parseInt Math floor Math log bytes    Math log 1024        return Math round bytes   Math pow 1024  i   2          sizes i       Note   This is original code  Please use fixed version below  Aliceljm does not active her copied code anymore    Now  Fixed version unminified  and ES6 ed   by community   function formatBytes bytes  decimals   2        if  bytes     0  return  0 Bytes        const k   1024      const dm   decimals  lt  0   0   decimals      const sizes     Bytes    KB    MB    GB    TB    PB    EB    ZB    YB         const i   Math floor Math log bytes    Math log k         return parseFloat  bytes   Math pow k  i   toFixed dm           sizes i       Now  Fixed version    by Stackoverflow s community    Minified by JSCompress   function formatBytes a b 2  if 0   a return 0 Bytes  const c 0 gt b 0 b d Math floor Math log a  Math log 1024   return parseFloat  a Math pow 1024 d   toFixed c         Bytes   KB   MB   GB   TB   PB   EB   ZB   YB   d     Usage       formatBytes bytes decimals   formatBytes 1024            1 KB formatBytes  1024           1 KB formatBytes 1234            1 21 KB formatBytes 1234  3         1 205 KB   Demo   source     x000D   x000D  function formatBytes bytes  decimals   2    x000D      if  bytes     0  return  0 Bytes   x000D   x000D      const k   1024  x000D      const dm   decimals  lt  0   0   decimals  x000D      const sizes     Bytes    KB    MB    GB    TB    PB    EB    ZB    YB    x000D   x000D      const i   Math floor Math log bytes    Math log k    x000D   x000D      return parseFloat  bytes   Math pow k  i   toFixed dm           sizes i   x000D    x000D   x000D        Demo code    x000D  var p   document querySelector  p    x000D      input   document querySelector  input    x000D       x000D  function setText v   x000D      p innerHTML   formatBytes v   x000D    x000D     bind  input  event x000D  input addEventListener  input   function     x000D      setText  this value   x000D     x000D     set initial text x000D  setText input value   x000D   lt input type  text  value  1000  gt  x000D   lt p gt  lt  p gt  x000D   x000D   x000D    PS   Change k   1000 or sizes           as you want  bits or bytes

User · Answer

const units     bytes    KB    MB    GB    TB    PB    EB    ZB    YB     function niceBytes x      let l   0  n   parseInt x  10     0     while n  gt   1024  amp  amp    l         n   n 1024          include a decimal point and a tenths-place digit if presenting      less than ten of KB or greater units   return n toFixed n  lt  10  amp  amp  l  gt  0   1   0          units l        Results   niceBytes 435                     435 bytes niceBytes 3398                    3 3 KB niceBytes 490398                  479 KB niceBytes 6544528                 6 2 MB niceBytes 23483023                22 MB niceBytes 3984578493              3 7 GB niceBytes 30498505889             28 GB niceBytes 9485039485039445        8 4 PB

User · Answer

I originally used  Aliceljm s answer for a file upload project I was working on  but recently ran into an issue where a file was 0 98kb but being read as 1 02mb  Here s the updated code I m now using   function formatBytes bytes     var kb   1024    var ndx   Math floor  Math log bytes    Math log kb       var fileSizeTypes     bytes    kb    mb    gb    tb    pb    eb    zb    yb       return       size    bytes   kb   kb  toFixed 2       type  fileSizeTypes ndx           The above would then be called after a file was added like so     In this case  file size  equals  26060275   formatBytes file size      returns    size  24 85  type   mb       Granted  Windows reads the file as being 24 8mb but I m fine with the extra precision

User · Answer

Try this simple workaround   var files       file   get 0  files                                 var size   files 0  size                  if  size  gt   5000000    alert  File size is greater than or equal to 5 MB

User · Answer

This is how a byte should be shown to a human   function bytesToHuman bytes  decimals   2         https   en wikipedia org wiki Orders of magnitude  data    const units     bytes    KiB    MiB    GiB    TiB    PiB    EiB       etc    let i   0    let h   0     let c   1   1023     change it to 1024 and see the diff    for    h  lt  c  amp  amp  i  lt  units length  i          if   h   Math pow 1024  i    bytes   gt   c          break                  remove toFixed and let  locale  controls formatting   return  1   h  toFixed decimals  toLocaleString           units i         test for  let i   0  i  lt  9  i        let val   i   Math pow 10  i     console log val toLocaleString       bytes is the same as     bytesToHuman val           let s fool around console log bytesToHuman 1023    console log bytesToHuman 1024    console log bytesToHuman 1025

User · Answer

x000D   x000D  function bytesToSize bytes    x000D    var sizes     B    K    M    G    T    P    x000D    for  var i   0  i  lt  sizes length  i      x000D      if  bytes  lt   1024    x000D        return bytes         sizes i   x000D        else   x000D        bytes   parseFloat bytes   1024  toFixed 2  x000D        x000D      x000D    return bytes     P   x000D    x000D   x000D  console log bytesToSize 234    x000D  console log bytesToSize 2043    x000D  console log bytesToSize 20433242    x000D  console log bytesToSize 2043324243    x000D  console log bytesToSize 2043324268233    x000D  console log bytesToSize 2043324268233343    x000D   x000D   x000D

User · Answer

I am updating  Aliceljm answer here  Since the decimal place matters for 1 2 digit numbers  I am round off the first decimal place and keep the first decimal place  For 3 digit number  I am round off the units place and ignoring the all decimal places   getMultiplers   function bytes       var unit   1000       if  bytes  lt  unit  return bytes       var exp   Math floor Math log bytes    Math log unit        var pre    kMGTPE  charAt exp-1       var result   bytes   Math pow unit  exp       if result 100  lt  1          return  Math round  result   10     10   pre      else         return Math round result    pre

User · Answer

You can use the filesizejs library

User · Answer

According to Aliceljm s answer  I removed 0 after decimal   function formatBytes bytes  decimals        if bytes   0                return  0 Byte             var k   1024    Or 1 kilo   1000     var sizes     Bytes    KB    MB    GB    TB    PB        var i   Math floor Math log bytes    Math log k        return parseFloat  bytes   Math pow k  i   toFixed decimals           sizes i

User · Answer

This solution builds upon previous solutions  but takes into account both metric and binary units   function formatBytes bytes  decimals  binaryUnits        if bytes    0            return  0 Bytes             var unitMultiple    binaryUnits    1024   1000       var unitNames    unitMultiple     1024       1000 bytes in 1 Kilobyte  KB  or 1024 bytes for the binary version  KiB            Bytes    KiB    MiB    GiB    TiB    PiB    EiB    ZiB    YiB               Bytes    KB    MB    GB    TB    PB    EB    ZB    YB        var unitChanges   Math floor Math log bytes    Math log unitMultiple        return parseFloat  bytes   Math pow unitMultiple  unitChanges   toFixed decimals    0           unitNames unitChanges       Examples   formatBytes 293489203947847  1         293 5 TB formatBytes 1234  0        1 KB formatBytes 4534634523453678343456  2      4 53 ZB formatBytes 4534634523453678343456  2  true        3 84 ZiB formatBytes 4566744  1         4 6 MB formatBytes 534  0         534 Bytes formatBytes 273403407  0       273 MB

User · Answer

function formatBytes bytes        var marker   1024     Change to 1000 if required     var decimal   3     Change as required     var kiloBytes   marker     One Kilobyte is 1024 bytes     var megaBytes   marker   marker     One MB is 1024 KB     var gigaBytes   marker   marker   marker     One GB is 1024 MB     var teraBytes   marker   marker   marker   marker     One TB is 1024 GB         return bytes if less than a KB     if bytes  lt  kiloBytes  return bytes     Bytes          return KB if less than a MB     else if bytes  lt  megaBytes  return bytes   kiloBytes  toFixed decimal      KB          return MB if less than a GB     else if bytes  lt  gigaBytes  return bytes   megaBytes  toFixed decimal      MB          return GB if less than a TB     else return bytes   gigaBytes  toFixed decimal      GB

User · Answer

ONE-LINER  x000D   x000D  const b2s t  gt  let e Math log2 t  10 0 return t 1024   e e lt  0 0 e   toFixed 3   BKMGP  e     console log b2s 0    console log b2s 123    console log b2s 123123    console log b2s 123123123    console log b2s 123123123123    console log b2s 123123123123123    x000D   x000D   x000D

User · Answer

x000D   x000D  var SIZES     Bytes    KB    MB    GB    TB    PB    EB    ZB    YB    x000D   x000D  function formatBytes bytes  decimals    x000D    for var i   0  r   bytes  b   1024  r  gt  b  i    r    b  x000D    return    parseFloat r toFixed decimals      SIZES i     x000D    x000D   x000D   x000D

User · Answer

Here s a one liner   val   gt    Bytes   Kb   Mb   Gb   Tb   Math floor Math log2 val  10    Or even   val   gt   BKMGT     Math log2 val  10

[javascript] Correct way to convert size in bytes to KB, MB, GB in JavaScript

Examples related to javascript

Examples related to byte

Examples related to converters