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

Я использую Dropzone.js чтобы разрешить перетаскивание файлов CSV через веб-сайт Flask . Процесс загрузки отлично работает. Я сохраняю загруженный файл в указанную папку и затем могу использовать df.to_html() для преобразования данных в 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="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css"> <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>

2 Solutions collect form web for “Dropzone.js предотвращает создание шаблона Flask”

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')

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

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

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

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

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

Снимок экрана с использованием кода

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

Например: в upload1.html add:

 <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)