先生と生徒の会話形式で理解しよう

生徒

「先生、Flaskを使ってWebアプリを作っているんですけど、ユーザーが画像やPDFをアップロードできるようにしたいんです。どうやって実装すればいいですか？」

先生

「良いテーマだね。Flaskではとても簡単にファイルアップロードを実装できるんだ。フロントエンド（HTML側）でファイルを選び、Flask側で受け取って保存する流れを作ればいいんだよ。」

生徒

「なるほど。でも、HTMLでファイルを送るってどうやるんですか？」

先生

「それもすごく簡単！一つずつ手順を追ってやってみよう！」

1. Flaskでファイルアップロードをする仕組みとは？

ファイルアップロードとは、ユーザーのパソコンやスマートフォンからサーバーにファイルを送ることを言います。例えば、プロフィール画像をアップロードしたり、履歴書を送信したりする時に使われています。

Flaskでは、フロントエンド（HTMLフォーム）で送られたファイルを、Pythonのrequest.filesという仕組みを使って受け取ります。そして、save()メソッドでサーバーに保存します。

この基本を理解すれば、画像アップロードやドキュメント提出フォームなど、さまざまなアプリを作ることができます。

2. Flaskの準備をしよう

まずはFlaskをインストールしましょう。ターミナル（またはコマンドプロンプト）で以下のコマンドを実行します。


pip install flask

これでFlaskを使う準備ができました。

3. Flaskでファイルを受け取るPythonコード

次に、FlaskアプリケーションのPythonコードを書いていきましょう。


from flask import Flask, request, render_template
import os

app = Flask(__name__)

# アップロードしたファイルを保存するフォルダを指定
UPLOAD_FOLDER = 'uploads'
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/')
def index():
    return render_template('upload.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return 'ファイルが見つかりません。'

    file = request.files['file']

    if file.filename == '':
        return 'ファイルが選択されていません。'

    # ファイルを保存
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
    file.save(filepath)

    return f'アップロードが完了しました！保存先: {filepath}'

if __name__ == '__main__':
    app.run(debug=True)

このコードでは、request.filesを使ってアップロードされたファイルを取得しています。そしてfile.save()で指定フォルダに保存しています。

4. フロントエンド（HTML）でファイルを送信する

Flaskと連携するためのHTMLファイルを作成します。templatesフォルダの中にupload.htmlという名前で保存してください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask ファイルアップロード</title>
</head>
<body class="p-4">
    <h2>ファイルをアップロードしてみよう！</h2>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file" class="form-control mb-3">
        <button type="submit" class="btn btn-primary">アップロード</button>
    </form>
</body>
</html>

ここで重要なのは、enctype="multipart/form-data"という指定です。これは、「ファイルを含むデータを送ります」という意味です。これを忘れると、ファイルがサーバーに送られません。

5. 実際に動かしてみよう！

すべてのファイルを保存したら、ターミナルで次のコマンドを実行します。


python app.py

その後、ブラウザで http://127.0.0.1:5000 にアクセスしてみましょう。ファイルを選択して「アップロード」ボタンを押すと、uploadsフォルダにファイルが保存されます。

6. アップロード可能なファイルを制限しよう

セキュリティのために、アップロードできるファイルの種類を制限することも大切です。例えば、画像ファイル（jpg, png, gif）のみ許可したい場合は、次のようにします。


ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return 'ファイルが見つかりません。'
    file = request.files['file']
    if file.filename == '':
        return 'ファイルが選択されていません。'
    if file and allowed_file(file.filename):
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(filepath)
        return f'画像のアップロードに成功しました！保存先: {filepath}'
    else:
        return '許可されていないファイル形式です。'

このようにすることで、不要なファイルのアップロードを防ぐことができます。安全なWebアプリを作るためには、とても重要なポイントです。