Arquivo API

Trabalhar com uploads de arquivos, especialmente no front end, sempre foi um incômodo. Não costumávamos ser capazes de arrastar e soltar arquivos, uploads AJAX completos, fornecimento de vários arquivos e, diabos, não podíamos obter nenhuma informação sobre o arquivo até que ele chegasse ao servidor; o senhor precisaria fazer o upload do maldito arquivo antes de poder rejeitá-lo!

Atualmente, temos a API de arquivos que nos fornece acesso a informações de arquivos via JavaScript e um input[type=file] . Vamos dar uma olhada em como a API de arquivos funciona!

Acesso a arquivos

Para obter a lista de arquivos mapeados para um determinado input[type=file], o usuário usa o comando files propriedade:

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
	console.log(uploadInput.files) // File listing!
});

Infelizmente o FileList não tem um forEach como o Array, portanto, precisaremos fazer um looping antigo no FileList:

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
  console.log(files[i]);
}

É importante observar que o FileList tem um length propriedade.

Obtendo informações sobre arquivos

Cada arquivo no FileList fornece um bom conjunto de informações sobre cada arquivo, incluindo o tamanho do arquivo, o tipo MIME, a data da última modificação e o nome:

{
	lastModified: 1428005315000,
	lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
	name: "profile.pdf",
	size: 135568,
	type: "application/pdf",
	webkitRelativePath: ""
}

O que é bom em obter essas informações sobre o arquivo é que o senhor pode fazer uma validação muito básica antes de fazer o upload do arquivo. Por exemplo, o senhor pode validar o tipo MIME ou o tamanho total do arquivo:

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i  maxAllowedSize) {
		// Notify the user that their file(s) are too large
	}

	if(files[i].type != 'application/pdf') {
		// Notify of invalid file type for file in question
	}
}

O tamanho total do arquivo é muito grande ou um arquivo não passa no teste? Agora o senhor pode apresentar uma mensagem ao usuário sem precisar carregar e avaliar o arquivo primeiro.

Essa é a minha rápida olhada na API File. Trata-se de uma API simples que pode poupar ao senhor e ao seu usuário algum tempo perdido com upload. Há muito mais coisas que podem ser feitas com a API de arquivos, muitas das quais o senhor pode encontrar em MDN.