【react・javascript】cssのbeforeを使って疑似的ボタンを作る

inputFileの従来のアップロードボタンをカスタマイズしてボタンのように振る舞わせる方法の一つに

document.getElementById(“file”).click()を使って間接的にinputFileを叩く方法がありますが

ios(safari)ではこれを二回クリックしないとiphoneのアップロードダイアログが出てこない

現象があります。

iphone6～Xの間全てに発生するみたいで、いずれも早いタイミングで二回クリックをしないと

アップロードダイアログが出てきません。

少し前にiosのバグでdivで作ったボタンが二回クリックしないと動かない現象がありましたが

あちらはcssでdivにcursor:pointer;を設定することで解消することができます。

一方こちらはbuttonタグなのであまり関係はなさそう。(試したけど使えず)

手持ちのiphoneはios12.4.5でした。何度か同じ問題で困っている方を探したのですが

こちらのバージョンでは上のようなバグは見受けられず。

いい加減手詰まりになっていたのでもうiphoneはボタンに委譲するのはやめてcssで一からカスタマイズ

することにしました。

結局、以下の通りにしてカスタマイズすることで一回のクリックで動作するようになりました。

css

#my-page .upload {
margin-bottom: 34px;
text-align: center;
position: relative;
}
#my-page .upload_input {
width:100%;
position: relative;
}
#my-page .upload_input::before {
background: #fff;
border-radius: 2px;
color: #555;
margin: 10px auto;
width: 100%;
text-align: center;
content: attr( custom-attribute ) url("../img/camera.png");
font-weight:bold;
font-size: 16px;
padding: 10px 0px;
position: absolute;;
}

jsx

render() {
let buttons = [];
for (let i = 0; i < this.state.count; i++) {
buttons.push(<div className="file-upload_area"><input type="file" className="file-upload_input" accept="image/*" value="" onChange={e =>this.handleChangeFile(i,e.target.files[0])} custom-attribute={(i+1) + '枚目を撮影 '}/></div>)
}
return (
<div id="my-page" >
{buttons}
<input type="file" id="filechange" accept="image/*" value="" onChange={e =>this.changeFile(e.target.files[0])} />
<Button className="add-pict" onClick={() => this.setState({ count: this.state.count + 1 })}><Icon icon={{default: 'fa-plus'}} />写真を追加</Button>
</div>
);

}

ポイントはbeforeで疑似アップロードボタンを作っている箇所。

inputFileの後にこのbeforeプロパティを設定すると

現存するinputfileと同じ振る舞いをするボタンを作ることができます。

(現代風に言うと分身みたいなもの)。

inputFileを上手いこと隠してbeforeプロパティに敷くことで

ボタンのような動きをさせることが可能になります。

widthは設定しておかないとテキストが真ん中にいかないので注意してください。

以上inputFileをiphone向けに作る時ののバグ対策でした。