How to dynamically populate dropdown menus with column names from csv in Flask or Pandas?

I'm building a Flask app that allows users to upload a CSV file and select three columns from the file using dropdown menus. I want to dynamically populate the dropdown menus with the column names from the uploaded file. The end goal is to assign the column names to variables col1, col2, col3 so that I can reference them in a python script.

I'm trying to get the user to map columns so I know what the data is to manipulate it with Python. New to Flask, but feel like I'm close!

What I've tried:

I've tried modifying the upload function to read the column names from the uploaded file and pass them to the upload.html template. I'm still having issues with the dropdown menus not being populated with the column names.

Here's my code:

app.py

from flask import Flask, render_template, request
import pandas as pd
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html')
@app.route('/upload', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
file = request.files.get('file')
if file and file.filename.endswith('.csv'):
df = pd.read_csv(file)
col_names = df.columns.tolist()
return render_template('upload.html', col_names=col_names)
else:
return "Invalid file format"
else:
return render_template('upload.html')
if __name__ == '__main__':
app.run(debug=True)

upload.html

<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">File:</label>
<input type="file" id="file" name="file"><br />
<label for="col1">Column 1:</label>
<select id="col1" name="col1">
{% for col in col_names %}
<option value="{{ col }}">{{ col }}</option>
{% endfor %}
</select><br />
<label for="col2">Column 2:</label>
<select id="col2" name="col2">
{% for col in col_names %}
<option value="{{ col }}">{{ col }}</option>
{% endfor %}
</select><br />
<label for="col3">Column 3:</label>
<select id="col3" name="col3">
{% for col in col_names %}
<option value="{{ col }}">{{ col }}</option>
{% endfor %}
</select><br />
<button>Upload</button>
</form>

Add the column names to the form action in the upload.html template and then retrieve the values with the request.form.get() method in the upload() function in app.py.

In upload.html:

<form action="/upload?col_names={{ col_names }}" method="POST" enctype="multipart/form-data">

In app.py:

@app.route('/upload', methods=['GET', 'POST'])
def upload():
col_names = request.args.get('col_names')
if request.method == 'POST':
file = request.files.get('file')
if file and file.filename.endswith('.csv'):
df = pd.read_csv(file)
col1 = request.form.get('col1')
col2 = request.form.get('col2')
col3 = request.form.get('col3')
return render_template('upload.html', col_names=col_names, col1=col1, col2=col2, col3=col3)
else:
return "Invalid file format"
else:
return render_template('upload.html', col_names=col_names)

With that you can access the values of col1, col2, and col3 in the upload() function and use them to manipulate the data in the CSV file with Python.