はじめに#
「OKAZAKI Shogo のひとりアドベントカレンダー2024」の7日目です。 ファイルのアップロード機能を作るために、ブラウザ経由でリクエストを受け取り、それを処理する方法を確認します。
フォームのエンドポイントとテンプレートの作成#
views/regist_file_form.py#
まずは、フォームを表示するためのエンドポイントを定義する。
1from flask import Blueprint, render_template
2
3regist_file_form_bp = Blueprint("regist_file_form", __name__, url_prefix="/regist-file-form")
4
5
6@regist_file_form_bp.route("/", methods=["GET","POST"])
7def index():
8 return render_template("regist_file_form.html")
templates/regist_file_form.html#
先ほど作成したビューから呼び出されるテンプレートを以下のように作成する。
action にはこの後作成するエンドポイントをしておく。
1{% extends "layout.html" %}
2
3{% block content %}
4<form action="/regist-file" method="post" class="regist-file-form">
5 <div class="regist-file-form">
6 <label for="name">タイトル: </label>
7 <input type="text" name="name" id="name" required />
8 </div>
9 <div class="regist-file-form">
10 <label for="description">説明: </label>
11 <input type="text" name="description" id="description" />
12 <br>タイトルで内容が十分わかるときは、説明を入力しなくても構いません。
13 </div>
14 <div class="regist-file-form">
15 <label for="description">説明: </label>
16 <input type="file" name="file" id="file" />
17 <br>アップロードするファイル名を入力するか、ボタンを押してファイルを選択してください
18 </div>
19 <div class="regist-file-form">
20 <input type="submit" value="送信" />
21 </div>
22</form>
23{% endblock %}
views/regist_file.py#
先ほど作成した画面で「送信」ボタンが押されたら、実際にファイルを登録する処理を書く。ただし、今はまだ単純にフォームで受け取ったタイトルを表示するだけ。
1from flask import Blueprint, render_template, request
2
3regist_file_bp = Blueprint("regist_file", __name__, url_prefix="/regist-file")
4
5
6@regist_file_bp.route("/", methods=["POST"])
7def index():
8 file_name = request.form['name']
9 return f"ファイル名: {file_name}"
__init__.py#
先ほど作成したビューを登録する Blueprint を追加する。
1import os
2from flask import Flask
3from flask_sqlalchemy import SQLAlchemy
4from instance.config import dev
5
6
7db = SQLAlchemy()
8
9
10def create_app():
11 # appの設定
12 app = Flask(__name__, instance_relative_config=True)
13
14 # configファイルを読み込む
15 config_path = os.path.join("config", "dev.py")
16 app.config.from_pyfile(config_path)
17
18 # DB の設定
19 db.init_app(app)
20
21 # Blueprint の登録
22 from app.views.index import index_bp
23 from app.views.files import files_bp
24 from app.views.regist_file_form import regist_file_form_bp # 新規追加
25 from app.views.regist_file import regist_file_bp # 新規追加
26
27 app.register_blueprint(index_bp)
28 app.register_blueprint(files_bp)
29 app.register_blueprint(regist_file_form_bp) # 新規追加
30 app.register_blueprint(regist_file_bp) # 新規追加
31
32 return app
これで アプリを起動し、 /refist_file_form にアクセスすると下記のような画面が表示される。
上の内容を入力して「送信」を押すと画面遷移して以下のように表示される。
