AngularJS byte format filter

gistfile1.js

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

Cool and helpful.

Many thanks man- very helpful!

Just what I needed! Thanks!

nice!

Thanks you! Very helpful!!

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

Thank you very much, this was very helpful.

Thanks, saved some time. :)

Nice! Thanks 👍

Very nice! Thanks

Nice!

Thanks a lot!

Thanks a lot!

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

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

thanks!

Perfect. Thanks.

Nice one, cheers

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

Gooooooood

Awesome, thanks!

Helpful

Great, thanks!

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!

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');
  });

});

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

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

ありがとう！

Thank you!

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

cool, thanks for sharing that!

thanks ^^

Can I use this in a template directly?

Cool!

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

You miel thx

👍 very helpful.

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

Thank you.

Thanks!

Very useful. Thanks

Nice.

Timesaver. Thanks.

Just use a8m/angular-filter kbFmt filter

Thanks!

Thank you!
It`s helpful.

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

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

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

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];
}

Thank you~

nice, Thanks.

谢谢

tnx

thank you!

When bytes = 0, it showed NaN undefined.

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

Very helpful. Thank you!

@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.

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 ;-)

Thanks !!!

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;

Awesome!! +1

You just saved me 15 mins of my life

Very nice! Thanks !!!

Awesome! Thanks!

Thank you!!

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];

Thank you so much , very helpful 👍

what if bytes size is 0.025

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];

  }
}