I have a simple one-page Flask app that has a Dropzone.js drop zone at the top of the page (through Flask-Dropzone) and renders previews of all previously uploaded files in a table underneath. As of now, the user must reload the page after an upload in order for the table underneath to update. I know I can set the page to reload after upload automatically and re-render the template, but I was hoping to asynchronously update the table after each file is processed (for example, if the user uploads 5 files at once and they are being processed in parallel, it would kinda suck if the page reloaded on them 5 times).
Here is my barebones code.
app.py
# app.py
app = Flask(__name__, template_folder = "./templates", static_folder="/")
"""
Uploader
"""
# dropzone for uploader
dropzone = Dropzone(app)
app.config["DROPZONE_MAX_FILE_SIZE"] = 1000 # max file size for now is 1 gb
app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image/*' # only images
@app.route("/", methods=["GET", "POST"])
def home():
# get all of users files
files = get_files()
return render_template("index.html", files = files)
@app.route("/update_table", methods=["GET"])
def update_table():
# IDEALLY this would return either the updated table or the updated entry
@app.route("/upload", methods=["POST"])
def upload():
if request.method == 'POST':
#save file locally
return render_template("index.html")
if __name__ == "__main__":
app.run(port=8008, debug=True)
index.html
<head>
{{ dropzone.load_css() }}
{{ dropzone.style('border: 2px solid blue; background-color: blue; margin: 0') }}
</head>
<body>
{{ dropzone.create(action='upload') }}
<table id="user_files">
<!-- THIS TABLE SHOULD UPDATE ON EACH DROPZONE UPLOAD -->
{% for file in files %}
<tr>
<td>{{file[0]}}</td>
<td>{{file[1]}}</td>
</tr>
{% endfor %}
</table>
{{ dropzone.load_js() }}
{{ dropzone.config() }}
</body>
I figure the solution is some sort of Ajax modification to the Flask-Dropzone config, I'm just new to Ajax so apologies for not offering more in advance.