Dropzone.jsはFlaskのテンプレートのレンダリングを防止します

私はDropzone.jsを使用してウェブサイトからCSV個のファイルのドラッグアンドドロップアップロードを許可しています。アップロードプロセスは素晴らしいです。アップロードしたファイルを指定したフォルダに保存し、df.to_html()を使用してdataframeをHTMLコードに変換してからテンプレートに渡します。コード内のその点に到達しますが、テンプレートをレンダリングせず、エラーもスローされません。だから私の質問は、Dropzone.jsは、レンダリングが起こっているのを防ぐのですか？Dropzone.jsはFlaskのテンプレートのレンダリングを防止します

render_templateを使用せずにテーブルからHTMLコードを返してみましたが、これも機能しません。

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

EDITここ

は私がサンプルcsvデータアップロードしていますされています

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

Complete.html

<html> 

<body> 

{{table | safe }} 

</body> 
</html>

出典

2017-02-07 user2242044

戻る前に実行します。なぜあなたはDropzone.jsが何かをやっていると思いますか？ JavaScriptはクライアント上で動作し、FlaskとJinjaはサーバー上で個別に実行されます。 – davidism

@davidism。 'forループ'の内部にいるのは間違いありません。私はバックデントによってそれを修正しましたが、同じ問題がまだあります。私はそれが 'dropzone.js'であるかどうかはわかりませんが、削除のプロセスが原因であると私は信じています。そのルートをコピーし、 'html'を読み込んで私のハードドライブから' csv'ファイルを読み出すと、うまく動作します。 – user2242044

'complete.html'の内容は何ですか？ – HassenPy

Dropzone.jsはそれが戻って与えることはありません理由です、データを投稿するAJAXを使用ビューコントロールへのコントロール。

すべてのファイルのアップロードが完了したときに、リダイレクト（またはテンプレートのレンダリング）する方法は2つあります。

リダイレクトするボタンを追加できます。

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

、HTTPメソッドがあったかどうかをチェックするifステートメントを追加POST：

あなたのreturn文は、ループの最初の反復が意志forループの内側にある

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

出典

2017-02-16 04:06:53

あなたのコードは作業を行います。テンプレートがレンダリングされ、返されます。

Dropzoneはあなたがブラウザにドラッグアンドドロップしたファイルを「バックグラウンドで」アップロードします。 サーバーからの応答を消費し、ページをそのままのままにします。サーバーからの応答を使用して、アップロードが成功したかどうかを確認します。 ;

移動し、あなたのページへ
お気に入りのブラウザの開発ツールを開きます。この動作を確認するには

（FirefoxのプレスCtrl + Shiftキー+ Kで）
ドロップゾーンのペインにネットワーク]タブ
ドラッグしますcsvファイルを選択し、要求がここでのdevのツールのネットワークテーブルに

を示したスクリーンショットであることに注意してください私のブラウザから。私はあなたの質問からのあなたのコードをコピーしました。

実際にレンダリングさcomplete.htmlあなたは別のフラスコエンドポイントを追加し、それにナビゲートするための方法を持っている必要がありますを参照してください。例えば

： upload1.htmlで追加：

init.py変化

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

および追加：

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)

出典

2017-02-11 03:25:07

ありがとう、素晴らしい答え。私はリンクを追加してしまった。自動レンダリングする必要はありませんか？ – user2242044

Dropzone.jsはFlaskのテンプレートのレンダリングを防止します

答えて

関連する問題