I cannot validate the image extension using charAt

Question

I am trying to make a simple validation in the extension of the images that will occur the upload, but it is not working very well so far, could help me?

Follow the code I’m trying to make work.

var aoptionFoto = document.getElementById("optionsFotoImg").value;
var aopcDemaisTemFoto = ['Sim', 'Não'];
var ainput13 = document.getElementById("OutroTipoImagemFile").value == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput13.charAt(ainput13.length-3);

if(aoptionFoto == 'Sim' && ainput13 == true){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

    }else if(aoptionFoto == 'Sim' && ainput13 == false && extImagem != validaExt){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem com extensões valida.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

  }else{
    document.getElementById('BlocoDeEnvioEmailPag').style.display = 'block';
  }

<p>Faça o upload da imagem</p>
            <input name="OutroTipoImagemFile" id="OutroTipoImagemFile" accept="image/*" type="file">

The error that returns in the console is this:

Uncaught Typeerror: ainput13.charAt is not a Function At Finalizarcompra ((index):407) At Htmlbuttonelement.onclick ((index):753)

Answer 1

You are comparing wrong values. The charAt is also only picking 1 character in the string. Do the following, use split and .pop() to catch the extension (the split breaks the file name in array and the pop() takes the value of the last index of the array, which is just the extension):

var ainput = document.getElementById("OutroTipoImagemFile").value;
var ainput13 = ainput == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput.split(".").pop().toLowerCase();

And here:

}else if(aoptionFoto == 'Sim' && ainput13 == false && extImagem != validaExt){

You change to:

}else if(aoptionFoto == 'Sim' && ainput13 == false && !~validaExt.indexOf(extImagem)){

To check if the extension exists in the array.

Complete code:

var aoptionFoto = document.getElementById("optionsFotoImg").value;
var aopcDemaisTemFoto = ['Sim', 'Não'];
var ainput = document.getElementById("OutroTipoImagemFile").value;
var ainput13 = ainput == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput.split(".").pop().toLowerCase();

if(aoptionFoto == 'Sim' && ainput13 == true){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

    }else if(aoptionFoto == 'Sim' && ainput13 == false && !~validaExt.indexOf(extImagem)){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem com extensões valida.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

  }else{
    document.getElementById('BlocoDeEnvioEmailPag').style.display = 'block';
  }

<p>Faça o upload da imagem</p>
            <input name="OutroTipoImagemFile" id="OutroTipoImagemFile" accept="image/*" type="file">