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

commented Mar 22, 2013

Cool and helpful.

@hairgamiMaster

This comment has been minimized.

Copy link

commented May 9, 2013

Many thanks man- very helpful!

@ctesene

This comment has been minimized.

Copy link

commented May 31, 2013

Just what I needed! Thanks!

@Mistobaan

This comment has been minimized.

Copy link

commented Jun 5, 2013

nice!

@cloudmanic

This comment has been minimized.

Copy link

commented Jun 23, 2013

Thanks you! Very helpful!!

@ghost

This comment has been minimized.

Copy link

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

commented Aug 30, 2013

Thank you very much, this was very helpful.

@Sopun

This comment has been minimized.

Copy link

commented Oct 2, 2013

Thanks, saved some time. :)

@GeertJohan

This comment has been minimized.

Copy link

commented Nov 3, 2013

Nice! Thanks 👍

@sgmonda

This comment has been minimized.

Copy link

commented Nov 9, 2013

Very nice! Thanks

@assisantunes

This comment has been minimized.

Copy link

commented Dec 5, 2013

Nice!

@ghost

This comment has been minimized.

Copy link

commented Jan 8, 2014

Thanks a lot!

@wonkim

This comment has been minimized.

Copy link

commented Jan 24, 2014

Thanks a lot!

@kylebrandt

This comment has been minimized.

Copy link

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

commented Mar 11, 2014

thanks!

@JeremyMercer

This comment has been minimized.

Copy link

commented Mar 20, 2014

Perfect. Thanks.

@DaveOrDead

This comment has been minimized.

Copy link

commented Mar 29, 2014

Nice one, cheers

@shangxiao

This comment has been minimized.

Copy link

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

commented Apr 1, 2014

Gooooooood

@cwhite92

This comment has been minimized.

Copy link

commented Apr 19, 2014

Awesome, thanks!

@lekhnath

This comment has been minimized.

Copy link

commented May 16, 2014

Helpful

@trushkevich

This comment has been minimized.

Copy link

commented May 21, 2014

Great, thanks!

@nietaki

This comment has been minimized.

Copy link

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

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

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];
  }
});
@Karankang007

This comment has been minimized.

Copy link

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

commented Aug 19, 2014

ありがとう!

@niemyjski

This comment has been minimized.

Copy link

commented Oct 1, 2014

Thank you!

@niemyjski

This comment has been minimized.

Copy link

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

commented Oct 10, 2014

cool, thanks for sharing that!

@choiks141

This comment has been minimized.

Copy link

commented Oct 29, 2014

thanks ^^

@shamoons

This comment has been minimized.

Copy link

commented Dec 31, 2014

Can I use this in a template directly?

@Serhioromano

This comment has been minimized.

Copy link

commented Jan 4, 2015

Cool!

@adusoft

This comment has been minimized.

Copy link

commented Jan 15, 2015

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

@Lamorale

This comment has been minimized.

Copy link

commented Jan 27, 2015

You miel thx

@trevershick

This comment has been minimized.

Copy link

commented Jan 29, 2015

👍 very helpful.

@niemyjski

This comment has been minimized.

Copy link

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

commented Mar 12, 2015

Thank you.

@renatomefi

This comment has been minimized.

Copy link

commented Apr 2, 2015

Thanks!

@nikhilkaluskar

This comment has been minimized.

Copy link

commented May 7, 2015

Very useful. Thanks

@cognivator

This comment has been minimized.

Copy link

commented May 7, 2015

Nice.

@sydcanem

This comment has been minimized.

Copy link

commented May 25, 2015

Timesaver. Thanks.

@icem

This comment has been minimized.

Copy link

commented Jun 2, 2015

Just use a8m/angular-filter kbFmt filter

@basvdijk

This comment has been minimized.

Copy link

commented Jul 9, 2015

Thanks!

@beannguyen

This comment has been minimized.

Copy link

commented Aug 18, 2015

Thank you!
It`s helpful.

@alehano

This comment has been minimized.

Copy link

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

commented Dec 22, 2015

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

@sjparsons

This comment has been minimized.

Copy link

commented Feb 3, 2016

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

@johnknoop

This comment has been minimized.

Copy link

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

commented Feb 26, 2016

Thank you~

@selamialtin

This comment has been minimized.

Copy link

commented Apr 25, 2016

nice, Thanks.

@soldier67

This comment has been minimized.

Copy link

commented May 13, 2016

谢谢

@pouyanh

This comment has been minimized.

Copy link

commented May 14, 2016

tnx

@pbek

This comment has been minimized.

Copy link

commented Aug 5, 2016

thank you!

@isohman

This comment has been minimized.

Copy link

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

commented Aug 26, 2016

Very helpful. Thank you!

@tamas-marton

This comment has been minimized.

Copy link

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

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

commented May 12, 2017

Thanks !!!

@Xsmael

This comment has been minimized.

Copy link

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

commented Jul 27, 2017

Awesome!! +1

@CLOUGH

This comment has been minimized.

Copy link

commented Jul 28, 2017

You just saved me 15 mins of my life

@ruiasn

This comment has been minimized.

Copy link

commented Nov 30, 2017

Very nice! Thanks !!!

@dalco

This comment has been minimized.

Copy link

commented Nov 30, 2017

Awesome! Thanks!

@dstran

This comment has been minimized.

Copy link

commented Apr 6, 2018

Thank you!!

@piitr64

This comment has been minimized.

Copy link

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

commented Jan 29, 2019

Thank you so much , very helpful 👍

@saurabhrathod35

This comment has been minimized.

Copy link

commented May 13, 2019

what if bytes size is 0.025

@devonc0

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.