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>
