Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • A moderna API File System Access
  • Trabalhando com arquivos, da maneira clássica
  • Selecionar arquivos
    • Elemento input do HTML
    • Arrastar e soltar personalizado
    • E quanto aos diretórios?
  • Ler os metadados do arquivo
  • Ler o conteúdo de um arquivo
    • Monitore o progresso de um arquivo lido
  • Home
  • All articles

Leia arquivos em JavaScript

Como selecionar arquivos, ler metadados e conteúdo de arquivos e monitorar o progresso de leitura.

Jun 18, 2010 — Atualizado Mar 29, 2021
Available in: English, Español, Русский, 中文, 日本語 e 한국어
Kayce Basques
Kayce Basques
TwitterGitHubGlitchHomepage
Pete LePage
Pete LePage
TwitterGitHubGlitchHomepage
Thomas Steiner
Thomas Steiner
TwitterGitHubGlitchHomepage
Nesta página
  • A moderna API File System Access
  • Trabalhando com arquivos, da maneira clássica
  • Selecionar arquivos
    • Elemento input do HTML
    • Arrastar e soltar personalizado
    • E quanto aos diretórios?
  • Ler os metadados do arquivo
  • Ler o conteúdo de um arquivo
    • Monitore o progresso de um arquivo lido

Poder selecionar e interagir com arquivos no dispositivo local do usuário é um dos recursos mais usados da web. Ele permite que os usuários selecionem arquivos e os enviem para um servidor, por exemplo, transferindo fotos ou documentos fiscais, etc. Mas, também permite que os sites os leiam e manipulem sem nunca ter que transferir os dados pela rede.

A moderna API File System Access #

A API File System Access, que permite o acesso ao sistema de arquivos, fornece uma maneira fácil de ler e gravar em arquivos e diretórios no sistema local do usuário. Atualmente ela está disponível na maioria dos navegadores derivados do Chromium, como Chrome ou Edge. Para saber mais sobre isso, consulte o artigo API File System Access.

Como a API File System Access ainda não é compatível com todos os navegadores, dê uma olhada na biblioteca browser-fs-access, uma biblioteca auxiliar que usa a nova API onde quer que esteja disponível, mas volta para abordagens legadas quando ela não estiver.

Trabalhando com arquivos, da maneira clássica #

Este guia mostra como:

  • Selecionar arquivos
    • Usando o elemento input do HTML
    • Usando uma zona de arrastar e soltar
  • Ler os metadados do arquivo
  • Ler o conteúdo de um arquivo

Selecionar arquivos #

Elemento input do HTML #

A maneira mais fácil de permitir que os usuários selecionem arquivos é usando o elemento <input type="file">, que é suportado todos os principais navegadores. Quando clicado, ele permite que um usuário selecione um arquivo (ou vários arquivos se o atributo multiple estiver incluído), usando a interface de usuário de seleção de arquivo integrada do sistema operacional. Quando o usuário termina de selecionar um arquivo ou arquivos, o evento change do elemento é disparado. Você pode acessar a lista de arquivos através de event.target.files, que é um objeto FileList. Cada item em FileList é um objeto File.

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
Verifique se o window.showOpenFilePicker() é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de arquivo para que você possa, além de ler o arquivo, também escrever de volta nele. Este método pode ser executado via polyfill.

Este exemplo permite que um usuário selecione vários arquivos usando a IU de seleção de arquivo integrada do sistema operacional e, a seguir, registra cada arquivo selecionado no console.

Limite os tipos de arquivos que o usuário pode selecionar #

Em alguns casos, você pode querer limitar os tipos de arquivos que os usuários podem selecionar. Por exemplo, um aplicativo de edição de imagens deve aceitar apenas imagens, não arquivos de texto. Para fazer isso, você pode adicionar um accept ao elemento de entrada para especificar quais arquivos são aceitos.

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

Arrastar e soltar personalizado #

Em alguns navegadores, o elemento <input type="file"> também é um destino para soltar, permitindo que os usuários arrastem e soltem arquivos em seu aplicativo. Mas, o alvo de soltar é pequeno e pode ser difícil de usar. Em vez disso, depois de fornecer a funcionalidade principal usando um elemento <input type="file">, você deve fornecer uma grande superfície personalizada de arrastar e soltar.

Verifique se o DataTransferItem.getAsFileSystemHandle() é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de arquivo para que você possa, além de ler o arquivo, também escrever de volta nele.

Escolha sua zona de soltar #

Sua superfície de soltar dependerá do design de sua aplicação. Você pode querer que apenas parte da janela seja uma superfície de soltar ou, potencialmente, a janela inteira.

Uma captura de tela do Squoosh, um aplicativo da web de compressão de imagem.
Squoosh torna a janela inteira uma zona de soltar.

O Squoosh permite que o usuário arraste e solte uma imagem em qualquer lugar da janela, e clicar em selecionar uma imagem invoca o elemento <input type="file">. Independentemente do que você escolher como zona para soltar, certifique-se de que esteja claro para o usuário que ele pode arrastar e soltar arquivos nessa superfície.

Defina a zona de soltar #

Para permitir que um elemento seja uma zona de arrastar e soltar, você precisará escutar dois eventos, dragover e drop. O dragover atualiza a IU do navegador para indicar visualmente que a ação arrastar e soltar está criando uma cópia do arquivo. O drop é disparado depois que o usuário solta os arquivos na superfície. Semelhante ao elemento input, você pode acessar a lista de arquivos em event.dataTransfer.files, que é um objeto FileList. Cada item em FileList é um objeto File.

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});

event.stopPropagation() e event.preventDefault() impedem que o comportamento default do navegador aconteça e permitem que seu código seja executado. Sem eles, o navegador navegaria para fora da sua página e abriria os arquivos que o usuário colocou na janela do navegador.

Confira Arrastar e soltar personalizado para uma demonstração ao vivo.

E quanto aos diretórios? #

Infelizmente, hoje não existe uma boa maneira de obter acesso a um diretório.

O webkitdirectory no elemento <input type="file"> permite que o usuário escolha um diretório ou diretórios. É compatível com alguns navegadores baseados em Chromium e possivelmente no Safari para desktop, mas tem relatos conflitantes quanto à compatibilidade de navegadores.

Verifique se o window.showDirectoryPicker() é uma alternativa viável para o seu caso de uso, pois ele também devolve uma referência de diretório para que você possa, além de ler o conteúdo do diretório, também gravar de volta nele. Este método pode ser executado via polyfill.

Se o comportamento de arrastar e soltar estiver ativado, um usuário pode tentar arrastar um diretório para a zona de soltar. Quando o evento drop for disparado, ele incluirá um objeto File para o diretório, mas não poderá acessar nenhum dos arquivos do diretório.

Ler os metadados do arquivo #

O objeto File contém várias propriedades de metadados sobre o arquivo. A maioria dos navegadores fornece o nome do arquivo, o tamanho do arquivo e o tipo MIME, embora dependendo da plataforma, navegadores diferentes possam fornecer informações diferentes ou adicionais.

function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}

Você pode ver isto em ação na demonstração Glitch do input-type-file

Ler o conteúdo de um arquivo #

Para ler um arquivo, use FileReader, que permite ler o conteúdo de um objeto File na memória. Você pode instruir o FileReader a ler um arquivo como um array buffer, uma URL de dados ou texto .

function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}

const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}

O exemplo acima lê um File fornecido pelo usuário, depois o converte em uma URL de dados e usa essa URL de dados para exibir a imagem em um elemento img. Veja o Glitch read-image-file para saber como verificar se o usuário selecionou um arquivo de imagem.

Monitore o progresso de um arquivo lido #

Ao ler arquivos grandes, pode ser útil fornecer alguma experiência ao usuário para indicar o quanto a leitura progrediu. Para isso, use o evento progress fornecido pelo FileReader. O evento progress fornece duas propriedades, loaded, a quantidade lida e total, a quantidade total a ser lida.

function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});

reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}

Imagem do herói por Vincent Botta de Unsplash

Armazenamento
Last updated: Mar 29, 2021 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.