diff --git a/.gitignore b/.gitignore index 5c741c7c..5c357bc9 100644 --- a/.gitignore +++ b/.gitignore @@ -114,4 +114,6 @@ docs/_build/ # Upload file demos/form/uploads/* -!demos/form/uploads/.gitkeep \ No newline at end of file +!demos/form/uploads/.gitkeep +examples/album/uploads/* +!examples/album/uploads/.gitkeep diff --git a/examples/album/app.py b/examples/album/app.py new file mode 100644 index 00000000..d930a7b9 --- /dev/null +++ b/examples/album/app.py @@ -0,0 +1,49 @@ +import os +import uuid + +from flask import Flask, render_template, flash, session, redirect, url_for, send_from_directory +from flask_wtf import FlaskForm +from wtforms import SubmitField +from flask_wtf.file import FileField, FileRequired, FileAllowed, FileSize + +app = Flask(__name__) +app.config['UPLOAD_PATH'] = os.path.join(app.root_path, 'uploads') +app.config['SECRET_KEY'] = 'dev' + + +class UploadPhotoForm(FlaskForm): + photo = FileField('Upload Photo', validators=[ + FileRequired(), + FileAllowed(['jpg', 'jpeg', 'png', 'gif']), + FileSize(5 * 1024 * 1024) + ]) + submit = SubmitField() + + +def random_filename(origin_filename): + ext = os.path.splitext(origin_filename)[1] + new_filename = f'{uuid.uuid4().hex}{ext}' + return new_filename + + +@app.route('/') +def index(): + return render_template('index.html') + + +@app.route('/photos/') +def get_photo(filename): + return send_from_directory(app.config['UPLOAD_PATH'], filename) + + +@app.route('/upload', methods=['GET', 'POST']) +def upload(): + form = UploadPhotoForm() + if form.validate_on_submit(): + photo = form.photo.data + filename = random_filename(photo.filename) + photo.save(os.path.join(app.config['UPLOAD_PATH'], filename)) + flash('Upload success.') + session['photos'] = [filename] + return redirect(url_for('index')) + return render_template('upload.html', form=form) diff --git a/examples/album/static/favicon.ico b/examples/album/static/favicon.ico new file mode 100644 index 00000000..096f1796 Binary files /dev/null and b/examples/album/static/favicon.ico differ diff --git a/examples/album/static/style.css b/examples/album/static/style.css new file mode 100644 index 00000000..a77a7ec3 --- /dev/null +++ b/examples/album/static/style.css @@ -0,0 +1,62 @@ +body { + margin: auto; + width: 750px; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333; +} + +nav li { + float: left; +} + +nav li a { + display: block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +nav li a:hover { + background-color: #111; +} + +main { + padding: 10px 20px; +} + +.alert { + position: relative; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: 0.25rem; + color: #004085; + background-color: #cce5ff; + border-color: #b8daff; +} + +.error { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + +img { + max-width: 100%; +} + +footer { + font-size: 13px; + color: #888; + border-top: 1px solid #eee; + margin-top: 25px; + text-align: center; + padding: 20px; +} diff --git a/examples/album/templates/base.html b/examples/album/templates/base.html new file mode 100644 index 00000000..494acf70 --- /dev/null +++ b/examples/album/templates/base.html @@ -0,0 +1,37 @@ + + + + + {% block head %} + + {% block title %}HelloFlask - File Upload Example{% endblock %} + + {% block styles %} + + {% endblock %} + {% endblock %} + + + + +
+ {% for message in get_flashed_messages() %} +
{{ message }}
+ {% endfor %} + {% block content %}{% endblock %} +
+ + + + diff --git a/examples/album/templates/index.html b/examples/album/templates/index.html new file mode 100644 index 00000000..ca10b1b3 --- /dev/null +++ b/examples/album/templates/index.html @@ -0,0 +1,12 @@ +{% extends 'base.html' %} + +{% block content %} +

← Return

+{% if session.photos %} + {% for filename in session.photos %} + + {% endfor %} +{% else %} +

No photos uploaded yet.

+{% endif %} +{% endblock %} diff --git a/examples/notebook/templates/_macros.html b/examples/album/templates/macros.html similarity index 96% rename from examples/notebook/templates/_macros.html rename to examples/album/templates/macros.html index 67bacfde..450efe27 100644 --- a/examples/notebook/templates/_macros.html +++ b/examples/album/templates/macros.html @@ -1,13 +1,13 @@ -{% macro form_field(field) %} -{{ field.label }}
-{% if field.flags.required %} - {{ field(required='required', **kwargs) }}
-{% else %} - {{ field(**kwargs) }}
-{% endif %} -{% if field.errors %} - {% for error in field.errors %} - {{ error }}
- {% endfor %} -{% endif %} -{% endmacro %} +{% macro form_field(field) %} +{{ field.label }}
+{% if field.flags.required %} + {{ field(required='required', **kwargs) }}
+{% else %} + {{ field(**kwargs) }}
+{% endif %} +{% if field.errors %} + {% for error in field.errors %} + {{ error }}
+ {% endfor %} +{% endif %} +{% endmacro %} diff --git a/examples/album/templates/upload.html b/examples/album/templates/upload.html new file mode 100644 index 00000000..7142b444 --- /dev/null +++ b/examples/album/templates/upload.html @@ -0,0 +1,10 @@ +{% extends 'base.html' %} +{% from 'macros.html' import form_field %} + +{% block content %} +
+ {{ form.csrf_token }} + {{ form_field(form.photo) }} + {{ form.submit }} +
+{% endblock %} diff --git a/examples/album/uploads/.gitkeep b/examples/album/uploads/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/examples/notebook/templates/edit_note.html b/examples/notebook/templates/edit_note.html index 0eb74886..6a4a3bf9 100644 --- a/examples/notebook/templates/edit_note.html +++ b/examples/notebook/templates/edit_note.html @@ -1,15 +1,15 @@ -{% extends 'base.html' %} -{% from '_macros.html' import form_field %} - -{% block title %}Edit Note{% endblock %} - -{% block content %} -

Edit Note

- -
- {{ form.csrf_token }} - {{ form_field(form.title) }} - {{ form_field(form.body, rows=5, cols=50) }} - {{ form.submit }}
-
-{% endblock %} +{% extends 'base.html' %} +{% from 'macros.html' import form_field %} + +{% block title %}Edit Note{% endblock %} + +{% block content %} +

Edit Note

+ +
+ {{ form.csrf_token }} + {{ form_field(form.title) }} + {{ form_field(form.body, rows=5, cols=50) }} + {{ form.submit }}
+
+{% endblock %} diff --git a/examples/notebook/templates/macros.html b/examples/notebook/templates/macros.html new file mode 100644 index 00000000..450efe27 --- /dev/null +++ b/examples/notebook/templates/macros.html @@ -0,0 +1,13 @@ +{% macro form_field(field) %} +{{ field.label }}
+{% if field.flags.required %} + {{ field(required='required', **kwargs) }}
+{% else %} + {{ field(**kwargs) }}
+{% endif %} +{% if field.errors %} + {% for error in field.errors %} + {{ error }}
+ {% endfor %} +{% endif %} +{% endmacro %} diff --git a/examples/notebook/templates/new_note.html b/examples/notebook/templates/new_note.html index cfa3ede8..d84df5ca 100644 --- a/examples/notebook/templates/new_note.html +++ b/examples/notebook/templates/new_note.html @@ -1,15 +1,15 @@ -{% extends 'base.html' %} -{% from '_macros.html' import form_field %} - -{% block title %}New Note{% endblock %} - -{% block content %} -

New Note

- -
- {{ form.csrf_token }} - {{ form_field(form.title) }} - {{ form_field(form.body, rows=5, cols=50) }} - {{ form.submit }}
-
-{% endblock %} +{% extends 'base.html' %} +{% from 'macros.html' import form_field %} + +{% block title %}New Note{% endblock %} + +{% block content %} +

New Note

+ +
+ {{ form.csrf_token }} + {{ form_field(form.title) }} + {{ form_field(form.body, rows=5, cols=50) }} + {{ form.submit }}
+
+{% endblock %}