28.01.2025

Convertendo Data URI para File e FormData para Carregamentos

Resposta Rápida

Você pode converter um Data URI em um File e incluí-lo em FormData da seguinte maneira:

function dataURItoFormData(dataURI, filename) {
  // Decodifica os dados codificados em base64
  let byteString = atob(dataURI.split(',')[1]);
  // Extrai o tipo MIME do Data URI
  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  // Cria um array de dados binários
  let ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }
  // Cria um arquivo a partir do Blob
  let file = new File([ia], filename, {type: mimeString});

  // Cria um objeto FormData e adiciona o file
  let formData = new FormData();
  formData.append('file', file);

  return formData;
}

// Exemplo de uso
var formData = dataURItoFormData('data:image/png;base64,iVBORw0K...', 'imagem.png');

O processo envolve decodificar base64, extrair o tipo MIME, formar um Blob e adicioná-lo ao FormData.

Procedimento para Converter Data URI em File

Vamos analisar mais de perto como a conversão acontece.

Passo 1: Dividindo o Data URI

Primeiro, você precisa dividir o Data URI em tipo MIME e segmento base64.

let dataURI_parts = dataURI.split(',');
let mimeString = dataURI_parts[0].split(':')[1].split(';')[0];

Em seguida, decodifique o base64:

let byteString = atob(dataURI_parts[1]);

Passo 2: Criando um Blob

Crie uma representação binária para o blob convertendo a string em um Uint8Array.

let ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

Depois, crie o Blob, especificando o tipo MIME:

let blob = new Blob([ia], {type: mimeString});

Passo 3: Preparando o FormData para Submissão

Crie o FormData e adicione o blob como se fosse um arquivo:

let formData = new FormData();
formData.append('file', blob, filename);

Abordagem para Navegadores Modernos

Nas versões mais recentes dos navegadores, o método canvas.toBlob() simplifica a criação de um Blob. Nesse caso, a conversão manual não é necessária:

canvas.toBlob(blob => {
  let formData = new FormData();
  formData.append('file', blob, 'imagem.png');
});

Se esse método não estiver disponível, use a conversão de Data URI como fallback.

API Fetch como Alternativa

Com a API fetch, você pode converter efficientemente base64 em um blob:

fetch(dataURI)
  .then(res => res.blob())
  .then(blob => {
    let formData = new FormData();
    formData.append('file', blob, 'imagem.png');
  });

Garantindo Compatibilidade Entre Navegadores

Não se esqueça de manter suporte para versões mais antigas dos navegadores enquanto explora novas tecnologias:

• Use o construtor Blob, pulando o obsoleto BlobBuilder.
• Prefira Uint8Array em vez de ArrayBuffer ao criar um Blob.
• Utilize os métodos HTMLCanvasElement.prototype.toBlob e URL.createObjectURL() para melhor compatibilidade entre diferentes navegadores.

Visualização

Visualize a conversão de Data URI para um File e a integração no FormData da seguinte maneira:

Data URI 🖼️🔗 Imagem em representação de texto	v 📜 Converter em arquivo (Encerrando o processo)

  v

🌊 Adicionar ao FormData (Carregando) | v 💻 Enviar pela Internet (Enviando!)

Como se você estivesse embrulhando texto (Data URI), transformando-o em um pergaminho (file), colocando-o em uma garrafa (FormData), e enviando-o para flutuar em ondas digitais.

Lista de Verificação para Desenvolvedores

Discutimos vários cenários para garantir a qualidade do seu código.

Manipulando Imagens em Navegadores WebKit

As implementações únicas dos navegadores WebKit são levadas em conta na nossa função dataURItoFormData devido às suas características específicas.

Adaptação para Dispositivos Móveis

Como o WebKit é amplamente utilizado no iOS, essa abordagem é perfeita para carregar Data URI de elementos de canvas em aplicativos móveis.

Trabalhando com Arquivos Grandes

É importante lidar com grandes Data URIs com cuidado—o desempenho é crítico aqui. Para facilitar o trabalho com a interface, use motores JavaScript otimizados ou web workers.

Depuração

Verifique por erros relacionados a tipos MIME mal formados, strings base64 incorretas ou diferenças na implementação de Blob entre os navegadores. A validação e o manuseio adequado de erros são fundamentais aqui.

Recursos Úteis

1. FormData - Web API | MDN — Visão geral sobre o trabalho com FormData.
2. Blob - Web API | MDN — Detalhes sobre o objeto Blob.
3. Canvas API - Web API | MDN — Como usar o Canvas para trabalhar com Data URI.
4. Criando um Blob a partir de uma string base64 em JavaScript - Stack Overflow — Discussão sobre a conversão de base64 para Blob.
5. File API — Padrões para trabalhar com arquivos.
6. Como usar FormData para enviar um arquivo via AJAX? - Stack Overflow — Recomendações para adicionar objetos File ao FormData.
7. Padrão HTML — Guia oficial para criar FormData.

Video

Navigation