ファイルアップロード（jQueryからJavascriptへ書き換えたい）

Question

やりたいこと

ファイルアップロードで、デザインされたボタン・ファイル名表示を使用したい。
また、アップロードされたら、『確定する』ボタンを活性化させたいです。

下記ページを参考に作成しておりました。
https://qiita.com/d0ne1s/items/dd0ffa707ffe051969d7

解決したいこと・試したこと

ページ内で他にも色々とJavascriptを使用しているのですが、ファイルアップロード部分だけjQueryのため、
この部分を素のJavascriptにして、jQueryの読み込み自体をなしにしてみたいと思ったため質問させていただきます。

下記などのページを参考に記述をしてみましたが、動かない状態です。
https://qiita.com/nayuneko/items/b3ad3d6bc2687bcdb0f6

  <main>
    <div class="wrapper">
      <p class="input__text">選択されていません</p>
      <label class="input__btn"><input type="file" id="elmFile" class="import" onchange="selectFile()">ファイルを選択</label>
    </div>

    <div class="buttonArea">
      <button type="button" id="btn" class="button">確定する</button>
    </div>
  </main>

    main {
      width: 600px;
    }
    .wrapper input[type="file"] {
      display: none;
    }
    .input__btn {
      padding: 5px 16px;
      border: 1px solid red;
      border-radius: 30px;
      color: red;
      cursor: pointer;
      font-size: 14px;
    }
    .buttonArea {
      text-align: center;
    }
    #btn {
       padding: 5px 40px;
       background: red;
       border: none;
       border-radius: 10px;
       color: #fff;
       cursor: pointer;
       font-size: 14px;
       transition: all .3s ease;
     }
     #btn:hover {
       opacity: 0.7;
     }
     #btn:disabled {
       background: #ccc;
       pointer-events: none;
     }

（希望している動きです）
      $('.import').on('change', function () {
          var file = $(this).prop('files')[0];
          $('.input__text').text(file.name);
      });

　　（書いてはみたものの動かなくなってしまった）
      document.querySelector('.import').addEventListener('change', function() {
        let file = document.this.getAttribute('files')[0];
        document.querySelector('.input__text').textContent = ('file.name');
      }, false);

（ボタンを活性・非活性の部分/こちらはjQueryと合わせた場合は希望する動きになりました。）
  window.addEventListener('load', function() {
    document.querySelector('#btn').disabled = true;
  })
  function selectFile() {
    if (document.querySelector('#elmFile').value === "選択されていません") {
      document.querySelector('#btn').disabled = true;
    }
    else {
      document.querySelector('#btn').disabled = false;
    }
  }

ご教示いただけませんでしょうか。よろしくお願いします。

Answer 1

let file = document.this.getAttribute('files')[0];
document.querySelector('.input__text').textContent = ('file.name');

• this に document. を付ける必要はありません
• prop('files') は files プロパティへのアクセスなので、getAttribute() ではなくそのまま this.files です。
• textContent に代入するのは file.name の値です。文字列リテラルにしてはいけません。

let file = this.files[0];
document.querySelector('.input__text').textContent = file.name;

Comments

[pondering]

ご回答いただきありがとうございました。
どこをこうしたら、という詳細の内容までくださり感謝です。