Dropzone.js предотвращает создание шаблона Flask

Я использую Dropzone.js, чтобы разрешить перетаскивание файлов CSV через веб-сайт Flask. Процесс загрузки отлично работает. Я сохраняю загруженный файл в указанную папку и затем могу использовать df.to_html() для преобразования кода dataframe в HTML, который затем передаю в мой шаблон. Он добирается до этой точки в коде, но он не отображает шаблон и никаких ошибок не возникает. Поэтому мой вопрос: почему Dropzone.js предотвращает выполнение рендеринга?

Я также попытался просто вернуть код HTML из таблицы и не использовать render_template, но это также не работает.

INIT.py

import os
from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

# get the current folder
APP_ROOT = os.path.dirname(os.path.abspath(__file__))

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


@app.route('/upload', methods=['POST'])
def upload():

    # set the target save path
    target = os.path.join(APP_ROOT, 'uploads/')

    # loop over files since we allow multiple files
    for file in request.files.getlist("file"):

        # get the filename
        filename = file.filename

        # combine filename and path
        destination = "/".join([target, filename])

        # save the file
        file.save(destination)

        #upload the file
        df = pd.read_csv(destination)
        table += df.to_html()

    return render_template('complete.html', table=table)


if __name__ == '__main__':
    app.run(port=4555, debug=True)

upload1.html

<!DOCTYPE html>

<meta charset="utf-8">

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="#" onclick="location.href='https://rawgit.com/enyo/dropzone/master/dist/dropzone.css'; return false;">


<table width="500">
    <tr>
        <td>
            <form action="{{ url_for('upload') }}", method="POST" class="dropzone"></form>
        </td>
    </tr>
</table>

ИЗМЕНИТЬ

Вот пример данных CSV, которые я загружаю:

Person,Count
A,10
B,12
C,13

Complete.html

<html>

<body>

{{table | safe }}

</body>
</html>

Ответы

Ответ 1

Dropzone.js использует AJAX для отправки данных, поэтому он не возвращает управление вашей функции просмотра.

Существует два способа перенаправления (или рендеринга) при всех загрузках файлов.

  • Вы можете добавить кнопку для перенаправления.

    <a href="{{ url_for('upload') }}">Upload Complete</a>

  • Вы можете добавить прослушиватель событий на страницу автоматической переадресации (используйте jQuery).

    <script>
Dropzone.autoDiscover = false;

$(function() {
  var myDropzone = new Dropzone("#my-dropzone");
  myDropzone.on("queuecomplete", function(file) {
    // Called when all files in the queue finish uploading.
    window.location = "{{ url_for('upload') }}";
  });
})
</script>

В функции просмотра добавьте оператор if, чтобы проверить, был ли метод HTTP POST:

import os
from flask import Flask, render_template, request

app = Flask(__name__)
app.config['UPLOADED_PATH'] = os.getcwd() + '/upload'

@app.route('/')
def index():
    # render upload page
    return render_template('index.html')


@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        for f in request.files.getlist('file'):
            f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
    return render_template('your template to render')

Ответ 2

Ваш код работает. Ваш шаблон будет отображаться и возвращаться.

Dropzone загрузит файлы, которые вы перетаскиваете в свой браузер в фоновом режиме. Он будет использовать ответ от сервера и оставить страницу как. Он использует ответ от сервера, чтобы узнать, была ли загрузка успешной.

Чтобы увидеть это в действии:

  • Перейдите на страницу
  • Откройте свои любимые инструменты для браузера; (в firefox нажмите CTRL + SHIFT + K)
  • Выберите вкладку сети
  • Перетащите ваш csv в панель dropzone и обратите внимание, что запрос отображается в сетевой таблице dev tools

Вот скриншот из моего браузера. Я скопировал ваш код как есть из вашего вопроса.

Снимок экрана рабочего кодa

Чтобы на самом деле увидеть рендер complete.html, вам нужно будет добавить еще одну конечную точку флэшки и иметь способ перейти к ней.

Например: в upload1.html добавить:

<a href="{{ url_for('upload_complete') }}">Click here when you have finished uploading</a>

в init.py измените и добавьте:

def upload():

    ...

        # you do not need to read_csv in upload()
        #upload the file
        #df = pd.read_csv(destination)
        #table += df.to_html()

    return "OK"
    # simply returning HTTP 200 is enough for dropzone to treat it as successful
    # return render_template('complete.html', table=table)

# add the new upload_complete endpoint
# this is for example only, it is not suitable for production use
@app.route('/upload-complete')
def upload_complete():
    target = os.path.join(APP_ROOT, 'uploads/')
    table=""
    for file_name in os.listdir(target):
        df = pd.read_csv(file_name)
        table += df.to_html()
    return render_template('complete.html', table=table)