Skip to content

Instantly share code, notes, and snippets.

@JonCatmull
Last active April 14, 2024 14:27
Show Gist options
  • Save JonCatmull/ecdf9441aaa37336d9ae2c7f9cb7289a to your computer and use it in GitHub Desktop.
Save JonCatmull/ecdf9441aaa37336d9ae2c7f9cb7289a to your computer and use it in GitHub Desktop.
Angular2 + TypeScript file size Pipe/Filter. Convert bytes into largest possible unit. e.g. 1024 => 1 KB
/**
* @license
* Copyright (c) 2019 Jonathan Catmull.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { Pipe, PipeTransform } from '@angular/core';
type unit = 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB';
type unitPrecisionMap = {
[u in unit]: number;
};
const defaultPrecisionMap: unitPrecisionMap = {
bytes: 0,
KB: 0,
MB: 1,
GB: 1,
TB: 2,
PB: 2
};
/*
* Convert bytes into largest possible unit.
* Takes an precision argument that can be a number or a map for each unit.
* Usage:
* bytes | fileSize:precision
* @example
* // returns 1 KB
* {{ 1500 | fileSize }}
* @example
* // returns 2.1 GB
* {{ 2100000000 | fileSize }}
* @example
* // returns 1.46 KB
* {{ 1500 | fileSize:2 }}
*/
@Pipe({ name: 'fileSize' })
export class FileSizePipe implements PipeTransform {
private readonly units: unit[] = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
transform(bytes: number = 0, precision: number | unitPrecisionMap = defaultPrecisionMap): string {
if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) return '?';
let unitIndex = 0;
while (bytes >= 1024) {
bytes /= 1024;
unitIndex++;
}
const unit = this.units[unitIndex];
if (typeof precision === 'number') {
return `${bytes.toFixed(+precision)} ${unit}`;
}
return `${bytes.toFixed(precision[unit])} ${unit}`;
}
}
@JonCatmull
Copy link
Author

Thanks, everyone for your comments! Sorry, I haven't been on here and the emails got overlooked.

@coreyog, @AarjavP, @donmccurdy, @msteini82

Thank you for your suggestions, I will definitely look to incorporate these and repost. Then perhaps this is worth putting in an npm module to easily import into your projects if anyone has a suggestion on the name then drop a comment below.

Thanks, again.

@MacGyver98
Copy link

A simple suggestion. if (unit == 0) precision = 0; after the while loop so you don't end up with "38.00 bytes."

I guess this wouldn't help if you were averaging file sizes or something but I bet total file size is it's more popular use.

And what about this one...

let unit = 0, division = bytes;
    
    while ( division >= 1024 ) {
      division /= 1024;
      unit ++;
    }
    if (bytes % 1024 <= 10) precision = 0;

@luckylks
Copy link

I found it cleaner to change:
while ( bytes >= 1024 ) {
to:
while ( bytes >= 1000 ) {
to avoid having something like 1021 kB. This would be rounded down to 1 MB which looks better.

@JonCatmull
Copy link
Author

Added a file size precision map so you can have more finite control over what precision you want per unit.
It still accepts a number for the same precision across all units.

@folencao
Copy link

There is a small issue if the bytes is int value, will raise error bytes.toFixed is not a function, a quick fix is convert to float before run toFixed, bytes = parseFloat(bytes.toString());

@mak009
Copy link

mak009 commented Mar 1, 2021

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

 const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 const FILE_SIZE_UNITS_LONG = ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Pettabytes', 'Exabytes', 'Zettabytes', 'Yottabytes'];

 @Pipe({
   name: 'formatFileSize'
 })
 export class FormatFileSizePipe implements PipeTransform {
    transform(sizeInBytes: number, longForm: boolean): string {
     const units = longForm
       ? FILE_SIZE_UNITS_LONG
       : FILE_SIZE_UNITS;

     let power = Math.round(Math.log(sizeInBytes) / Math.log(1024));
     power = Math.min(power, units.length - 1);

const size = sizeInBytes / Math.pow(1024, power); // size in new units
const formattedSize = Math.round(size * 100) / 100; // keep up to 2 decimals
const unit = units[power];

return `${formattedSize} ${unit}`;
   }
 }
   }

@butigy
Copy link

butigy commented Apr 2, 2021

nice, thanks

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