4. diel - Static files a upload súborov vo Flask

V minulej lekcii, WTForms a Jinja2 šablóny pre Flask framework , sme si ukázali WTForms, "rozšírenie" pre Flask, a vytvorili sme si hlavnú šablónu pomocou Jinja2. V dnešnom Python tutoriále si ukážeme, ako používať statické súbory a nahrať súbor pomocou WTForms.

Static files

Najskôr si stiahneme Bootstrap. Jedná sa o populárne CSS framework, vďaka ktorému našej aplikácii vykúzlime moderný vzhľad takmer bez snaženia. Bootstrap navyše umožňuje veľmi jednoducho podporovať zobrazení stránok aj na mobilných zariadeniach. Viac informácií prípadne nájdete v našom kurze Bootstrap.

Vytvoríme zložku root/static/, kde root/ je zložka s vašou aplikáciou, a celú zložku Bootstrap tam presunieme.

Pre ukážku si vytvoríme nasledujúci skript root/static/main.js, ktorý tiež načítame:

alert("Po odkliknutí se stránka načte")

Do hlavnej šablóny linkneme do časti <head>...</head> skript main.js a minifikovaný Bootstrap CSS súbor:

</style>
<script src="{{ url_for('static', filename = 'main.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-4.1.3-dist/css/bootstrap.min.css')}}">
</head>

Stránka teraz načíta skript a Bootstrap.

Bootstrap a alert skript pre Flask framework pre Python - Flask framework pre Python

Keďže máme Bootstrap, vylepšíme vzhľad nášho formulára. Jednotlivým poliam pridáme Bootstrap triedy a namiesto <input type="submit"> si vytvoríme submit tlačidlo pomocou WTForms, rovnako s Bootstrap CSS triedami, ktoré ho ostylují:

class MujFormular(FlaskForm):
    prvni_cislo = IntegerField("První Číslo", widget = widgets.Input(input_type = "number"), render_kw = dict(class_ = "form-control"))
    operator = SelectField("Operátor", choices=[("+" ,"+"), ("-", "-"), ("*", "*"), ("/", "/")], render_kw = dict(class_ = "form-control"))
    druhe_cislo = IntegerField("Druhé Číslo", widget = widgets.Input(input_type = "number"), render_kw = dict(class_ = "form-control"))
    submit = SubmitField("Odeslat", render_kw = dict(class_ = "btn btn-outline-primary btn-block"))

Všimnite si, že sme pridali parameter render_kw pomocou ktorého môžeme pridať vygenerovanému kódov napríklad triedu, hodnotu a ďalšie atribúty.

Upravíme aj šablónu:

{% extends "base.html" %}
{% block header %}
Zde je něco zajímavého<br>
{{ super() }}
{% endblock %}

{% block content %}
    <form method="POST" class="row justify-content-center">
        {{ form.hidden_tag() }}
        <table>
            <tr><td>{{ form.prvni_cislo.label }}:</td><td>{{ form.prvni_cislo }}</td></tr>
            <tr><td>{{ form.operator.label }}: </td><td>{{ form.operator }}</td></tr>
            <tr><td>{{ form.druhe_cislo.label }}: </td><td>{{ form.druhe_cislo }}</td></tr>
            <tr><td>{{ form.submit.label }}</td><td> {{ form.submit }}<td></tr>
        </table>
    </form>
    <div class="text-center">
    {% for field, errors in form.errors.items() %}
        {% for error in errors %}
            <span style="color: red;">Chyba pole - {{ field }} hláška - {{ error }}</span><br>
        {% endfor %}
    {% endfor %}
    <hr>
    </div>
{% endblock %}

Aplikácia teraz vyzerá oveľa lepšie

Webová aplikácia s frameworky Bootstrap a Flask v Pythone - Flask framework pre Python

Upload súborov

Pre ukážku si vytvoríme ďalšiu stránku, ktorá bude fungovať ako galéria obrázkov s možnosťou nahrať vlastné obrázky. Do main.py pridáme importy a novú metódu:

from wtforms import FileField
from flask_wtf.file import FileRequired
from werkzeug.utils import secure_filename
import os

#Nastavíme složku, kam se budou obrázky ukládat
UPLOAD_FOLDER = app.static_folder + "/uploads/"
app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER

class FileFormular(FlaskForm):
    soubor = FileField("Vlož obrázek", validators = [FileRequired()])
    submit = SubmitField("Odeslat", render_kw = dict(class_ = "btn btn-outline-primary btn-block"))

@app.route("/galerie/", methods = ["GET", "POST"])
def galerie():
    form = FileFormular()
    if form.validate_on_submit():
        soubor = form.soubor.data
        nazev = secure_filename(soubor.filename)
        soubor.save(os.path.join(app.config['UPLOAD_FOLDER'], nazev))
    return render_template("galerie.html", form = form)

Najskôr nastavíme zložku, kam sa budú obrázky ukladať (v tomto prípade root/static/uploads, preto sme použili app.static_folder). Vytvoríme si formulár s file Input (použijeme validátor FileRequired() pre validáciu, či bol súbor priložený) a submit tlačidlom.

Nakoniec pridáme logiku samotnej stránky. Zo všetkého najskôr sa vykoná validácie formulára, potom si vezmeme obrázok a skontrolujeme pomocou nástroja z knižnice werkzeug, na ktoré mimochodom beží Flask, či je názov súboru bezpečný, a súbor uložíme.

Tiež si musíme vytvoriť novú šablónu, ktorá sa bude nachádzať v root/templates/galerie.html:

{% extends "base.html" %}
{% block header %}
Galerie
{% endblock %}

{% block content %}
    <form method="POST" class="row justify-content-center" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <table>
            <tr><td>{{ form.soubor.label }}:</td><td>{{ form.soubor }}</td></tr>
            <tr><td>{{ form.submit.label }}</td><td> {{ form.submit }}<td></tr>
        </table>
    </form>
    <div class="text-center">
    {% for field, errors in form.errors.items() %}
        {% for error in errors %}
            <span style="color: red;">Chyba pole - {{ field }} hláška - {{ error }}</span><br>
        {% endfor %}
    {% endfor %}
    <hr>
    </div>
{% endblock %}

Skúsime si nahrať obrázok pandy, aplikácia sa nachádza na http://127.0.0.1:5000/galerie/.

Upload obrázkov v microframeworku Flask v Pythone - Flask framework pre Python

Výborne, obrázok sa úspešne nahral

Nahraný obrázok v microframeworku Flask v Pythone - Flask framework pre Python

Teraz už len potrebujeme získať všetky obrázky z priečinka a zobraziť ich na stránke:

@app.route("/galerie/", methods = ["GET", "POST"])
def galerie():
    form = FileFormular()
    if form.validate_on_submit():
        soubor = form.soubor.data
        nazev = secure_filename(soubor.filename)
        soubor.save(os.path.join(app.config['UPLOAD_FOLDER'], nazev))
    obrazky = os.listdir(app.static_folder + "/uploads")
    return render_template("galerie.html", form = form, obrazky = obrazky)

Použijeme funkciu os.listdir, ktorá vracia pole súborov nachádzajúcich sa v priečinku. Stačí ich zobraziť v šablóne:

{% extends "base.html" %}
{% block header %}
Galerie
{% endblock %}

{% block content %}
    <form method="POST" class="row justify-content-center" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <table>
            <tr><td>{{ form.soubor.label }}:</td><td>{{ form.soubor }}</td></tr>
            <tr><td>{{ form.submit.label }}</td><td> {{ form.submit }}<td></tr>
        </table>
    </form>
    <div class="text-center">
    {% for field, errors in form.errors.items() %}
        {% for error in errors %}
            <span style="color: red;">Chyba pole - {{ field }} hláška - {{ error }}</span><br>
        {% endfor %}
    {% endfor %}
    <hr>
    </div>

    {% for obrazek in obrazky %}
        <img src="{{ url_for('static', filename='uploads/' + obrazek) }}">
    {% endfor %}
{% endblock %}