As interfaces HTML arrastar e soltar permitem que aplicativos da Web aceitem arquivos arrastados e soltos em uma página da Web. Durante uma operação de arrastar e soltar, os itens de arquivo e diretório arrastados são associados às entradas de arquivo e de diretório, respectivamente. Há duas maneiras de arrastar e soltar arquivos no navegador: a moderna e a clássica.
O jeito mais moderno
Como usar o método DataTransferItem.getAsFileSystemHandle()
da API File System Access
O método DataTransferItem.getAsFileSystemHandle()
vai retornar uma promessa com um
objeto FileSystemFileHandle
se o item arrastado for um arquivo, e uma promessa com um
objeto FileSystemDirectoryHandle
se o item arrastado for um diretório. Esses identificadores permitem ler
e, opcionalmente, gravar de volta no arquivo ou diretório. Observe que o
DataTransferItem.kind
da interface de arrastar e soltar
será "file"
para arquivos e diretórios, enquanto o
FileSystemHandle.kind
da API File System Access
será "file"
para arquivos e "directory"
para diretórios.
A forma clássica
Como usar o método DataTransferItem.webkitGetAsEntry()
não padrão
O método DataTransferItem.webkitGetAsEntry()
vai retornar o FileSystemFileEntry
do item de dados de arrastar se o item for um arquivo, e FileSystemDirectoryEntry
se o item for um diretório. Embora seja possível ler
o arquivo ou diretório, não há como fazer gravações neles. A desvantagem desse método não é o controle padrão, mas sim a compatibilidade com diretórios.
Aprimoramento progressivo
O snippet abaixo usa o método
DataTransferItem.getAsFileSystemHandle()
da API File System Access quando há suporte. Em seguida, ele usa o
método DataTransferItem.webkitGetAsEntry()
não padrão e, por fim, retoma o método
DataTransferItem.getAsFile()
clássico. Verifique o tipo de cada handle
, já que ele pode ser:
FileSystemDirectoryHandle
quando o caminho do código moderno é escolhido.FileSystemDirectoryEntry
quando o caminho do código não padrão é escolhido.
Todos os tipos têm uma propriedade name
. Portanto, a geração de registros é aceitável, e sempre vai funcionar.
// Run feature detection.
const supportsFileSystemAccessAPI =
'getAsFileSystemHandle' in DataTransferItem.prototype;
const supportsWebkitGetAsEntry =
'webkitGetAsEntry' in DataTransferItem.prototype;
// This is the drag and drop zone.
const elem = document.querySelector('main');
// Prevent navigation.
elem.addEventListener('dragover', (e) => {
e.preventDefault();
});
// Visually highlight the drop zone.
elem.addEventListener('dragenter', (e) => {
elem.style.outline = 'solid red 1px';
});
// Visually unhighlight the drop zone.
elem.addEventListener('dragleave', (e) => {
elem.style.outline = '';
});
// This is where the drop is handled.
elem.addEventListener('drop', async (e) => {
// Prevent navigation.
e.preventDefault();
if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
// Cannot handle directories.
return;
}
// Unhighlight the drop zone.
elem.style.outline = '';
// Prepare an array of promises…
const fileHandlesPromises = [...e.dataTransfer.items]
// …by including only files (where file misleadingly means actual file _or_
// directory)…
.filter((item) => item.kind === 'file')
// …and, depending on previous feature detection…
.map((item) =>
supportsFileSystemAccessAPI
// …either get a modern `FileSystemHandle`…
? item.getAsFileSystemHandle()
// …or a classic `FileSystemFileEntry`.
: item.webkitGetAsEntry(),
);
// Loop over the array of promises.
for await (const handle of fileHandlesPromises) {
// This is where we can actually exclusively act on the directories.
if (handle.kind === 'directory' || handle.isDirectory) {
console.log(`Directory: ${handle.name}`);
}
}
});
Leia mais
Demonstração
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to drag and drop directories</title>
</head>
<body>
<main>
<h1>How to drag and drop directories</h1>
<p>Drag and drop one or multiple files or directories onto the page.</p>
<pre></pre>
</main>
</body>
</html>
CSS
:root {
color-scheme: dark light;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 1rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
img,
video {
height: auto;
max-width: 100%;
}
main {
flex-grow: 1;
}
footer {
margin-top: 1rem;
border-top: solid CanvasText 1px;
font-size: 0.8rem;
}
JS
const supportsFileSystemAccessAPI =
"getAsFileSystemHandle" in DataTransferItem.prototype;
const supportsWebkitGetAsEntry =
"webkitGetAsEntry" in DataTransferItem.prototype;
const elem = document.querySelector("main");
const debug = document.querySelector("pre");
elem.addEventListener("dragover", (e) => {
// Prevent navigation.
e.preventDefault();
});
elem.addEventListener("dragenter", (e) => {
elem.style.outline = "solid red 1px";
});
elem.addEventListener("dragleave", (e) => {
elem.style.outline = "";
});
elem.addEventListener("drop", async (e) => {
e.preventDefault();
elem.style.outline = "";
const fileHandlesPromises = [...e.dataTransfer.items]
.filter((item) => item.kind === "file")
.map((item) =>
supportsFileSystemAccessAPI
? item.getAsFileSystemHandle()
: supportsWebkitGetAsEntry
? item.webkitGetAsEntry()
: item.getAsFile()
);
for await (const handle of fileHandlesPromises) {
if (handle.kind === "directory" || handle.isDirectory) {
console.log(`Directory: ${handle.name}`);
debug.textContent += `Directory: ${handle.name}\n`;
} else {
console.log(`File: ${handle.name}`);
debug.textContent += `File: ${handle.name}\n`;
}
}
});