Отображать ввод файла только тогда, когда предыдущий ввод файла не пуст

Question

Как получить последнее поле ввода для отображения после нажатия на 3-е, поскольку я могу отобразить только 3 входа?

Моя идея состоит в том, чтобы следующий ввод отображался только после того, как предыдущий был выполнен, но я застрял на этом последнем вводе.

Я требую, чтобы требовался только 1-й ввод, поскольку на моем веб-сайте требуется только 1 изображение, но пользователь может загрузить больше.

Но этот код требует проверки входных данных с помощью обязательного.

Есть идеи другого метода?

input {
  display: block
}

#csvfile {
  display: none
}

#filename2 {
  display: none
}

#csvfile2 {
  display: none
}

#filename:valid+#csvfile {
  display: block
}

#csvfile:valid+#filename2 {
  display: block
}

#filename2:valid+#cvsfile2 {
  display: block
}

<input type="file" id="filename" required name="filename" />
<input type="file" id="csvfile" required name="csvfile" />
<input type="file" id="filename2" required name="filename2" />
<input type="file" id="csvfile2" name="csvfile2" />

Answer 1

Поскольку вы не хотите требовать ввода всех файлов, вы не сможете надежно определить, являются ли они пустыми только с помощью css (псевдокласс: valid, который вы используете, будет работать только для обязательные поля). Вам потребуется JavaScript, чтобы определить, содержит ли каждый входной файл файл. Ниже приведен пример:

const elems = document.querySelectorAll('input[type="file"]');

for (let elem of elems) {
  elem.addEventListener('change', (event) => {
    let target = event.target;
    let next = target.nextElementSibling;
    if (target.files.length) {
      next.classList.remove('hidden');
    } else {
      next.classList.add('hidden');
    }
  });
}

.hidden {
  display: none;
}

<input id="filename" type="file" name="filename" required />
<input class="hidden" id="csvfile" type="file" name="csvfile" />
<input class="hidden" id="filename2" type="file" name="filename2" />
<input class="hidden" id="csvfile2" type="file" name="csvfile2" />