Как динамически добавлять строки в HTML-таблицу после загрузки файлов с помощью Dropzone без обновления страницы? - PullRequest
Новая
       11

Как динамически добавлять строки в HTML-таблицу после загрузки файлов с помощью Dropzone без обновления страницы?

0 голосов
/ 13 февраля 2019

Я новичок в колбе и дропзоне.

Я создал приложение flask, используя dropzone, чтобы позволить пользователю удалять файлы.Я извлекаю текст из удаленных файлов, и извлеченный текст поступит в мой веб-сервис Azure ML для классификации документов.Этот веб-сервис вернет Prediction result и Scored probabilities, которые я хочу отобразить пользователю в HTML-таблице.

Здесь у пользователя будет веб-страница с drop interface и пустым html table.Пользователь удалит файл, и результат появится в виде строки таблицы.Я не хочу перенаправлять на новую страницу, потому что пользователь может загрузить несколько файлов (например, 100 файлов), и только несколько файлов будут обработаны (например, 5 файлов параллельно).Таким образом, результаты для каждого запроса должны быть строкой таблицы, и каждая строка должна добавляться к таблице.

Ниже приведены мои файлы:

flask-interface.py 

from flask import Flask, render_template, request, redirect
from flask_dropzone import Dropzone
from flask_uploads import UploadSet, configure_uploads, patch_request_class, ALL

url = 'azure url'
api_key = 'api key'
headers = {'Content-Type':'application/json', 'Authorization':('Bearer '+ api_key)}

app = Flask(__name__)
dropzone = Dropzone(app)

# Dropzone settings
app.config['DROPZONE_UPLOAD_MULTIPLE'] = True
app.config['DROPZONE_PARALLEL_UPLOADS'] = 5
app.config['TEMPLATES_AUTO_RELOAD'] = True

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        for key, f in request.files.items():
            // save files

        // Calling Azure Web Service

        // Reading response
        return render_template('result.html', result=response)
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

index.html 

<!DOCTYPE html>
<html>
    <head>
    <title>Flask Interface</title>
        {{ dropzone.load() }}
        {{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 200px;') }}
    </head>
    <body>
        <h2>Please Drag and Drop file(s) to test ML Studio web service.</h2>
        {{ dropzone.create(action_view='index') }}
        <div id="content">
            <table>
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Prediction Result</th>
                        <th>Score Probability</th>
                    </tr>
                </thead>            
                <tbody>
                {% block content %}{% endblock %}
                </tbody>
            </table>
        </div>
    </body>
</html>

result.html 

{% extends "index.html" %}
{% block content %}
    {% for dict in result %}
        <tr>
            <td></td>
            <td>{{ dict['Scored Labels'] }}</td>
            <td>{{ dict['Scored Probabilities'] }}</td>
        </tr>
    {% endfor %}
{% endblock %}

result.html является потомком index.html и пытается динамически добавлять строки.

Как добавить ответ в виде строк внутри существующей таблицы без обновления страницы?

1 Ответ

0 голосов
/ 13 февраля 2019

Вместо выполнения return render_template('result.html', result=response) вы можете вернуть Response, содержащий эту информацию.Я не очень знаком с dropzone, но я собираюсь предположить, что у него есть возможность добавить некоторую функцию обратного вызова JavaScript для него, когда сервер фляги возвращает ответ.Что-то в строках 

dropzone.onResponse((response) => {
  const rows = convertResponseToRows();
  const table = document.getElementById('the-table');
  rows.forEach((row) => addRowToTable(table, row));
});
...