querySelectorAllで複数の要素を取得できない。

Question

前提・実現したいこと

Ruby on Railsにて、複数の画像をアップロード出来るページ(users/edit.html.erb)を作成致しました。アップロードの機能自体は既に実装出来ています。

ここからこちらのページを参考に、選択されたファイルサイズが1MB以上である場合はアラートを表示させるコードを記述しました。

要素の取得にgetElementByIdを使った場合は問題なくアラートが表示されました。
ただ今回は画像が複数存在するためquerySelectorAllに変えて試してみたのですが、うまくアラートが表示されません。

該当のソースコード

アップロードしたい複数の画像に関する記述。

users/edit.html.erb

<input name="image" type="file" accept=".png, .jpg, .jpeg, .gif" id="file_photo" class="file_photo" style="display:none;">

<input name="cover_image" type="file" accept=".png, .jpg, .jpeg, .gif" id="file_photo" class="file_photo2" style="display:none;">

以下はまずgetElementByIdで試したコードです。

file.js

$(document).on('turbolinks:load', function () {
  const sizeLimit = 1024 * 1024 * 1;
  const fileInput = document.getElementById('file_photo'); // 問題の行。
  const handleFileSelect = () => {
    const files = fileInput.files;
    for (let i = 0; i < files.length; i++) {
      if (files[i].size > sizeLimit) {
        alert('File size must be less than 1 MB.');
        fileInput.value = '';
        return;
      }
    }
  }
  fileInput.addEventListener('change', handleFileSelect);
});

idは当然一つしか取得できませんので、一つ目の画像選択時にはアラートが表示されますが、二つ目の画像選択時にはアラートが表示されません。

次に他の記述はそのままに、問題の行のみquerySelectorAllに書き換えてみました。

file.js

  const fileInput = document.querySelectorAll('.file_photo, .file_photo2'); // 問題の行。

しかし二つ目の画像どころか一つ目の方にもアラートが表示されなくなってしまいました。
どこかコードに間違いがありますでしょうか。どなたかご助言を頂けますと有難いです。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3
jquery 1.12.4

追記

ご指摘の通りidとclassの使い方が逆になっておりましたので、下記の様に訂正いたします。

users/edit.html.erb

<input name="image" type="file" accept=".png, .jpg, .jpeg, .gif" id="file_photo" class="file_photo" style="display:none;">

<input name="cover_image" type="file" accept=".png, .jpg, .jpeg, .gif" id="file_photo2" class="file_photo" style="display:none;">

Answer 1

Document.querySelectorAll()は静的NodeListを返すので、取得後、forなどで1つずつ取り出す必要があります。

リストが取れる点はgetElementsXXXX系（IdはgetElementなので違う）と同じです。

ただ、

jquery 1.12.4

jQuery入れてるなら要素取得はjQuery使われたほうが。
せっかく入れてるのに勿体ないですね。

Answer 2

ちょっと状況がわかりませんが、複数のHTML要素に同じIDを振るのをやめるところからでは？

Answer 3

@yambejp さんおっしゃっているとおりで
id と class の使い方が逆だと思います。

document.getElementsByClassName で複数要素とれます。

elems.forEach(elem => elem.addEventListener('change', handleFileSelect));

みたいな感じでそれぞれ EventListener の登録が必要です。

あと fileInput の中身をみて問題を切り分けるといいです。

Comments

[punchan36]

有難うございます。
getElementsByClassName にしても querySelectorAll にしても、要素を複数受け取った後はそれぞれ処理する必要があったのですね。
色々な方法があるようですが、一旦getElementsByClassNameを使ってトライしてみようと思います。

以下の様に記述を変えてみたのですがまだ上手くいきません。
追記致しましたように id と class の記述も変えた上で試しましたが、まだコードがおかしいでしょうか…。

$(document).on('turbolinks:load', function () {
const sizeLimit = 1024 * 1024 * 1;
const fileInput = document.getElementsByClassName('file_photo');

const handleFileSelect = () => {
const files = fileInput.files;
for (let i = 0; i < files.length; i++) {
if (files[i].size > sizeLimit) {
alert('File size must be less than 1 MB.');
fileInput.value = '';
return;
}
}
}

fileInput.forEach(elem => elem.addEventListener('change', handleFileSelect));
});

[anozon]

handleFileSelect で 外側の fileInput を参照してしまっているので
const handleFileSelect = (e) => {
e.target.files // あいまい

みたいな形でとれませんか？

[punchan36]

有難うございます。
すみません、こう言う事でしょうか…思っていたよりも複雑で難しそうです。。

const fileInput = document.getElementsByClassName('file_photo');
const handleFileSelect = (e) => {
const files = e.target.files;