【PyScript】ファイル選択ウインドウ（ファイルセレクター）からファイルパスや中身を取得する方法[Python]

2023年8月16日2023年9月22日

URLをコピーしました！

PyScript

前回、PyScriptでボタンのクリック、入力欄、プルダウンメニュー、ラジオボタン、チェックボックスの情報の取得方法を紹介しました。

ファイルパスを取得する方法

ファイルパスを取得するには「変数名 = js.document.getElementById(“ファイルセレクターのID”)」としてファイルセレクターの情報を取得し、「変数名.value」で取得できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <input type="file" id="test1">
    <button py-click="clicked()" id="button">Button</button>
    <div id="text"></div>
<py-script>

    def clicked():
        selected_file = js.document.getElementById("test1")
        Element("text").write(selected_file.value)

</py-script>
</body>
</html>

ファイルの中身を取得する方法

ファイルの中身を取得するのはこれまでよりも少し面倒です。

まず複数のファイルを選択された場合に備えて、「変数名 = js.document.getElemetnById(“ファイルセレクタのID”).files」で選択された全てのファイルを取得します。

その後、for文を使ってファイルを一つずつ取得します。

「reader = js.FileReader.new()」でFileReaderオブジェクトを作成します。

「reader.onload」でファイルがアップロードされた時の処理を定義しますが、そのままでは読み込めないらしく、create_proxyという関数を挟んでやります。

そのためpy-scriptタグ直下で「from pyodide import create_proxy」でcreate_proxyをインポートします。

これでreaderに何か読み込まれた際に「create_proxy(処理の関数)」の処理の関数部分が実行されます。

最後に「reader.readAsText(ファイル)」でファイルをテキストとして読み込んでやります。

全体としてはこんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <input type="file" id="test1">
    <button py-click="clicked()" id="button">Button</button>
    <div id="text"></div>
<py-script>
    from pyodide import create_proxy

    def read_complete(event):
        text = js.document.getElementById("content")
        Element("text").write(f"{event.target.result}")

    def clicked():
        fileList = js.document.getElementById('test1').files
        for f in fileList:
            reader = js.FileReader.new()
            reader.onload = create_proxy(read_complete)
            reader.readAsText(f)

</py-script>
</body>
</html>

このプログラムファイルを読み込んでみるとこんな感じで出力されます。