このすみノート

Webエンジニアが技術や趣味を書くブログです。

MojaveのSafari 14で、input type="file"のアップロードボタンが反応しない件

macOS MojaveのSafari 14にて、<input type="file" ~~>ボタンが反応しないケースに遭遇しました。

なぜ発生するのか?

調査した限りでは、Safari 14におけるバグのようです。

Safari 14.0.1 File Selection button not working
I have a standard web form which has a file selector form field. This has worked for well over 10 years as it's the standard UI presented by Safari.
Just noticed today after Safari upgraded to 14.0.1 (on the latest Mojave) that the button is dead: clicking does nothing.
This same form continues to work in Chrome. Anyone else see this and have a workaround?
From: https://discussions.apple.com/thread/252045057

stackoverflow.com

解決法

バグとは言うものの、このままだとユーザーからクレームが来そうな勢いなので、直さなければいけないので調査しました。

qiita.com

どうやら、accept属性を追加すれば大丈夫なようです。

<input type="file" id="testfile" name="testfile" accept="image/*">

さいごに

Safariは意外と、癖のあるブラウザかもしれないと感じる今日この頃。 なぜだか最近、Safariだけデザイン崩れするケースに何回か遭遇しました。