JavaScript Academy · Aula

Lendo arquivos com FileReader

Leia arquivos selecionados como texto ou URLs de dados.

Lendo arquivos com FileReader é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é FileReader?

FileReader é uma API do navegador que lê de forma assíncrona o conteúdo de objetos File e Blob. Você obtém um arquivo de um <input type="file"> e o lê como texto, URL de dados ou dados binários.

Obtendo um arquivo de uma entrada

Uma entrada de arquivo expõe uma lista files. O primeiro arquivo selecionado está no índice 0, com propriedades úteis como name, size e type.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

A leitura é assíncrona

FileReader não retorna os dados diretamente. Você associa um manipulador onload e depois chama um método de leitura. O resultado chega mais tarde em reader.result.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText decodifica o arquivo como uma cadeia de texto, ideal para arquivos .txt, .csv ou JSON.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL produz uma URL data: em base64. Isso é perfeito para visualizar uma imagem atribuindo o resultado a img.src.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer fornece dados binários brutos como um ArrayBuffer, útil para analisar formatos de arquivo byte a byte.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Lidando com erros

Associe um manipulador onerror para capturar falhas de leitura, por exemplo, quando um arquivo não pode ser lido.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

Acompanhando o progresso

Para arquivos grandes, o evento onprogress informa quantos bytes foram carregados até o momento, o que é útil para barras de progresso.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Encapsulando em uma Promise

A API baseada em eventos é pouco prática. Encapsule-a em uma Promise para poder usar await e escrever um código mais limpo.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Alternativa moderna: file.text()

Os navegadores modernos permitem chamar diretamente file.text(), file.arrayBuffer() ou file.stream(), que retornam Promises. Essas opções são mais simples que FileReader em muitos casos.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

Por que FileReader é importante

FileReader permite processar arquivos selecionados pelo usuário inteiramente no navegador: visualizar imagens, analisar arquivos CSV ou validar envios antes de enviá-los. Escolha o método de leitura de acordo com os dados necessários: texto, URL de dados ou dados binários. Em seguida, você explorará objetos binários e URLs de objeto.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Verificação rápida

Qual método de FileReader fornece uma cadeia em base64 adequada para a propriedade src de uma visualização de imagem?

Recapitulação: lendo arquivos

Você aprendeu a ler o conteúdo de arquivos:

Obtenha os arquivos de input.files; a leitura é assíncrona por meio de onload.
readAsText, readAsDataURL e readAsArrayBuffer retornam formatos diferentes.
Lide com onerror e onprogress para tornar o código mais robusto.
file.text() e file.arrayBuffer() são alternativas modernas baseadas em Promise.

Perguntas Frequentes

A aula “Lendo arquivos com FileReader” é grátis?

Sim — o texto completo de “Lendo arquivos com FileReader” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Lendo arquivos com FileReader”?

Leia arquivos selecionados como texto ou URLs de dados. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Lendo arquivos com FileReader”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy