Assets index: show folder size and file count on folder rows

[MattAppleton]

Summary

Folder rows in the Assets index have an empty File Size cell. It would be useful if each folder row showed its total size and file count, e.g. 19.2 MB · 7 files, so editors can see at a glance where the weight of a volume is without opening every folder or installing a utility plugin.

Why we wanted it

We are tidying a migrated library of about 1,100 images into one folder per entry. Editors kept asking 'how big is this folder?' and 'is this one empty?'. Craft shows file sizes per asset, and the footer count once you open a folder, but nothing on the folder row itself.

Why it can't be done from a plugin today

Folders in the index are rendered as pseudo-assets (Asset::$isFolder), and Asset::getAttributeHtml() returns '' for them before EVENT_DEFINE_ATTRIBUTE_HTML fires (src/elements/Asset.php, around line 2816 in 5.11). So no PHP event can fill the cell. The only route is browser-side.

What we built (works, two files, Craft 5.11)

A CP script registered from View::EVENT_BEFORE_RENDER_PAGE_TEMPLATE watches for folder chips (.element[data-is-folder][data-folder-id], note they are on the chip, not the tr), posts their ids to a module action, and writes the answer into td[data-attr="size"]. The action runs one aggregate query per folder (COUNT(*), SUM(size) over the folder and its subfolders, trashed excluded). Measured: 0.3 ms per folder, 34 ms for a page of 100 folders. It runs after the index has rendered, so nothing blocks, and pages without folder rows make no request.

Module code (Craft 5.11): the two methods, plus the web controller

Registered from the module's init() on CP requests only ($this->registerFolderStats()).

    /**
     * Folder rows in the Assets index show their file count and total size in
     * the File Size column (2026-11-03). Craft 5 renders folders
     * as pseudo-assets whose getAttributeHtml() returns '' before any event
     * fires, so the cell is filled from the browser: a small CP script watches
     * for folder chips (`.element[data-is-folder]`, inside the row), posts their ids to
     * site-builder/folders/stats and writes the result into `td[data-attr=size]`.
     * Counts come from the DB — files in the folder and every subfolder, trashed
     * ones excluded, transforms not counted (they have no records).
     */
    private function registerFolderStats(): void
    {
        Event::on(View::class, View::EVENT_BEFORE_RENDER_PAGE_TEMPLATE, function() {
            $js = <<<'JS'
(function () {
    if (!window.Craft || !Craft.sendActionRequest) { return; }
    var pending = [], timer = null;
    function flush() {
        timer = null;
        var rows = pending; pending = [];
        if (!rows.length) { return; }
        var ids = rows.map(function (r) { return r.getAttribute('data-folder-id'); });
        Craft.sendActionRequest('POST', 'site-builder/folders/stats', {data: {ids: ids}}).then(function (res) {
            var stats = (res.data && res.data.stats) || {};
            rows.forEach(function (r) {
                var td = r.querySelector('td[data-attr="size"]');
                var html = stats[r.getAttribute('data-folder-id')];
                if (td && html != null) { td.innerHTML = html; }
            });
        }).catch(function () {});
    }
    function scan(root) {
        if (!root.querySelectorAll) { return; }
        root.querySelectorAll('.element[data-is-folder][data-folder-id]').forEach(function (chip) {
            var r = chip.closest('tr');
            if (!r || r.hasAttribute('data-folder-stats')) { return; }
            r.setAttribute('data-folder-stats', '1');
            r.setAttribute('data-folder-id', chip.getAttribute('data-folder-id'));
            pending.push(r);
        });
        if (pending.length && !timer) { timer = setTimeout(flush, 50); }
    }
    new MutationObserver(function (mutations) {
        mutations.forEach(function (m) { m.addedNodes.forEach(function (n) { if (n.nodeType === 1) { scan(n); } }); });
    }).observe(document.body, {childList: true, subtree: true});
    scan(document.body);
})();
JS;
            Craft::$app->getView()->registerJs($js, View::POS_END, 'site-builder-folder-stats');
        });
    }

    public static function folderStatsHtml(int $folderId): string
    {
        $folder = Craft::$app->getAssets()->getFolderById($folderId);
        if (!$folder) {
            return '';
        }
        $row = (new Query())
            ->select(['n' => 'COUNT(*)', 'bytes' => 'COALESCE(SUM([[a.size]]), 0)'])
            ->from(['a' => Table::ASSETS])
            ->innerJoin(['f' => Table::VOLUMEFOLDERS], '[[f.id]] = [[a.folderId]]')
            ->innerJoin(['e' => Table::ELEMENTS], '[[e.id]] = [[a.id]]')
            ->where(['f.volumeId' => $folder->volumeId, 'e.dateDeleted' => null])
            ->andWhere(['or', ['f.id' => $folder->id], ['like', 'f.path', $folder->path . '%', false]])
            ->one();
        $n = (int)($row['n'] ?? 0);
        if ($n === 0) {
            return Html::tag('span', Craft::t('app', 'Empty'), ['class' => 'light']);
        }
        $formatter = Craft::$app->getFormatter();
        $files = $n === 1 ? '1 file' : $formatter->asInteger($n) . ' files';
        return Html::tag('span', $formatter->asShortSize((int)$row['bytes'], 1) . ' · ' . $files, [
            'title' => $formatter->asInteger((int)$row['bytes']) . ' bytes, subfolders included',
            'style' => 'white-space: nowrap',
        ]);
    }

controllers/FoldersController.php:

<?php

namespace modules\sitebuilder\controllers;

use craft\web\Controller;
use modules\sitebuilder\SiteBuilderModule;
use yii\web\Response;

/**
 * Folder statistics for the Assets index (2026-11-03): the CP script registered
 * by SiteBuilderModule::registerFolderStats() posts the folder ids on screen and
 * fills each folder row's File Size cell with "<size> · <n> files".
 *
 *   POST actions/site-builder/folders/stats   ids[]=…   → { stats: { <folderId>: "<html>" } }
 */
class FoldersController extends Controller
{
    public function actionStats(): Response
    {
        $this->requireCpRequest();
        $this->requireAcceptsJson();
        $this->requirePostRequest();

        $ids = (array)$this->request->getBodyParam('ids', []);
        $stats = [];
        foreach (array_slice(array_unique(array_map('intval', $ids)), 0, 500) as $id) {
            if ($id > 0) {
                $stats[$id] = SiteBuilderModule::folderStatsHtml($id);
            }
        }

        return $this->asJson(['stats' => $stats]);
    }
}

Screenshot: see below.

Suggestion

Either of these would make it native:

1. Let getAttributeHtml() reach EVENT_DEFINE_ATTRIBUTE_HTML for folder pseudo-assets (one-line change), so plugins and modules can fill folder cells.
2. Or populate size on folder pseudo-assets in Asset::indexElements() with an aggregate query, with the count in the title attribute, perhaps behind a volume setting since large volumes with thousands of folders would pay for it on every listing.

Happy to turn the module into a PR for option 1 if that is the preferred direction.