List files from the media in the frontend (OctoberCMS)

I am still relatively new to OctoberCMS and wonder if I could dynamically list files from the media area (backend) on my website (frontend). The classic, dedicated access via {{ 'banner.jpg'|media }} (docs: https://octobercms.com/docs/markup/filter-media) has already worked for me.

I would also like to output certain file attributes like file size and timestamp. Is such a thing possible? Is there perhaps an example? Thank you.

To get files from media area you can use MediaLibrary's Api

Demo, in you page code section use this code it will show you files under / root directory of media area

function onStart() {            
    $folder = '/';
    $mediaLib = \System\Classes\MediaLibrary::instance();
    // it will return us MediaLibraryItem instance     
    $files = $mediaLib->listFolderContents($folder);
    $this['mediaFiles'] = $files;
}

Now, in markup section

<div>
    <h1> files </h1>
    <ul>
    {% for item in mediaFiles %}
        <li>
        {% if item.fileType == 'image' %}
            <img src="{{ item.publicUrl }}" height="100" width="100"/>
            <br/> {{ item.path }}
            <br/> {{ item.sizeToString() }} 
            <br/> {{ item.lastModifiedAsString() }}
        {% else %}
            {{ item.path }} 
            <br/> {{ item.sizeToString() }} 
            <br/> {{ item.lastModifiedAsString() }}
        {% endif %}
        </li>
    {% endfor %}
    </ul>
</div>

Now you can have all the information you needed. you can also use this code in your component for better control.

Output :

if you have any doubts please comment.