Add file upload example

greyli · May 16, 2024 · 52a528e · 52a528e
1 parent 73c697f
commit 52a528e
Show file tree

Hide file tree

Showing 12 changed files with 229 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -114,4 +114,6 @@ docs/_build/
 
 # Upload file
 demos/form/uploads/*
-!demos/form/uploads/.gitkeep
+!demos/form/uploads/.gitkeep
+examples/album/uploads/*
+!examples/album/uploads/.gitkeep
diff --git a/examples/album/app.py 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/<path:filename>')
+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
diff --git a/examples/album/static/style.css 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
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  {% block head %}
+  <meta charset="utf-8">
+  <title>{% block title %}HelloFlask - File Upload Example{% endblock %}</title>
+  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+  {% block styles %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">
+  {% endblock %}
+  {% endblock %}
+</head>
+
+<body>
+  <nav>
+    <ul>
+      <li><a href="{{ url_for('index') }}">HelloFlask</a></li>
+    </ul>
+  </nav>
+  <main>
+    {% for message in get_flashed_messages() %}
+    <div class="alert">{{ message }}</div>
+    {% endfor %}
+    {% block content %}{% endblock %}
+  </main>
+  <footer>
+    {% block footer %}
+    <small> &copy; 2023 <a href="https://greyli.com">Grey Li</a> /
+      <a href="https://github.com/greyli/helloflask">GitHub</a> /
+      <a href="https://helloflask.com">HelloFlask</a>
+    </small>
+    {% endblock %}
+  </footer>
+</body>
+
+</html>
diff --git a/examples/album/templates/index.html b/examples/album/templates/index.html
@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<p><a href="{{ url_for('upload') }}">&larr; Return</a></p>
+{% if session.photos %}
+  {% for filename in session.photos %}
+  <img src="{{ url_for('get_photo', filename=filename) }}">
+  {% endfor %}
+{% else %}
+  <p>No photos uploaded yet.</p>
+{% endif %}
+{% endblock %}
diff --git a/examples/notebook/templates/_macros.html → examples/album/templates/macros.html b/examples/notebook/templates/_macros.html → examples/album/templates/macros.html
@@ -1,13 +1,13 @@
-{% macro form_field(field) %}
-{{ field.label }}<br>
-{% if field.flags.required %}
-  {{ field(required='required', **kwargs) }}<br>
-{% else %}
-  {{ field(**kwargs) }}<br>
-{% endif %}
-{% if field.errors %}
-  {% for error in field.errors %}
-  <small class="error">{{ error }}</small><br>
-  {% endfor %}
-{% endif %}
-{% endmacro %}
+{% macro form_field(field) %}
+{{ field.label }}<br>
+{% if field.flags.required %}
+  {{ field(required='required', **kwargs) }}<br>
+{% else %}
+  {{ field(**kwargs) }}<br>
+{% endif %}
+{% if field.errors %}
+  {% for error in field.errors %}
+  <small class="error">{{ error }}</small><br>
+  {% endfor %}
+{% endif %}
+{% endmacro %}
diff --git a/examples/album/templates/upload.html b/examples/album/templates/upload.html
@@ -0,0 +1,10 @@
+{% extends 'base.html' %}
+{% from 'macros.html' import form_field %}
+
+{% block content %}
+<form method="post" enctype="multipart/form-data">
+  {{ form.csrf_token }}
+  {{ form_field(form.photo) }}
+  {{ form.submit }}
+</form>
+{% endblock %}
diff --git a/examples/album/uploads/.gitkeep b/examples/album/uploads/.gitkeep
diff --git 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 %}
-<h3>Edit Note</h3>
-
-<form method="post">
-  {{ form.csrf_token }}
-  {{ form_field(form.title) }}
-  {{ form_field(form.body, rows=5, cols=50) }}
-  {{ form.submit }}<br>
-</form>
-{% endblock %}
+{% extends 'base.html' %}
+{% from 'macros.html' import form_field %}
+
+{% block title %}Edit Note{% endblock %}
+
+{% block content %}
+<h3>Edit Note</h3>
+
+<form method="post">
+  {{ form.csrf_token }}
+  {{ form_field(form.title) }}
+  {{ form_field(form.body, rows=5, cols=50) }}
+  {{ form.submit }}<br>
+</form>
+{% endblock %}
diff --git a/examples/notebook/templates/macros.html b/examples/notebook/templates/macros.html
@@ -0,0 +1,13 @@
+{% macro form_field(field) %}
+{{ field.label }}<br>
+{% if field.flags.required %}
+  {{ field(required='required', **kwargs) }}<br>
+{% else %}
+  {{ field(**kwargs) }}<br>
+{% endif %}
+{% if field.errors %}
+  {% for error in field.errors %}
+  <small class="error">{{ error }}</small><br>
+  {% endfor %}
+{% endif %}
+{% endmacro %}
diff --git 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 %}
-<h3>New Note</h3>
-
-<form method="post">
-  {{ form.csrf_token }}
-  {{ form_field(form.title) }}
-  {{ form_field(form.body, rows=5, cols=50) }}
-  {{ form.submit }}<br>
-</form>
-{% endblock %}
+{% extends 'base.html' %}
+{% from 'macros.html' import form_field %}
+
+{% block title %}New Note{% endblock %}
+
+{% block content %}
+<h3>New Note</h3>
+
+<form method="post">
+  {{ form.csrf_token }}
+  {{ form_field(form.title) }}
+  {{ form_field(form.body, rows=5, cols=50) }}
+  {{ form.submit }}<br>
+</form>
+{% endblock %}