image.png
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_TYPE='image', DROPZONE_MAX_FILE_SIZE=3, DROPZONE_MAX_FILES=30, DROPZONE_IN_FORM=True, DROPZONE_UPLOAD_ON_CLICK=True, DROPZONE_UPLOAD_ACTION='handle_upload', # URL or endpoint DROPZONE_UPLOAD_BTN_ID='submit', )
dropzone = Dropzone(app)
@app.route('/') def index(): return render_template('index.html')
@app.route('/upload', methods=['POST']) def handle_upload(): for key, f in request.files.items(): if key.startswith('file'): f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename)) return '', 204
@app.route('/form', methods=['POST']) def handle_form(): title = request.form.get('title') description = request.form.get('description') return 'file uploaded and form submit title: %s description: %s' % (title, description)
if name == 'main': app.run(debug=True)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flask-Dropzone Demo: In Form</title> {{ dropzone.load_css() }} {{ dropzone.style('border: 2px dashed #0087F7; margin: 10px 0 10px; min-height: 400px; width: 800px') }} </head> <body> <h1>New Album</h1> <form action="{{ url_for('handle_form') }}" enctype="multipart/form-data" method="post"> <label for="title">Title</label> <input type="text" id="title" name="title"/> <label for="description">Description</label> <input type="text" id="description" name="description"/> {{ dropzone.create() }} <input type="submit" id="submit" value="Submit and Upload"> </form> {{ dropzone.load_js() }} {{ dropzone.config() }} </body> </html>
