Posted at

iOSのWebViewでファイルアップロードダイアログを呼び出せなかった話

More than 1 year has passed since last update.

デフォルトのファイルダイアログは格好悪いので、画像などを代替として、クリックした際のイベントでファイル選択のダイアログを出したいという時はよくありますよね。

例えばこんな感じのコードで。

<img class="camera-icon select-photo" src="camera.png" />

<input type="file" id="cameraImageFile" />

<script>
document.querySelector('.select-photo').addEventListener('click', (e) => {
document.querySelector('#cameraImageFile').click();
});
</script>

PCのブラウザであれば動くのですが、iOSではなぜかダイアログが開かず…。

document.querySelector('.select-photo').addEventListener('click', (e) => {

alert(true);
document.querySelector('#cameraImageFile').click();
});

とやったりすると、アラートが出た後にファイル選択が出るという…。HTML側のスタイルを変えたり、JavaScriptの書き方を変えたりと色々やったのですが結局うまくいく方法がこれ。

document.querySelector('.select-photo').addEventListener('click', (e) => {

e.target.click();
document.querySelector('#cameraImageFile').click();
});

元々の画像を2回クリックしたことにすると、その後の処理もちゃんと呼ばれると。なぜかが分かっていないので微妙な気持ちですが…。

なお、Androidはちゃんと動くので、iOSかどうかの判定も追加しておく必要があります。