uploading file on the same page html using flask

Question

Sorry if this is a basic question, just starting to familiarize with html/flask. I'm trying to build a one page local webapp where the user uploads a word file, I do some text processing and returns a mp3 file for the user to download. I'm struggling with getting the upload form working:

Here is the python code:

from flask import Flask,redirect,request,flash, url_for, render_template
import os
from werkzeug.utils import secure_filename


UPLOAD_FOLDER = '/Users/ME/PycharmProjects/mgf/uploads'
ALLOWED_EXTENSIONS = {'docx'}

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


@app.route("/", methods = ["GET","POST"])
def home():
    if request.method == "POST":
        file = request.form["upload1"]

    else:
        return render_template("index.html")
    return render_template("index.html")


if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

Here is the code for the form

 <form id="uploaddoc" method="POST">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
                    <input class="mdl-textfield__input" placeholder="No file chosen" type="text" id="TEXT_ID" readonly />
                    <div class="mdl-button mdl-button--icon mdl-button--file">
                        <i class="material-icons">attach_file</i>
                        <input type="file" name="upload1" id="ID" onchange="document.getElementById('TEXT_ID').value=this.files[0].name;" />
                    </div>
                </div>
            </form>

It displays the file name when I click the upload button, but it doesn't seem to pass anything through to the backend, any suggestions?