ファイル選択ボタンで選択されたファイル名を表示させ、クリアボタンで削除したい

現在制作中の案件でフォーム内に添付ファイルをつける(ファイル選択ボタン)必要があるのですが、
選択したファイル名をボタン横に表示させ、クリアボタンを押すと添付を解除(ファイル名もデフォルトに戻す)したいのですが
ファイル名表示のさせ方がわかりません。

ファイル選択ボタンのカスタマイズに関して色々調査したのですが、「JavaScript」として紹介されているものの、そのソースは「Jquery」のものばかりでした。今回はJqueryを使用することができないため、JavaScriptで解決をする必要があります。

お手数ですが、皆様の知恵をお貸しください。
不明点、必要事項等がありましたらお申し付けください。

【実現したいこと】
下記完成時イメージより
・「選択」ボタンを押下して添付するファイルを選択
・「未選択」テキストが選択したファイル名になる
・「クリア」ボタンを押下することで添付ファイルを解除、選択したファイル名が「未選択」に戻る

完成時イメージ画像

html
1<div class="fileSelectArea">
2  <div>
3    <p>未選択</p>
4  </div>
5  <div>
6    <input id="file" type="file" accept=".jpg, .png, .gif" name="">
7    <label for="file">選択</label>
8    <input type="button" id="btn1" value="クリア" onclick="test();">
9  </div>
10</div>

JavaScript
1function test(){
2  var obj = document.getElementById("file");
3  obj.value = "";
4}

CSS
1.fileSelectArea {
2  background: #F7F7F7;
3  border-radius: 3px;
4  display: flex;
5  justify-content: space-between;
6  padding: 30px 24px;
7}

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1<script>
2HTMLElement.prototype.change=function(){
3  const e = document.createEvent("HTMLEvents");
4  e.initEvent('change', true, true );
5  return this.dispatchEvent(e);
6};
7window.addEventListener('DOMContentLoaded', ()=>{
8  const f=document.querySelector('#file');
9  const b=document.querySelector('#btn1');
10  f.addEventListener('change',e=>{
11    const n=e.target.files[0]?.name||null;
12    document.querySelector('.fileSelectArea p').textContent=n?n:"未選択";
13  });
14  b.addEventListener('click',()=>{
15    f.value="";
16    f.change();
17  });
18});
19</script>
20<div class="fileSelectArea">
21  <div>
22    <p>未選択</p>
23  </div>
24  <div>
25    <input id="file" type="file" accept=".jpg, .png, .gif" name="">
26    <label for="file">選択</label>
27    <input type="button" id="btn1" value="クリア">
28  </div>
29</div>