search

helloflask / flask-dropzone

Upload files in Flask application with Dropzone.js.
https://flask-dropzone.readthedocs.io
MIT License
250 stars 69 forks source link

Pass a variable (filename or message) to the template (frontend) after file uploaded #41

Closed Asa-Nisi-Masa closed 3 years ago

Asa-Nisi-Masa commented 3 years ago

Hello. I'm unable to pass a variable to a template after a file upload. The code is modified basic example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flask-Dropzone Demo: Basic</title>
  {{ dropzone.load_css() }}
  {{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 400px;') }}
</head>
<body>
  {{ dropzone.create(action='upload') }}
  {{ dropzone.load_js() }}
  {{ dropzone.config() }}

  {% if message %}
    <p>{{message}}</p>
  {% endif %}
</body>
</html>

and the Python side

app.py

import os

from flask import Flask, render_template, request
from flask_dropzone import Dropzone

basedir = os.path.abspath(os.path.dirname(__file__))

app = Flask(__name__)

app.config.update(
    UPLOADED_PATH=os.path.join(basedir, 'uploads'),
    # Flask-Dropzone config:
    DROPZONE_ALLOWED_FILE_CUSTOM=True,
    DROPZONE_ALLOWED_FILE_TYPE='.csv',
    DROPZONE_MAX_FILE_SIZE=3,
    DROPZONE_MAX_FILES=30,
    DROPZONE_REDIRECT_VIEW='upload'  # set redirect view
)

dropzone = Dropzone(app)

@app.route('/', methods=['POST', 'GET'])
def upload():
    message = None
    print(request.method, request.files)

    if request.method == "POST":
        # do something with the file ...
        message = "done processing file"

    return render_template('index.html', message=message)

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

But no 'message' is rendered. Basically the problem is that the only time the backend sees the uploaded file is when the request method is POST, but then for some reason the message=message argument does not work - nothing changes on the webpage. The only way to pass a variable to a template is when the request method is GET but then the backend does not see the uploaded file... Any ideas how to solve this?

greyli commented 3 years ago

Dropzone.js will upload file in asynchronous AJAX request, it will not update the page with your response. If you just want to send a success message, you can return the message directly:

from flask import jsonify

@app.route('/', methods=['POST', 'GET'])
def upload():
    message = None
    print(request.method, request.files)

    if request.method == "POST":
        # do something with the file ...
        message = "done processing file"
        return jsonify(message=message)  # <--

    return render_template('index.html')

then listen to success event on client-side to receive the response (and do something with it):

{{ dropzone.config(custom_options="success: function(file, response){ alert(response.message); }") }}