ファイルアップロード機能をファイル選択ボタン非表示で行う方法

前提

・ ファイルアップロード機能を作りたい人
・ 「ファイルを選択」ボタンを表示させたくない人

ファイルアップロード

通常ファイルアップロード機能を作る場合、「input type="file"」にすると思うが、それだとファイル選択が表示される。

<form method="POST" action="/upload" enctype='multipart/form-data'>
    <input type="file">
</form>

こういった「ファイルを選択」ボタンを出さないようにするにはどうすれば良いのだろうか。

解決策

「input type="file"」を非表示にし、divタグなどでファイルアップロードをするエリアを用意(今回でいうと
スクショの写真追加のエリア)し、labelタグで囲うとlabel配下要素のイベントを紐付けることができます。
それにより「class="img-contents"」エリアを押下すれば、「ファイルを選択」ボタン押下時の挙動が起こります。

<label>
   <form method="POST" action="/upload" enctype='multipart/form-data'>
   <div class="img-contents">
     <img class="img">
     <span class="photo">写真追加</span>
   </div>
   <input type="file" name="img" hidden>
   </form>
</label>

.photo {
  color: #ddd;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.img-contents {
  width: 600px;
  height: 400px;
  border: 1px dashed skyblue;
  position: relative;
}

.img {
  position: absolute;
  width: 600px;
  height: 400px;
}

labelで囲ったエリアで特定の要素を要素を押下した際、「input type="file"」を発火させたくない場合、「preventDefault()」使えば下記の場合、「class="btn"」押下後、eventを実行することを抑制できます。

$(document).on("click", ".btn", function (event) {
  event.preventDefault();
}); 

以上、 「ファイルを選択」ボタンを表示させないでファイルアップロードする方法でした。