Ler arquivos em JavaScript usando as APIs do arquivo

HTML5 Rocks

Introdução

O HTML5 finalmente fornece um formato padrão de interação com arquivos locais por meio da especificação da API de arquivos (link em inglês). Como exemplo de seus recursos, a API de arquivos pode ser utilizada para criar uma visualização em miniatura das imagens ao serem enviadas para o servidor ou permitir que o aplicativo salve uma referência do arquivo quando o usuário estiver off-line. Além disso, você pode utilizar a lógica do lado do cliente para confirmar se o mimetype de um upload corresponde a sua extensão de arquivo ou restringir o tamanho de um upload.

A especificação fornece diversas interfaces para acessar arquivos a partir de um sistema de arquivos "local":

  1. File - um arquivo individual, oferece informações somente leitura como nome, tamanho de arquivo, mimetype e uma referência ao identificador de arquivo.
  2. FileList - uma sequência tipo matriz de objetos File. Exemplos são <input type="file" multiple> ou arrastar um diretório ou arquivos a partir da área de trabalho.
  3. Blob - permite o recorte de um arquivo em intervalos de bytes.

Ao ser usada em conjunto com as estruturas de dados acima, a interface FileReader pode ser utilizada para ler um arquivo de forma assíncrona por meio da manipulação de eventos do JavaScript. Assim, é possível monitorar o progresso da leitura, encontrar erros e determinar quando o carregamento é concluído. De várias maneiras, as APIs são semelhantes ao modelo de evento XMLHttpRequest.

Observação: no momento da criação deste tutorial, as APIs necessárias para o uso de arquivos locais são compatíveis com o Google Chrome 6.0 e o Firefox 3.6. No caso do Firefox 3.6.3, o método File.slice() não é compatível.

Seleção de arquivos

O primeiro passo é verificar se o navegador é totalmente compatível com a API de arquivos:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

Se seu aplicativo precisa somente de algumas dessas APIs, modifique o snippet de acordo.

Como utilizar a entrada de formulário para selecionar

A forma mais direta de carregar um arquivo é utilizar o elemento padrão <input type="file">. O JavaScript retorna a lista de objetos File selecionados como uma FileList. Este exemplo usa o atributo "multiple" para permitir a seleção de diversos arquivos de uma única vez:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Exemplo: como utilizar a entrada de formulário para selecionar. Experimente!

Como utilizar arrastar e soltar para selecionar

Outra técnica de carregamento de arquivos é a função nativa arrastar e soltar a partir da área de trabalho para o navegador. Podemos modificar ligeiramente o exemplo anterior para incluir compatibilidade com a função arrastar e soltar.

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

Exemplo: como utilizar arrastar e soltar para selecionar. Experimente!

Solte arquivos aqui

Observação: alguns navegadores tratam os elementos <input type="file"> como fins nativos onde os arquivos podem ser soltos. Tente arrastar arquivos para o campo "input" do exemplo anterior.

Como ler arquivos

Agora vem a parte divertida!

Depois de obter uma referência de File, crie uma instância do objetoFileReader para ler seu conteúdo na memória. Quando o carregamento for concluído, o evento onload será iniciado e seu atributo result poderá ser utilizado para acessar os dados do arquivo.

O FileReader inclui quatro opções de leitura de arquivo de forma assíncrona:

  • FileReader.readAsBinaryString(Blob|File) - a propriedade result conterá os dados do arquivo/blob como uma sequência binária. Cada byte é representado por um número inteiro dentro do intervalo [0..255].
  • FileReader.readAsBinaryString(Blob|File) - a propriedade result conterá os dados do arquivo/blob como uma string de texto. Por padrão, a string é decodificada como 'UTF-8'. O uso do parâmetro opcional de codificação pode especificar um formato diferente.
  • FileReader.readAsDataURL(Blob|File) - a propriedade result conterá os dados do arquivo/blob codificados como um URL de dados.
  • FileReader.readAsArrayBuffer(Blob|File) - a propriedade result conterá os dados do arquivo/blob codificados como um objeto ArrayBuffer.

Assim que um desses métodos for solicitado no objeto FileReader, onloadstart, onprogress, onload, onabort, onerror e onloadend poderão ser utilizados para acompanhar seu progresso.

O exemplo abaixo filtra imagens selecionadas pelo usuário, solicita reader.readAsDataURL() no arquivo e renderiza uma miniatura ao configurar o atributo "src" como um URL de dados.

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Exemplo: como ler arquivos. Experimente!

Experimente este exemplo com um diretório de imagens!


Como dividir um arquivo

Em alguns casos, a leitura integral de um arquivo na memória não é a melhor opção. Por exemplo, digamos que você queira criar um uploader de arquivos assíncrono. Uma forma possível de acelerar o processo de upload seria ler e enviar o arquivo em partes de diferentes intervalos de bytes. O componente servidor seria então responsável por reconstruir o conteúdo do arquivo na ordem correta.

Felizmente, a interface File é compatível com um método de divisão que oferece compatibilidade com este uso. O método usa um byte inicial como primeiro argumento, um byte final como segundo e uma string de tipo de conteúdo opcional como terceiro. A semântica desse método foi modificada recentemente, por isso recebeu um prefixo do fornecedor:

if (file.webkitSlice) {
  var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice) {
  var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);

O exemplo a seguir demonstra a leitura de pedaços de arquivo. É importante notar que este processo utiliza o evento onloadend e verifica evt.target.readyState em vez de utilizar o evento onload.

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    if (file.webkitSlice) {
      var blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      var blob = file.mozSlice(start, stop + 1);
    }
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>

Exemplo: como dividir um arquivo. Experimente!

Bytes de leitura:

Como monitorar o progresso de uma leitura

Uma das coisas legais que ganhamos de graça ao utilizar a manipulação assíncrona de eventos é a capacidade de monitorar o progresso da leitura do arquivo. Isso é útil para arquivos grandes, para encontrar erros e para descobrir quando uma leitura está concluída.

Os eventos onloadstart e onprogress podem ser utilizados para monitorar o progresso de uma leitura.

O exemplo abaixo demonstra a exibição de uma barra de progresso para monitorar o status de uma leitura. Para ver o indicador de progresso em ação, experimente usar um arquivo grande ou de um disco remoto.

<style>
  #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }
</style>

<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>

<script>
  var reader;
  var progress = document.querySelector('.percent');

  function abortRead() {
    reader.abort();
  }

  function errorHandler(evt) {
    switch(evt.target.error.code) {
      case evt.target.error.NOT_FOUND_ERR:
        alert('File Not Found!');
        break;
      case evt.target.error.NOT_READABLE_ERR:
        alert('File is not readable');
        break;
      case evt.target.error.ABORT_ERR:
        break; // noop
      default:
        alert('An error occurred reading this file.');
    };
  }

  function updateProgress(evt) {
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
      }
    }
  }

  function handleFileSelect(evt) {
    // Reset progress indicator on new file selection.
    progress.style.width = '0%';
    progress.textContent = '0%';

    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert('File read cancelled');
    };
    reader.onloadstart = function(e) {
      document.getElementById('progress_bar').className = 'loading';
    };
    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';
      setTimeout("document.getElementById('progress_bar').className='';", 2000);
    }

    // Read in the image file as a binary string.
    reader.readAsBinaryString(evt.target.files[0]);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Exemplo: como monitorar o progresso de uma leitura. Experimente!

0%

Dica: para realmente ver o indicador de progresso em ação, experimente usar um arquivo grande ou um recurso em disco remoto.

Referências

Comments

0