JavaScript Academy · Aula

Arrastando arquivos para a página

Trate arquivos soltos a partir da área de trabalho.

Aula 4 de 413 etapas

Arrastando arquivos para a página é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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.

Arquivos da área de trabalho

Além de mover elementos, a API de arrastar e soltar permite que os usuários arrastem arquivos do sistema operacional para a sua página — a base das zonas de soltura para envio.

Aceitando solturas de arquivos

A configuração é semelhante à de solturas de elementos: impeça o comportamento padrão em dragover e na soltura. A diferença é que você lê arquivos em vez de usar getData.

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

Ao soltar, e.dataTransfer.files é uma FileList de objetos File soltos.

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

Percorrendo arquivos

Uma FileList se comporta como um vetor. Converta-a com o operador de expansão para percorrê-la usando métodos de vetor.

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

Metadados do arquivo

Cada File expõe name, size (bytes), type (MIME) e lastModified sem ler o conteúdo.

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

Filtrando por tipo

Valide os arquivos soltos antes de processá-los — por exemplo, aceite apenas imagens.

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

Lendo o conteúdo de arquivos

Use FileReader para ler um arquivo. Use readAsText para texto e readAsDataURL para visualizações prévias.

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

Visualizando imagens soltas

URL.createObjectURL(file) fornece uma URL de visualização prévia instantânea sem ler o arquivo inteiro. Revogue-a quando terminar para liberar memória.

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

itens versus arquivos

dataTransfer.items é mais completo que files: cada DataTransferItem informa kind ("file" ou "string") e pode fornecer um arquivo ou uma entrada de diretório.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

Enviando arquivos soltos

Coloque os arquivos em FormData e envie-os por POST ao seu servidor.

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

Impedindo a navegação acidental

Se um arquivo for solto fora da sua zona, o navegador navegará até ele. Proteja o documento inteiro para impedir isso.

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

Verificação rápida

Teste as solturas de arquivos.

Responda na aula interativa

Recapitulação: arrastando arquivos para dentro

Você criou uma zona de soltura de arquivos, leu dataTransfer.files, examinou metadados, filtrou por tipo, visualizou imagens previamente com URLs de objetos, usou FileReader, enviou arquivos com FormData e impediu a navegação acidental. Isso conclui o conteúdo sobre arrastar e soltar.

Grátis para começar

Aprenda JavaScript com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 59
Aulas: 200

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Arrastando arquivos para a página” é grátis?

Sim — o texto completo de “Arrastando arquivos para a página” é 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 “Arrastando arquivos para a página”?

Trate arquivos soltos a partir da área de trabalho. 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 4 de 4.

Quanto tempo leva a aula “Arrastando arquivos para a página”?

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