How to check the format and type of a text file?

Question

I have a input file in which I limited to only accept file whose format is a text file, with extension .txt.

I used the attribute accept for this, see:

accept=".txt"

However, I would like to know if it is possible to check using jQuery, the file format and type in the case of attribute accept fail?

---

Mcve

Illustration:

function verificarArquivoTexto(arq)
{

}

$(
	function ()
  {
  	$('input:file').change(
    	function(e)
      {
      	var arq = $(this).val().split('\\').pop();
        $('.arquivo').html(arq);
      }
    );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="upload" type="file" name="file-upload" accept=".txt">
<div class="arquivo">

</div>

Answer 1

Yes, it is possible. Just capture the values of the attribute input.files, it will return you an array of File and then just check.

const inputUpload = document.querySelector("#upload");

inputUpload.addEventListener("change", () => {
  
  for (let i = 0; i < inputUpload.files.length; i++) {
    if ( 
      inputUpload.files[i].name.match(/\.txt$/) && //Verifica se o nome do arquivo termina com .txt
      inputUpload.files[i].type == "text/plain" //Verifica o mimetype do arquivo
    ) {
      console.log( inputUpload.files[i].name + " é um txt" );
    } else {
      console.log( inputUpload.files[i].name +  "não é um txt" );
    }
  }
});

<input id="upload" type="file" name="file-upload" multiple >

Answer 2

Not necessarily with jQuery, but with the API File Javascript native, for example:

$('input:file').change(function (e) {
    console.log("Tipo:", this.files[0].type);
});

If uploading multiple files

$('input:file').change(function (e) {
    for (var i = 0, j = files.length; i < j; i++) {
        console.log("Tipo:", this.files[i].type);
    }
});

Example:

    $('input:file').change(function (e) {
        console.log("Campo: ", this.name);
        console.log("Tipo: ", this.files[0].type);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="arquivo1">
<input type="file" name="arquivo2">