実装方法

1. Flaskの拡張機能をインストール

ファイルのアップロードを簡単に扱うために、Flask-WTFという機能を使用します。
requirements.txtに以下を追加します。

Flask-WTF==0.15.1

2. ファイルアップロードフォームの作成

app.pyに以下のコードを追加します。

from flask_wtf import FlaskForm
from wtforms import FileField, SubmitField
from wtforms.validators import DataRequired

class UploadForm(FlaskForm):
    file = FileField('CSVファイルを選択', validators=[DataRequired()])
    submit = SubmitField('アップロード')

3. ルーティングを変更

app.pyのルーティング記述を以下のように変更します。

@app.route('/', methods=['GET', 'POST'])

4. データ処理の関数(index関数)を変更

app.pyの関数記述を以下のように変更します。

def index():
    form = UploadForm()
    if form.validate_on_submit():
        file = form.file.data

        # サンプルデータの読み込み
        df = pd.read_csv(file)

        # データの可視化
        plt.hist(df['some_column'])

        # プロットを画像として保存
        img = io.BytesIO()
        plt.savefig(img, format='png')
        img.seek(0)

        # 画像をBase64でエンコード
        plot_url = base64.b64encode(img.getvalue()).decode()

        return render_template('result.html', plot_url=plot_url)
    return render_template('upload.html', form=form)

5. HTMLファイルの作成

templatesディレクトリにupload.htmlとresult.htmlというHTMLファイルを作成します。

[upload.html]

<!DOCTYPE html>
<html>
<head>
  <title>CSVアップロード</title>
</head>
<body>
  <form method="POST" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    <p>
      {{ form.file.label }}<br>
      {{ form.file() }}
    </p>
    <p>{{ form.submit() }}</p>
  </form>
</body>
</html>

[result.html]

<!DOCTYPE html>
<html>
<head>
  <title>結果の表示</title>
</head>
<body>
  <h1>result</h1>
  <img src="data:image/png;base64,{{ plot_url }}" alt="Plot Image">
  <br>
  <a href="/">戻る</a>
</body>
</html>

6. 秘密鍵と保存先URLの設定

app.pyに以下のコードを記述します。

from config import SECRET_KEY
from config import UPLOAD_PATH

app = Flask(__name__)
app.config['SECRET_KEY'] = SECRET_KEY
app.config['UPLOAD_FOLDER'] = UPLOAD_PATH

config.pyファイルを作成し、以下を記述します。

SECRET_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"   # ランダムな文字列を指定してください
UPLOAD_PATH = "/yyyy/yyyy/yyyyyyyyy"    # ファイルをアップロードするパスを指定してください

7. 実行

ターミナルでdocker-compose up --buildを実行します。

実行したら、http://localhost:5001/にアクセスします。

結果

ページにアクセスして以下のページが表示されるはずです。

次に、CSVファイルをアップロードしてアップロードをクリックします。

グラフが表示されていれば成功です。

（CSVファイルの内容は以下のようにしてください。）

id,some_column
1,100
2,200
3,300
4,400
5,150
6,200
7,250
8,300
9,350

まとめ

今回はCSVファイルをアップロードして結果をグラフ表示できるまで実装してみました。

かなり実際のアプリケーションに近づいたかなと思います。

次の追加機能が思い浮かんだらまた実装してみようと思います。

以上

ChatGPTと会話しながらWEB上でCSVファイルをインポートできるように実装してみたのでメモメモ