Flaskでファイルのアップロード・ダウンロード機能を実装する

hagy

2023年11月23日 03:50

このたび、ノンプログラマーのためのスキルアップ研究会(以下、ノンプロ研)のご支援のもとで「ラズパイとFlaskでつくる！Webアプリ開発入門」という技術同人誌を出させていただきました。

購入はこちらから！

そこでこの記事では、本の追加コンテンツみたいな感じで、簡単に作れるWebアプリなどを書いていきます。
本を買ってくださった方はぜひ試してみて下さい！

サンプルWebアプリの作成

サンプルWebアプリとして、csvファイルのアップロードとダウンロード、アップロードしたファイルを削除するWebアプリを作ります。
まずはディレクトリの構成と全コードをそれぞれ載せていきます。

ディレクトリの構成

まず、ディレクトリの構成を図示します。

ディレクトリ・ファイルの内容は以下の通りです。

File_UL_DL：このサンプルアプリのルートディレクトリです。
app.py：Webアプリの動作を書いていくファイルです。URLの定義やcsvファイルのアップロード関数などを書いていきます。
files：アップロードしたcsvファイルを格納するディレクトリです。
templates：以下のHTMLファイルを格納するディレクトリです。
- index.html：ファイルのアップロードを行うボタンを配置し、アップロードしたファイルの一覧を表示する画面になります。
venv：仮想環境有効化用ディレクトリです。事前に作る必要はありません。

全コードの記載

続いて、コード全体を記載していきます。
まず、app.pyは下記の通りです。

from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os

app = Flask(__name__)

# 操作画面
@app.route('/')
def index():
    csv_files = [file for file in os.listdir('files') if file.endswith('.csv')]
    return render_template('index.html', csv_files=csv_files)

# ファイルのアップロードを行う
@app.route('/upload', methods=["POST"])
def upload():
    file = request.files.get('file')
    file_name = 'uploaded_' + file.filename
    file_path = os.path.join('files', file_name)
    file.save(file_path)
    return redirect(url_for('index'))

# ファイルのダウンロードを行う
@app.route('/download/<string:file>')
def download(file):
    return send_from_directory('files', file, as_attachment=True)

# ファイルの削除を行う
@app.route('/delete/<string:file>')
def delete(file):
    delete_file_path = os.path.join('files', file)
    os.remove(delete_file_path)
    return redirect(url_for('index'))

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

続いて、index.htmlは次の通りです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ファイルのアップロード・ダウンロード</title>
    </head>
    <body>
        <h1>ファイルのアップロード・ダウンロード</h1>
        <h2>ファイルのアップロード</h2>
        <p>
            <form method="POST" action="/upload" enctype="multipart/form-data">
                <p><label for="file">アップロードするファイルの選択：</label>
                    <input type="file" name="file">
                </p>
                <button type="submit">アップロード</button>
            </form>
        </p>
        <h2>アップロードしたファイルの一覧</h2>
        <table>
            <tr>
                <th>アップロードしたファイル</th>
            </tr>
            {% for file in csv_files %}
                <tr>
                    <td><a href="/download/{{ file }}">{{ file }}のダウンロード</a></td>
                    <td><a href="/delete/{{ file }}">{{ file }}の削除</a></td>
                </tr>
            {% else %}
                <tr>
                    <td>データがありません</td>
                </tr>
            {% endfor %}
        </table>
    </body>
</html>

動かしてみる

作ったWebアプリを、ラズパイとngrokを使って動かしてみましょう。

さっそく、csvファイルをアップロードしてみましょう。
「ファイルを選択」ボタンを押してファイルを選びます。

アップロードにより、一覧にファイルが追加されました。

このサンプルアプリでは、「ファイル名のダウンロード」でファイルのダウンロード、「ファイル名の削除」でファイルの削除を行うようにしています。

コードの解説

※コードの説明につきましては、拙著を購読下さった前提で進めさせていただきます。

app.py

まず、必要なライブラリ・モジュールをインストールし、インスタンスを作成します。

from flask import Flask, render_template, request, redirect, url_for, send_from_directory
import os

app = Flask(__name__)

send_from_directoryは、ファイルのダウンロードで使用します。また、ファイルの保存や削除などを行うためosモジュールをインストールします。

続いて、操作画面のルーティングとパスオペレーション関数を定義していきましょう。

# 操作画面
@app.route('/')
def index():
    csv_files = [file for file in os.listdir('files') if file.endswith('.csv')]
    return render_template('index.html', csv_files=csv_files)

詳細はindex.htmlのコードの解説で行いますが、filesディレクトリ内に存在するcsvファイルのリストをcsv_filesとしてrender_template関数に渡すことで、アップロードしたファイルをWebページ上で一覧表示させるようにします。

次は、ファイルのアップロードを行うURLとパスオペレーション関数を定義します。

# ファイルのアップロードを行う
@app.route('/upload', methods=["POST"])
def upload():
    file = request.files.get('file')
    file_name = 'uploaded_' + file.filename
    file_path = os.path.join('files', file_name)
    file.save(file_path)
    return redirect(url_for('index'))

誤動作を防ぐため、HTTPメソッドはPOSTメソッドのみ許可します。request.files.get('file')により、アップロードのフォームから送信されてきた'file'という名前のデータをファイルデータとして取得します。
その後、ファイル名の先頭に'uploaded_'とつけてfilesディレクトリ内に保存し、操作画面に戻ります。

さらに、ファイルのダウンロードを行うURLとパスオペレーション関数を定義します。

# ファイルのダウンロードを行う
@app.route('/download/<string:file>')
def download(file):
    return send_from_directory('files', file, as_attachment=True)

URLに<string:file>という表記が含まれていますが、これによりURL内で<>で括られた箇所を変数として使うことができます。「:」の左側で型を指定することができ、このコードではfileという文字列型(string)の変数を定義し、パスオペレーション関数で利用しています。

このパスオペレーション関数ではsend_from_directory関数でファイルのダウンロードを行いますが、引数はそれぞれ以下の役割を持っています。

'files'は、ファイルが保存されているディレクトリの名前です。相対パスで指定します。
fileは、ダウンロードするファイルの名前で、上記で定義したURL内の変数です。
as_attachment=Trueは、ブラウザにファイルを添付ファイルとして扱うよう指示します。これにより、ブラウザはファイルを表示するのではなく、ダウンロードするようになります。

最後に、ファイルを削除するURLとパスオペレーション関数を定義しましょう。

# ファイルの削除を行う
@app.route('/delete/<string:file>')
def delete(file):
    delete_file_path = os.path.join('files', file)
    os.remove(delete_file_path)
    return redirect(url_for('index'))

上記同様URLからファイル名を取得し、osモジュールを使ってfilesディレクトリからファイルを削除する処理を行っています。

index.html

最初に、ファイルをアップロードするフォームの解説を行います。

        <h2>ファイルのアップロード</h2>
        <p>
            <form method="POST" action="/upload" enctype="multipart/form-data">
                <p><label for="file">アップロードするファイルの選択：</label>
                    <input type="file" name="file">
                </p>
                <button type="submit">アップロード</button>
            </form>
        </p>

<form>タグで、ファイルアップロードのためのフォームを定義しています。このタグ内において、enctype="multipart/form-data"という箇所がありますが、これによりファイルアップロードに必要なエンコーディングタイプを指定し、このフォームから送信されたデータをファイルデータとして扱うことができます。また、name="file"とすることで送信データがfileという名前で送信され、request.files.get('file')によりファイルデータを取得しています。

続いて、アップロードしたファイルの一覧を表示する箇所を解説します。

        <h2>アップロードしたファイルの一覧</h2>
        <table>
            <tr>
                <th>アップロードしたファイル</th>
            </tr>
            {% for file in csv_files %}
                <tr>
                    <td><a href="/download/{{ file }}">{{ file }}のダウンロード</a></td>
                    <td><a href="/delete/{{ file }}">{{ file }}の削除</a></td>
                </tr>
            {% else %}
                <tr>
                    <td>データがありません</td>
                </tr>
            {% endfor %}
        </table>

<table>タグにより、アップロードしたファイルの一覧を表示するテーブルを作成しています。

Flaskで利用されているテンプレートエンジンJinja2では{% %}を使って繰り返しfor文を利用することができ、'/'のURLから渡されてきたcsvファイルのリストcsv_filesをfor文でのループ処理により個別で表示していく形でアップロードしたファイルの一覧を表示しています。

なお、{% %}ではif文を利用することもでき、このコードではリストcsv_filesが空のときに{% else %}で分岐させて「データがありません」と表示させるようにしてます。

また、表示されたファイル名はダウンロードを行うURLと削除を行うURLとリンク付けをしており、クリックするとそれぞれの処理が行われるようにしています。

最後に

このサンプルアプリではcsvファイルのアップロードとダウンロード、及び削除という基本的な機能しかつけていませんが、ファイルのアップロード時に名前を変更しているようにパスオペレーション関数内でコードを追記することでファイルの加工を行うこともできます。Pandasを使って、アップロードされたcsvファイル内のデータの集計を行い、その結果だけをファイルとして保存・ダウンロードするというようなこともできますので、このアプリをいろいろ応用して頂ければ幸いです。