Working with filesizes

Wappler General Need Help
1

Just out of interest, I was wondering how others display file sizes when doing file listings from folders, so the end user sees the file size in either KB, MB, or GB.
I am looking for a more scalable way, without having to add a command for each scenario.

Currently I would do something like this.

<td dmx-text="size >= 1000000 ? ((size / 1000) / 1000).ceil().toString().concat(' MB') : (size / 1000).ceil().toString().concat(' KB')"></td>

This works fine for KB, and MB, but would not scale up for GB, or at worst case scenario TB, unless I manually add more and more conditions to account for each.

Was wondering if in this day and age, with this being something pretty common, if there is a far simpler way.

1 Like
2

If you’re ok with loading in another library, https://filesizejs.com/ does the job nicely.

1 Like
3

Thanks Max, that could be a good choice for me, I also see they are using the older 1024 vs 1000bytes per mb.

4

It's not older :slight_smile: It's the correct one. 1 Kilobyte equals 1024 bytes, not 1000 :slight_smile:

3 Likes
5

Lol, very true, but i see even Google converts strange these days

Screenshot 2021-04-23 at 13.30.33
Screenshot 2021-04-23 at 13.30.331320×452 23.1 KB

I thought maybe this had changed over time due to hard drive block and sector sizes and I had just missed the memo, hahaha

1 Like
6

You’re right there seems to be two different interpretations here :slight_smile: i seem to be referring to the binary one:

anyway - the filesizes library looks great!

2 Likes
7

Lol, this must be why SSD drives all have strange capacities these days, i mean back in the day everything was divisions of 8, now i buy a 250gb SSD or a 240GB SSD depending upon manufacturer.

It’s quite a pain for people like me that have a physical drive duplicator unit, as the spinning hard drives all seem to be slightly higher capacity than their SSD counterparts, and so the duplicator always moans.
I put a 250gb Seagate 7200rpm in bay 1 and a 250gb Samsung 850 EVO in bay 2, and the duplicator says, no, the SSD is too small.

I assume all that trouble is because of the info you just provided above.

1 Like
8

Easiest way is using:

<td dmx-text="size.formatSize()">

I just checked and the formatter seems to be missing in the UI, perhaps @George can add it. As arguments you can pass the number of decimals and as a second argument a boolean for binary sizes. Default is 2 decimals and not using binary (divide by 1000 instead of 1024).

4 Likes
9

Thank you @patrick for the very valuable information. One question. Is it possible to add a space between the size and KB, MB, etc.?

I get 11.21MB instead of 11.21 MB

10

There is not an option to add a space between. Here is the formatter code, you can edit it and place it as a custom formatter on your page.

dmx.Formatters('number', {
    formatSize: function(number, decimals, binary) {
        if (isNaN(number) || !isFinite(number)) return 'Invalid Size';

        decimals = decimals || 2;

        var base = binary ? 1024 : 1000;
        var suffix = binary ? ['KiB', 'MiB', 'GiB', 'TiB'] : ['KB', 'MB', 'GB', 'TB'];

        for (var i = 3; i >= 0; i--) {
            var n = Math.pow(base, i + 1);
            if (number >= n) {
                number /= n;
                var pow = Math.pow(10, decimals);
                number = Math.round(number * pow) / pow;
                return number + suffix[i];
            }
        }

        return number + 'B';
    }
});
1 Like
11

Thank you Patrick, thats brilliant news. I just knew there had to be something, somewhere, really glad I asked now.

12

For those who want to add a space after size, here is the edited code for the use of a custom formatter:

dmx.Formatters('number', {
    formatSizeCustom: function (number, decimals, binary) {
        if (isNaN(number) || !isFinite(number)) return 'Invalid Size';

        decimals = decimals || 2;

        var base = binary ? 1024 : 1000;
        var suffix = binary ? ['KiB', 'MiB', 'GiB', 'TiB'] : ['KB', 'MB', 'GB', 'TB'];

        for (var i = 3; i >= 0; i--) {
            var n = Math.pow(base, i + 1);
            if (number >= n) {
                number /= n;
                var pow = Math.pow(10, decimals);
                number = Math.round(number * pow) / pow;
                return number + ' ' + suffix[i];
            }
        }

        return number + ' ' + 'B';
    }
});
13

@George, while you adding the hmac stuff, can you please also add this formatSize() one too, i saw you were not assigned to this one, so just a reminder.

1 Like
15

img_size.toNumber().formatSize(2, true)