Python Flask: how to get file name from dropdown list

I am new to Python & Flask and have search to solve this, but I can make it, so hope someone can assist me. (code below).

I am trying to make a webpage (on a local private server) to list music track in directories, in the dropdown list, and then play the track selected (plan to use os.system(mpc etc) commands) – but how do I get the selected filename in a variable, so that I can play it ?

Thanks in advance for your support

app.py

from flask import Flask, render_template
import os

app = Flask(__name__)

@app.route('/')
def index():
    files = os.listdir('/var/lib/mpd/music/.')

    return render_template('index.html', files=files)

if __name__ == '__main__':
    app.run(debug=False, host='0.0.0.0')

index.html

<html>
<head>
<link rel="stylesheet" href='/static/style.css' />
</head>
<body>
    <center>
        <h1>Music Website</h1>
        <hr>
        <h2>Select track:</h2>
        <select name=files method="GET" action="/">
            <option value="{{files[0]}}" SELECTED>{{files[0]}}</option>
            {% for fil in files[1:] %}
                <option value="{{fil}}">{{fil}}</option>
            {% endfor %}
        </select>
        <hr>
        <div class="footer">
        <p>Made by Agree Denmark</p>
        </div>
    </center>
</body>
</html>

style.css

body {
    background: #ADD8E6;
}
hr {
    border: 4px solid green;
    border-radius: 4px;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: green;
    color: white;
    text-align: center;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}    

Answer

The below code works: app.py:

#!/usr/bin/env python
from flask import Flask, flash, redirect, render_template, 
     request, url_for
import os

app = Flask(__name__)

@app.route('/')
def index():
    path = "/var/lib/mpd/music/"
    dirs = os.listdir(path)
    temp = []
    for dir in dirs:
        temp.append({'name': dir})

    return render_template('index.html', data=temp )
        
@app.route("/test" , methods=['GET', 'POST'])
def test():
    select = request.form.get('comp_select')
    print(select)
    return(str(select)) # just to see what select is

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

index.html:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href='/static/style.css' />
</head>
<body>
    <center>
        <h1>Music Website</h1>
        <hr>
        <form class="form-inline" method="POST" action="{{ url_for('test') }}">
            <div class="form-group">
              <div class="input-group">
                  <span class="input-group-addon">Please select</span>
                      <select name="comp_select" class="selectpicker form-control">
                        {% for o in data %}
                        <option value="{{ o.name }}">{{ o.name }}</option>
                        {% endfor %}
                      </select>
              </div>
              <button type="submit" class="btn btn-default">Go</button>
            </div>
          </form>
        <hr>
        <div class="footer">
        <p>Made by Agree DK</p>
        </div>
    </center>
</body>
</html>