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

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

  }
}