Dropzone doesn't redirect after upload to Flask app
Question
I'm writing a resource to upload files to a Flask app using Dropzone. After files are uploaded the app should redirect to the hello world page. This is not happening and the app is stuck on the view that uploaded the files. I'm using jQuery 3.1.0 and Dropzone from master.
from flask import Flask, request, flash, redirect, url_for render_template)
from validator import Validator
ALLOWED_EXTENSIONS = set(['csv', 'xlsx', 'xls'])
def allowed_file(filename):
return (filename != '') and ('.' in filename) and \
(filename.split('.')[-1] in ALLOWED_EXTENSIONS)
def create_app():
app = Flask(__name__)
app.secret_key = 'super secret key'
return app
app = create_app()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/world')
def hello_world():
return render_template('hello_world.html')
@app.route('/upload', methods=['POST'])
def upload():
# check that a file with valid name was uploaded
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if not allowed_file(file.filename):
flash('No selected file')
return redirect(request.url)
# import ipdb; ipdb.set_trace()
validator = Validator(file)
validated = validator.validate()
if validated:
flash('Success')
else:
flash('Invalid file')
return redirect(url_for('hello_world'))
if __name__ == '__main__':
app.run(debug=True)
{% extends "base.html" %}
{% block head %}
<link href="/static/css/dropzone.css" rel="stylesheet">
<script src="/static/js/dropzone.js"></script>
{% endblock %}
{% block body %}
<main>
<section>
<div id="dropzone">
<form action="upload" method="post" class="dropzone dz-clickable" id="demo-upload" multiple>
<div class="dz-message">
Drop files here or click to upload.
</div>
</form>
</div>
</section>
</main>
{% endblock %}
2 answers
solution1
0 2016-07-27 19:22:24
I'm not too familiar with dropzone, but I will give you an example from one of my flask applications that uses file uploading. I'm just using the standard HTML upload form. Hopefully from here you should be able to get an idea of what's going on.
Note, I'm not using a template for my file uploading.
def index():
return """<center><body bgcolor="#FACC2E">
<font face="verdana" color="black">
<title>TDX Report</title>
<form action="/upload" method=post enctype=multipart/form-data>
<p><input type=file name=file>
<input type=submit value=Upload>
</form></center></body>"""
# here is my function that deals with the file that was just uploaded
@app.route('/upload', methods = ['GET', 'POST'])
def upload():
if request.method == 'POST':
f = request.files['file']
f.save(f.filename)
# process is the function that i'm sending the file to, which in this case is a .xlsx file
return process(f.filename)
This line is where I'm setting the route path for post file upload:
<form action="/upload" method=post enctype=multipart/form-data>
Your issue could be that this line: <form action="upload" method="post" class="dropzone dz-clickable" id="demo-upload" multiple> is missing the / before upload .
solution2
0 2016-09-16 10:31:33
I had similar problem in my flask application and I solved it with following jQuery function:
Dropzone.options.myDropzone = {
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#upload-button");
myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
});
this.on("sending", function() {
$("#myDropzone").submit()
});
}
};
Parameter "sending" is called just before file is send so I can submit my dropzone form. With this all redirects in my flask app works fine.
Piece of my html code for clarity:
<form action="/" method="POST" class="dropzone" id="myDropzone" enctype="multipart/form-data">
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.