Sending Data from Python (Flask) to Javascript?

Question

I am trying to implement a drag and drop file uploader on my website. Files are uploaded immediately after they are dropped, and I would like to generate a URL with flask that will pop up under the previews. I am using dropzone.js. In the documentation for dropzone a sample is provided as a guide for sending data back from the server to be displayed after a file uploads. https://github.com/enyo/dropzone/wiki/FAQ#i-want-to-display-additional-information-after-a-file-uploaded

However, when I try to use url_for in the inline Javascript in my Jinja template that creates the dropzone, I am getting back a link that looks like /%7Bfilename%7D Just to be sure I popped a quick print statement in there for the URL, and it comes out fine in the console.

My uploader in python:

def upload_file():
if request.method == 'POST': 
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        if is_image(file.filename): # generates a shortened UUID name for the image
            filename = shortuuid.uuid()[:7] + "." + file.filename.rsplit(".", 1)[1]
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

@app.route ('/<filename>')
def uploaded_image(filename): 
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

and the inline JS in my index.html template:

<script>
var mydropzone = new Dropzone(document.body, {
    url: "{{url_for('upload_file')}}",
    previewsContainer: "#previews",
    clickable: "#clickable", 
     init: function() {
    this.on("success", function(file, responseText) {
        var responseText =  " {{ url_for('uploaded_image', filename='{filename}')}} "; 
        var span = document.createElement('span'); 
        span.setAttribute("style", "position: absolute; bottom: -50px; left: 3px; height: 28px; line-height: 28px;   ")
        span.innerHTML = responseText;
        file.previewTemplate.appendChild(span);

    });
}


});

Am I missing something fundamental here? Do I need to use something like JSON/Ajax (never worked with these but Googling always brought them up), because the URL is data send back from the server?

Answer 1

Simply:

1. Return the file path to the client:

    def upload_file(): if request.method == 'POST': # ... snip ... return url_for('uploaded_image', filename=filename) 

2. Remove the var responseText line in your on('success') function, since you will be getting the URL back in the response.

Answer 2

You are very close to getting it, but you will have to send the URL over JSON.

The issue is that you call url_for('uploaded_image') when the page first loads (in the Jinja template), before the URL is actually available. It is thinking you are asking for the url for a file called {filename} .

Try returning a JSON response from your POST request which has the new URL:

return jsonify({'fileURL':url_for('uploaded_image', filename=filename)})

From there, you can do whatever you would like with JS. What you have should work, just get the URL from responseText.

EDIT: Fixed return.