400 Неверный запрос: KeyError: 'файлы'

Кажется, я не могу понять, что вызывает проблему, я знаю, что плохой запрос обычно возникает, когда возникает ошибка переменной, однако это не похоже на мой случай.

Моя программа имеет две функции: Загрузить файл и Отображение содержимого таблицы вкладок.

С загрузкой файла проблем нет, однако, когда дело доходит до отображения содержимого вкладки, каждый раз, когда я пытаюсь выбрать вкладку, возникает сообщение об ошибке, и оно указывает на функцию файла.

Вот мои коды в html Загрузка файлов

 <p>Data Source</p>
            <div class="div1" method="GET" action="/">
              {% for file in uploads %}
              {{uploads}}
              <br>
              {% endfor %}
            </div>
          </div>
            <br>
            <form action = "/successful" method = "post" enctype="multipart/form-data">  
              <input type="file" name="files" />  
              <input type = "submit" value="Upload">  
            </script>

Содержимое вкладки

 <div class="tab">
              <button class="tablinks" onclick="openCity(event, 'wc')">Word Cloud</button>
              <button class="tablinks" onclick="openCity(event, 'sd')">Sample Data</button>


            <div id="wc" class="tabcontent">
              <h3>Word Cloud</h3>
              <p>London is the capital city of England.</p>
            </div>

            <div id="sd" class="tabcontent">
              <h3>Sample Data</h3>
              <p>Paris is the capital of France.</p> 
            </div>

            <script>
              function openCity(event, cityName) {
                var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");
                for (i = 0; i < tabcontent.length; i++) {
                  tabcontent[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                  tablinks[i].className = tablinks[i].className.replace(" active", "");
                }
                document.getElementById(cityName).style.display = "block";
                evt.currentTarget.className += " active";
              }
              </script>

Фласк .py код

uploads = []
@app.route('/successful', methods = ['POST'])  
def success():  
    if request.method == 'POST':  
        f = request.files['files']  
        f.save(f.filename)  
        uploads.append(f.filename)
        return render_template("base.html", uploads=uploads)  

model = [
    {'id': '1', 'bank': 'U.S. BANCORP', 'complaints': '600'},
    {'id': '2', 'bank': 'EQUIFAX, INC.', 'complaints': '250'},
    {'id': '3', 'bank': 'Navient Solutions, LLC', 'complaints': '300'},
    {'id': '4', 'bank': 'CITIBANK, N.A.', 'complaints': '400'},
    {'id': '5', 'bank': 'JPMORGAN CHASE & CO.', 'complaints': '500'}
]

@app.route('/', methods=['GET'])
def dropdown2():
    model = [
        {'bank': 'U.S. BANCORP'},
        {'bank': 'EQUIFAX, INC.'},
        {'bank': 'Navient Solutions, LLC'},
        {'bank': 'CITIBANK, N.A.'},
        {'bank': 'JPMORGAN CHASE & CO.'},
        {'bank': 'TRANSUNION INTERMEDIATE HOLDINGS, INC.'},
        {'bank': 'Experian Information Solutiona Inc.'},
        {'bank': 'WELLS FRAGO; COMPANY'},
        {'bank': 'BANK OF AMERICA, NATIONAL ASSOCIATION'},
        {'bank': 'CAPITAL ONE FINANCIAL CORPORATION'}
             ]
    model2 = [
        {'quarter': 'Q1'},
        {'quarter': 'Q2'},
        {'quarter': 'Q3'},
        {'quarter': 'Q4'}
             ]

    model3 = [
        {'id': '1', 'percent': '25%'},
        {'id': '2', 'percent': '50%'},
        {'id': '3', 'percent': '75%'},
        {'id': '4', 'percent': '100%'}
            ]
    return render_template('base.html', model=model, model2=model2, model3=model3)


@app.route("/")
def index():
    return render_template("index.html")



if __name__ == "__main__":
    app.run(debug=True)

Буду признателен, если кто-нибудь подскажет, где не так, заранее спасибо!