2017-02-07 12 views
10

मैं Dropzone.js का उपयोग कर CSV फ़ाइलों को Flask वेबसाइट के माध्यम से खींचने और ड्रॉप करने की अनुमति देने के लिए उपयोग कर रहा हूं। अपलोड प्रक्रिया बहुत अच्छा काम करता है। मैं अपलोड की गई फ़ाइल को अपने निर्दिष्ट फ़ोल्डर में सहेजता हूं और फिर को HTML कोड में परिवर्तित करने के लिए df.to_html() का उपयोग कर सकता हूं, जिसे मैं अपने टेम्पलेट में भेजता हूं। यह कोड में उस बिंदु पर आता है, लेकिन यह टेम्पलेट प्रस्तुत नहीं करता है और कोई त्रुटि नहीं फेंक दी जाती है। तो मेरा सवाल यह है कि Dropzone.js क्यों होने से रोक रहा है?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> 
+0

आपका वापसी कथन पाश के लिए एक के अंदर है, केवल पाश की पहली यात्रा होगी लौटने से पहले भागो। आपको लगता है कि Dropzone.js कुछ भी क्यों कर रहा है? सर्वर पर जावास्क्रिप्ट चलाता है, फ्लास्क और जिन्जा सर्वर पर अलग-अलग चलाते हैं। – davidism

+0

@ डेविडिज्म। आप 'लूप' के अंदर होने के बारे में सही हैं। मैंने तय किया कि बैकडेंटिंग द्वारा, लेकिन अभी भी एक ही समस्या है। मुझे यकीन नहीं है कि यह 'dropzone.js' है, लेकिन मेरा मानना ​​है कि यह उन्मूलन की प्रक्रिया के कारण है। अगर मैं उस मार्ग की प्रतिलिपि बनाता हूं और 'html' को अपने हार्डड्राइव से 'csv' फ़ाइल पढ़ने से लोड करता हूं तो यह ठीक काम करता है। – user2242044

+0

'full.html' के लिए सामग्री क्या है? – HassenPy

उत्तर

3

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> 
    

दृश्य समारोह में, जाँच करने के लिए HTTP विधि थी कि क्या एक if बयान जोड़ने 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') 
5

आपका कोड काम करता है। आपका टेम्पलेट प्रस्तुत किया जाएगा और लौटाया जाएगा।

ड्रॉपज़ोन उन फ़ाइलों को अपलोड करेगा जिन्हें आप खींचते हैं और पृष्ठभूमि में अपने ब्राउज़र में ड्रॉप करते हैं। यह सर्वर से प्रतिक्रिया का उपभोग करेगा और पृष्ठ को के रूप में छोड़ देगा। यह पता लगाने के लिए सर्वर से प्रतिक्रिया का उपयोग करता है कि अपलोड सफल हुआ था या नहीं।

कार्रवाई में यह देखने के लिए:

  • नेविगेट अपने पृष्ठ
  • अपने पसंदीदा ब्राउज़र देव उपकरण को खोलने के लिए; (Ctrl + Shift + K फ़ायरफ़ॉक्स प्रेस में)
  • नेटवर्क टैब
  • खींचें अपने csv dropzone फलक में का चयन करें और ध्यान दें कि अनुरोध देव उपकरण नेटवर्क तालिका

यहाँ में चलता एक स्क्रीन शॉट है मेरे ब्राउज़र से मैंने आपके कोड से आपके कोड की प्रतिलिपि बनाई है।

Screen shot of code working

वास्तव में देखने के लिए प्रदान की गई 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) 
+0

धन्यवाद, महान जवाब। मैंने एक लिंक जोड़ना समाप्त कर दिया। ऑटो रेंडर करने का कोई तरीका नहीं है? – user2242044

संबंधित मुद्दे