API do FileReader

À medida que a velocidade da banda larga continua a aumentar, a Web continua a ser mais centrada na mídia. Às vezes, isso pode ser bom (Netflix, outros serviços de streaming), às vezes pode ser ruim (querer ler um artigo de notícias, mas ele vem acompanhado de um vídeo inútil). E todos os serviços sociais fazem o possível para exibir uma imagem com qualquer upload de usuário.

Uma coisa que eu detestava ao trabalhar com arquivos fornecidos pelo usuário era ter que hospedá-los em um servidor em algum lugar: os arquivos carregados ocupam espaço em disco e, em alguns casos, tornam-se um problema de segurança….até agora. O FileReader permite que o senhor acesse os arquivos do usuário e seu conteúdo a partir da máquina dele, sem precisar fazer upload para o seu servidor.

O HTML

O FileReader API funciona a partir do API de arquivo e, portanto, requer um input[type="file"] elemento:

<-- Let's go big and enable for multiple file uploads -->
<input type="file" id="upload-file" multiple />

<-- We'll display the image in this DIV -->
<div id="destination"></div>

Leia meu Arquivo API para saber mais sobre o que ela oferece, como localização, tamanho, tipo e muito mais.

O JavaScript

Este exemplo exige que uma imagem seja escolhida dentro do input; uma vez que a imagem é escolhida pelo usuário em seu computador, ela deve ser exibida na página:

document.getElementById('upload-file').addEventListener('change', function() {
	var file;
	var destination = document.getElementById('destination');
	destination.innerHTML = '';

	// Looping in case they uploaded multiple files
	for(var x = 0, xlen = this.files.length; x < xlen; x++) {
		file = this.files[x];
		if(file.type.indexOf('image') != -1) { // Very primitive "validation"

			var reader = new FileReader();

			reader.onload = function(e) {
				var img = new Image();
				img.src = e.target.result; // File contents here

				destination.appendChild(img);
			};
			
			reader.readAsDataURL(file);
		}
	}
});

Este exemplo usa FileReader‘s readAsDataURL para converter o conteúdo do arquivo em uma string codificada em base64 que pode ser usada como um URI de dados de imagem para o src . Outros FileReader tipos de leitura incluem readAsText, readAsArrayBuffer, e readAsBinaryString.

Com essa API, o senhor pode evitar o upload de arquivos brutos de usuários para o servidor, o que eu adoro. O senhor também pode pré-tratar o conteúdo antes de fazer o upload manual do conteúdo do usuário para seus servidores. Um exemplo de como isso é usado é o teste do smartcrop.js. Se o senhor tiver outras ideias de uso, compartilhe-as!