Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS byte format filter
app.filter('bytes', function() {
return function(bytes, precision) {
if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
if (typeof precision === 'undefined') precision = 1;
var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
number = Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
}
});
@whitneyland

This comment has been minimized.

Copy link

@whitneyland whitneyland commented Mar 22, 2013

Cool and helpful.

@hairgamiMaster

This comment has been minimized.

Copy link

@hairgamiMaster hairgamiMaster commented May 9, 2013

Many thanks man- very helpful!

@ctesene

This comment has been minimized.

Copy link

@ctesene ctesene commented May 31, 2013

Just what I needed! Thanks!

@Mistobaan

This comment has been minimized.

Copy link

@Mistobaan Mistobaan commented Jun 5, 2013

nice!

@cloudmanic

This comment has been minimized.

Copy link

@cloudmanic cloudmanic commented Jun 23, 2013

Thanks you! Very helpful!!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jul 29, 2013

Simple and very helpful. However, I had an issue when I pass in bytes=0, I was getting 'NaN Undefined'. Changed the line 3 to include a check and return '-' for this use case:
if (bytes==0 || isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';

Thanks

@mpieperhoff

This comment has been minimized.

Copy link

@mpieperhoff mpieperhoff commented Aug 30, 2013

Thank you very much, this was very helpful.

@Sopun

This comment has been minimized.

Copy link

@Sopun Sopun commented Oct 2, 2013

Thanks, saved some time. :)

@GeertJohan

This comment has been minimized.

Copy link

@GeertJohan GeertJohan commented Nov 3, 2013

Nice! Thanks 👍

@sgmonda

This comment has been minimized.

Copy link

@sgmonda sgmonda commented Nov 9, 2013

Very nice! Thanks

@assisantunes

This comment has been minimized.

Copy link

@assisantunes assisantunes commented Dec 5, 2013

Nice!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jan 8, 2014

Thanks a lot!

@wonkim

This comment has been minimized.

Copy link

@wonkim wonkim commented Jan 24, 2014

Thanks a lot!

@kylebrandt

This comment has been minimized.

Copy link

@kylebrandt kylebrandt commented Feb 26, 2014

If bytes is zero, it returns NaN undefined, so I added:

if (bytes === 0) { return '0 bytes' }

@ricricucit

This comment has been minimized.

Copy link

@ricricucit ricricucit commented Mar 11, 2014

thanks!

@JeremyMercer

This comment has been minimized.

Copy link

@JeremyMercer JeremyMercer commented Mar 20, 2014

Perfect. Thanks.

@DaveOrDead

This comment has been minimized.

Copy link

@DaveOrDead DaveOrDead commented Mar 29, 2014

Nice one, cheers

@shangxiao

This comment has been minimized.

Copy link

@shangxiao shangxiao commented Mar 30, 2014

To be technically correct, a kilobyte (1024 bytes) is actually KB, not kB which is 1000 bytes

@iamdenny

This comment has been minimized.

Copy link

@iamdenny iamdenny commented Apr 1, 2014

Gooooooood

@cwhite92

This comment has been minimized.

Copy link

@cwhite92 cwhite92 commented Apr 19, 2014

Awesome, thanks!

@lekhnath

This comment has been minimized.

Copy link

@lekhnath lekhnath commented May 16, 2014

Helpful

@trushkevich

This comment has been minimized.

Copy link

@trushkevich trushkevich commented May 21, 2014

Great, thanks!

@nietaki

This comment has been minimized.

Copy link

@nietaki nietaki commented Jun 13, 2014

It's simple and works just as advertised. And took a guy on his second day of using Angular a total of 10 seconds to set up. Thanks!

@veewee

This comment has been minimized.

Copy link

@veewee veewee commented Jun 16, 2014

Thanks!
For the people who have their code tested in karma:

'use strict';

describe('Filter: bytes', function () {

  // load the filter's module
  beforeEach(module('YOURMODULENAME'));

  // initialize a new instance of the filter before each test
  var bytes;
  beforeEach(inject(function ($filter) {
    bytes = $filter('bytes');
  }));

  it('should return nothing when there is no filesize', function () {
    expect(bytes('text')).toBe('-');
  });

  it('should round the filesize based on the configured precision', function () {
    var size = 1024 + 512;
    expect(bytes(size)).toBe('1.5 kB');
    expect(bytes(size, 2)).toBe('1.50 kB');
  });

  it('should recognize bytes', function () {
    expect(bytes(1, 0)).toBe('1 bytes');
  });

  it('should recognize KiloBytes', function () {
    expect(bytes(Math.pow(1024, 1), 0)).toBe('1 kB');
  });

  it('should recognize MegaBytes', function () {
    expect(bytes(Math.pow(1024, 2), 0)).toBe('1 MB');
  });

  it('should recognize GigaBytes', function () {
    expect(bytes(Math.pow(1024, 3), 0)).toBe('1 GB');
  });

  it('should recognize TeraBytes', function () {
    expect(bytes(Math.pow(1024, 4), 0)).toBe('1 TB');
  });

  it('should recognize PetaBytes', function () {
    expect(bytes(Math.pow(1024, 5), 0)).toBe('1 PB');
  });

});
@jessecurry

This comment has been minimized.

Copy link

@jessecurry jessecurry commented Jul 15, 2014

This is great.

I forked a version with some more whitespace and explicit braces (https://gist.github.com/jessecurry/cd79fcc705cc3db97347).

app.filter('bytes', function() {
  return function(bytes, precision) {
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) {
      return '-';
    }

    if (typeof precision === 'undefined') {
      precision = 1;
    }

    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
    number = Math.floor(Math.log(bytes) / Math.log(1024));

    return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) +  ' ' + units[number];
  }
});
@karan-kang

This comment has been minimized.

Copy link

@karan-kang karan-kang commented Aug 14, 2014

Thanks for this filter.

This can be further improved by removing trailing zeros from the result.

app.filter('bytes', function() {
    return function(bytes, precision) {
        if (bytes === 0) { return '0 bytes' }
        if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
        if (typeof precision === 'undefined') precision = 1;

        var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
            number = Math.floor(Math.log(bytes) / Math.log(1024)),
            val = (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision);

        return  (val.match(/\.0*$/) ? val.substr(0, val.indexOf('.')) : val) +  ' ' + units[number];
    }
});
@takumarakann

This comment has been minimized.

Copy link

@takumarakann takumarakann commented Aug 19, 2014

ありがとう!

@niemyjski

This comment has been minimized.

Copy link

@niemyjski niemyjski commented Oct 1, 2014

Thank you!

@niemyjski

This comment has been minimized.

Copy link

@niemyjski niemyjski commented Oct 2, 2014

I added this to a filter library here: https://github.com/niemyjski/angular-filters

@mimmy

This comment has been minimized.

Copy link

@mimmy mimmy commented Oct 10, 2014

cool, thanks for sharing that!

@choiks141

This comment has been minimized.

Copy link

@choiks141 choiks141 commented Oct 29, 2014

thanks ^^

@shamoons

This comment has been minimized.

Copy link

@shamoons shamoons commented Dec 31, 2014

Can I use this in a template directly?

@Serhioromano

This comment has been minimized.

Copy link

@Serhioromano Serhioromano commented Jan 4, 2015

Cool!

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jan 15, 2015

Quick search, found it, works, thanks :D.

@Lamorale

This comment has been minimized.

Copy link

@Lamorale Lamorale commented Jan 27, 2015

You miel thx

@trevershick

This comment has been minimized.

Copy link

@trevershick trevershick commented Jan 29, 2015

👍 very helpful.

@niemyjski

This comment has been minimized.

Copy link

@niemyjski niemyjski commented Jan 30, 2015

I just added some improvements to my version based off this to handle string numbers: https://github.com/exceptionless/angular-filters

@stylesuxx

This comment has been minimized.

Copy link

@stylesuxx stylesuxx commented Mar 12, 2015

Thank you.

@renatomefi

This comment has been minimized.

Copy link

@renatomefi renatomefi commented Apr 2, 2015

Thanks!

@nikhilkaluskar

This comment has been minimized.

Copy link

@nikhilkaluskar nikhilkaluskar commented May 7, 2015

Very useful. Thanks

@cognivator

This comment has been minimized.

Copy link

@cognivator cognivator commented May 7, 2015

Nice.

@sydcanem

This comment has been minimized.

Copy link

@sydcanem sydcanem commented May 25, 2015

Timesaver. Thanks.

@icem

This comment has been minimized.

Copy link

@icem icem commented Jun 2, 2015

Just use a8m/angular-filter kbFmt filter

@basvdijk

This comment has been minimized.

Copy link

@basvdijk basvdijk commented Jul 9, 2015

Thanks!

@beannguyen

This comment has been minimized.

Copy link

@beannguyen beannguyen commented Aug 18, 2015

Thank you!
It`s helpful.

@alehano

This comment has been minimized.

Copy link

@alehano alehano commented Oct 4, 2015

Cool. But I would add
if (bytes === 0) return '0 B';
on 4th line.

@ziomio

This comment has been minimized.

Copy link

@ziomio ziomio commented Dec 22, 2015

Just use a8m/angular-filter kbFmt filter
@icem, thanks for the tip!

@sjparsons

This comment has been minimized.

Copy link

@sjparsons sjparsons commented Feb 3, 2016

Nice work, cheers! And thanks esp for the tests @veewee

@johnknoop

This comment has been minimized.

Copy link

@johnknoop johnknoop commented Feb 21, 2016

If you want to make use of Angulars i18n functionality, then you can reuse the Number filter to format the number. In my case, I want the comma as decimal separator.

Here's the code:

var numberFilter = filter("number");
return (bytes, precision) => {
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
    if (typeof precision === 'undefined') precision = 1;
    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
        number = Math.floor(Math.log(bytes) / Math.log(1024));
    return numberFilter(bytes / Math.pow(1024, Math.floor(number)), precision) + ' ' + units[number];
}
@yjchen-tw

This comment has been minimized.

Copy link

@yjchen-tw yjchen-tw commented Feb 26, 2016

Thank you~

@selamialtin

This comment has been minimized.

Copy link

@selamialtin selamialtin commented Apr 25, 2016

nice, Thanks.

@fuhaixiao

This comment has been minimized.

Copy link

@fuhaixiao fuhaixiao commented May 13, 2016

谢谢

@pouyanh

This comment has been minimized.

Copy link

@pouyanh pouyanh commented May 14, 2016

tnx

@pbek

This comment has been minimized.

Copy link

@pbek pbek commented Aug 5, 2016

thank you!

@blackcrow33

This comment has been minimized.

Copy link

@blackcrow33 blackcrow33 commented Aug 8, 2016

When bytes = 0, it showed NaN undefined.

Handle when bytes = 0 as following
if (bytes === 0 || isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';

@samreaves

This comment has been minimized.

Copy link

@samreaves samreaves commented Aug 26, 2016

Very helpful. Thank you!

@tamas-marton

This comment has been minimized.

Copy link

@tamas-marton tamas-marton commented Nov 14, 2016

@rapilabs has a point (though I guess the correct symbol is KiB, not KB - https://en.wikipedia.org/wiki/Kibibyte), it seems to be better to use 1000 as a multiplier instead of 1024 (that way, the user gets the same number they see in the OS file browser). Anyway, great code, thank you very much.

@superole

This comment has been minimized.

Copy link

@superole superole commented Nov 24, 2016

it seems to be better to use 1000 as a multiplier instead of 1024 (that way, the user gets the same number they see in the OS file browser)

I don't know which OS you are referring to, @tamas-marton, but this is certainly not true in Windows. I just verified that both win7 and win10 uses 1024 as base for their units ;-)

@GitDema

This comment has been minimized.

Copy link

@GitDema GitDema commented May 12, 2017

Thanks !!!

@Xsmael

This comment has been minimized.

Copy link

@Xsmael Xsmael commented Jul 5, 2017

if you wanna handle zero values as well and display them, change the 6th line like so:
number = Math.floor(Math.log(bytes) / Math.log(1024)) | 0;

@rubenqba

This comment has been minimized.

Copy link

@rubenqba rubenqba commented Jul 27, 2017

Awesome!! +1

@CLOUGH

This comment has been minimized.

Copy link

@CLOUGH CLOUGH commented Jul 28, 2017

You just saved me 15 mins of my life

@ruiasn

This comment has been minimized.

Copy link

@ruiasn ruiasn commented Nov 30, 2017

Very nice! Thanks !!!

@dalco

This comment has been minimized.

Copy link

@dalco dalco commented Nov 30, 2017

Awesome! Thanks!

@dstran

This comment has been minimized.

Copy link

@dstran dstran commented Apr 6, 2018

Thank you!!

@piitr64

This comment has been minimized.

Copy link

@piitr64 piitr64 commented Apr 9, 2018

Perfect. Thanks!!!
if you wanna change dot to comma as decimal separator, just simply add:
.replace('.', ',')
Here is the complete 7th line:
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision).replace('.', ',') + ' ' + units[number];

@reznov11

This comment has been minimized.

Copy link

@reznov11 reznov11 commented Jan 29, 2019

Thank you so much , very helpful 👍

@saurabhrathod35

This comment has been minimized.

Copy link

@saurabhrathod35 saurabhrathod35 commented May 13, 2019

what if bytes size is 0.025

@devonc0

This comment has been minimized.

Copy link

@devonc0 devonc0 commented May 22, 2019

Here it is for Angular ( I just formatted this up a bit, am using Angular7) - I did not port in the Unit Tests, but didn't modify the values, so, might be able to Angularize those as well

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'byteFormatter'
})
export class ByteFormatterPipe implements PipeTransform {

  transform(bytes: string | number, precision: number): any {

    if (isNaN(parseFloat(bytes.toString())) || !isFinite(Number(bytes))) {
      return '-';
    }

    if (typeof precision === 'undefined') {
      precision = 1;
    }

    const units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
    const actualValue = Math.floor(Math.log(Number(bytes)) / Math.log(1024));

    return (Number(bytes) / Math.pow(1024, Math.floor(actualValue))).toFixed(precision) + ' ' + units[actualValue];

  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment