input type="file"の「ファイル名」を表示させたくない時はbutton要素で装飾しよう！

はじめに

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

そこまで言わんでも……笑