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向けに作る時ののバグ対策でした。