How to generate an html directory list using Python

I am having some problems using Python to generate an html document. I am attempting to create an HTML list of a directory tree. This is what I have so far:

def list_files(startpath):
    for root, dirs, files in os.walk(startpath):
        level = root.replace(startpath, '').count(os.sep)
        if level <= 1:
            print('<li>{}<ul>'.format(os.path.basename(root)))
        else:
            print('<li>{}'.format(os.path.basename(root)))
        for f in files:
            last_file = len(files)-1
            if f == files[last_file]:
                print('<li>{}</li></ul>'.format(f))
            elif f == files[0] and level-1 > 0:
                print('<ul><li>{}</li>'.format(f))
            else:
                print('<li>{}</li>'.format(f))
    print('</li></ul>')

It seems to work well if there is only the root directory, one level of sub-directories and files. However, adding another level of sub-directories causes there to be problems (because the close tag isn't input enough times at the end I think). But I'm having a hard time getting my head around it.

If it can't be done this way, is there an easier way to do it? I'm using Flask but I'm very inexperienced with templates so perhaps I'm missing something.


Solution 1:

You could separate the directory tree generation and its rendering as html.

To generate the tree you could use a simple recursive function:

def make_tree(path):
    tree = dict(name=os.path.basename(path), children=[])
    try: lst = os.listdir(path)
    except OSError:
        pass #ignore errors
    else:
        for name in lst:
            fn = os.path.join(path, name)
            if os.path.isdir(fn):
                tree['children'].append(make_tree(fn))
            else:
                tree['children'].append(dict(name=name))
    return tree

To render it as html you could use jinja2's loop recursive feature:

<!doctype html>
<title>Path: {{ tree.name }}</title>
<h1>{{ tree.name }}</h1>
<ul>
{%- for item in tree.children recursive %}
    <li>{{ item.name }}
    {%- if item.children -%}
        <ul>{{ loop(item.children) }}</ul>
    {%- endif %}</li>
{%- endfor %}
</ul>

Put the html into templates/dirtree.html file. To test it, run the following code and visit http://localhost:8888/:

import os
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def dirtree():
    path = os.path.expanduser(u'~')
    return render_template('dirtree.html', tree=make_tree(path))

if __name__=="__main__":
    app.run(host='localhost', port=8888, debug=True)