Dropzone.js prevents Flask from rendering template

Your code does work. Your template will be rendered and returned.

Dropzone will upload files you drag and drop into your browser 'in the background'. It will consume the response from the server and leave the page as is. It uses the response from the server to know if the upload was successful.

To see this in action:

• Navigate to your page
• Open up your favourite browser dev tools; (in firefox press CTRL+SHIFT+K)
• Select the network tab
• Drag your csv into the dropzone pane and note that the request shows in the dev tools network table

Here is a screen shot from my browser. I copied your code as is from your question.

To actually see the rendered complete.html you will need to add another flask endpoint and have a way to navigate to that.

For example: in upload1.html add:

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

in init.py change and add:

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)

Update: Now you can use Flask-Dropzone, a Flask extension that integrates Dropzone.js with Flask. For this issue, you can set DROPZONE_REDIRECT_VIEW to the view you want to redirect when uploading complete.

---

Dropzone.js use AJAX to post data, that's why it will not give back the control to your view function.

There are two methods to redirect (or render template) when all files were complete uploading.

• You can add a button to redirect.

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

• You can add an event listener to automatic redirect page (use 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>
  

In view function, add an if statement to check whether the HTTP method was POST:

import os
from flask import Flask, render_template, request

app = Flask(__name__)
app.config['UPLOADED_PATH'] = 'the/path/to/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('the/path/to/upload', f.filename))
    return render_template('your template to render')