How to display a hidden icon after loading a file through input file

Question

I have a screen where there are several input type="file" and I’m trying to make an icon appear when the user loads a file, making it easier to see that that input is already with a file.

Below follows the images of what I want, to facilitate understanding:

Before choosing the file:

After choosing the file: This is my HTML:

<div class="row row-space ">
    <div class="custom-file ">
        <div class="row row-space ">
            <input type="file" class="custom-file-input col-sm-11" id="ficha_inscricao"  >
            <label class="custom-file-label col-sm-11" for="ficha_inscricao">Escolha o Arquivo</label>
            <i hidden class="fas fa-check fa-2x" style="color:green" id="ficha_inscricao_ok" ></i>
        </div>                                              
        <small class="form-text text-muted ">Ficha de Inscrição Preenchida e Assinada.</small>
    </div>          
</div>  

This is the script I’m using, in it I load the name of the selected file in input(this is working) and try to remove the hiddenthat’s on my icon and that’s what I can’t do.

document.querySelector('.custom-file-input').addEventListener('change',function(e){
    var fileName = document.getElementById("ficha_inscricao").files[0].name;
    var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName;
document.getElementsByTagName('ficha_inscricao_ok').removeAttribute("hidden");

})

In this example I am trying to do two things in the same function, but I have tried to do also in separate functions and the same way did not work.

Answer 1

Your problem is here: document.getElementsByTagName('ficha_inscricao_ok').removeAttribute("hidden");, you are using a html tag selector, to catch html elements and there is no tag ficha_inscricao_ok.

You must change the type of selection, which you yourself used in the code previously, .getElementById to select the tag with id="ficha_inscricao_ok", or rewrite your code to .getElementsByTagName('i')[0] to capture the <i>, so your code will remove the attribute hidden.

Stay like this:

document
        .querySelector('.custom-file-input')
        .addEventListener('change', function (e) {
          var fileName = document.getElementById('ficha_inscricao').files[0]
            .name;
          var nextSibling = e.target.nextElementSibling;
          nextSibling.innerText = fileName;
          document
            .getElementById('ficha_inscricao_ok')
            .removeAttribute('hidden');
        });

The selecting the tag <i>:

document
        .querySelector('.custom-file-input')
        .addEventListener('change', function (e) {
          var fileName = document.getElementById('ficha_inscricao').files[0]
            .name;
          var nextSibling = e.target.nextElementSibling;
          nextSibling.innerText = fileName;
          document
            .getElementsByTagName('i')[0]
            .removeAttribute('hidden');
        });

---

OBS: getElementsByTagName returns an arrayList, hence the use of [0].