p5jsでローカルファイルを読み込みたい場合、createFileInputで作ったinput要素からファイル選択画面を呼び出す。
そのinput要素で、表示する文字を変えたりしようとするのがなかなか難しかった。

いろいろ調べてみたが、以下のような形にするのが定番らしい。

  • input要素は隠す
  • 代わりのbuttonを表示する
  • buttonのイベントでinput要素のclickを呼び出す

コードは以下のような感じ。

function setup() {
    fileInput = createFileInput(handleFile);
    fileInput.hide();
    fileButton = createButton('file open');
    fileButton.mousePressed(function(){
        fileInput.elt.click();
    });
}