はじめに
HTMLでファイルアップロードを行う際に使用するinput type="file"の話です。
通常だとボタンの右側に「ファイル名」もしくは「選択されていません」のメッセージが表示されますよね。
「オレは選択したファイルのプレビューを表示させるからファイル名の表示はいらねェ！（ドン）」
そんな時ありますよね。
そういった時にこのファイル名を消し去るTipsの紹介です。
方法
input要素のファイル名のみを表示する方法は、公式では用意されていないようです（多分）。
そこで「input要素をlabel要素もしくはbutton要素でラップする方法」で対応します。
MDNのドキュメントでは、button要素でラップする方法を推奨しています。
そのため今回はこちらの方法をそのまま流用します。
- HTML
<input
type="file"
id="fileElem"
multiple
accept="image/*"
style="display:none" />
<button id="fileSelect" type="button">画像を選択</button>
style="display:none"でinput要素を（見た目上）消し去っています。
そして最後にユーザーに見せるbutton要素を追加しています。
- JavaScript
const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", (e) => {
if (fileElem) {
fileElem.click();
}
}, false);
button要素をクリックした時に、Input要素のclickイベントを発火させる関数になります。
こんな感じ
見事にファイル名が消えていますね。
See the Pen Untitled by UmezakiDaisuke (@umezakidaisuke) on CodePen.
後はプレビュー機能を実装するなり、イケてないボタンの装飾なりをすればよいかと思います。
参考記事
- MDN（今回のメイン）
- 偉大なる公式ドキュメント
- label要素ではなくbutton要素でのラップを推奨する理由
【おまけ】 input type="file"をDisるMDN
そこまで言わんでも……笑