Las interfaces de arrastrar y soltar HTML permiten que las aplicaciones web acepten archivos arrastrados y soltados en una página web. Durante una operación de arrastrar y soltar, los elementos del directorio y del archivo arrastrados se asocian con entradas de archivos y de directorios, respectivamente. Cuando se trata de arrastrar y soltar archivos en el navegador, hay dos formas de hacerlo: la moderna y la clásica.
La forma moderna
Cómo usar el método DataTransferItem.getAsFileSystemHandle()
de la API de File System Access
El método DataTransferItem.getAsFileSystemHandle()
muestra una promesa con un objeto FileSystemFileHandle
si el elemento arrastrado es un archivo y una promesa con un objeto FileSystemDirectoryHandle
si el elemento arrastrado es un directorio. Estos controladores te permiten leer el archivo o directorio y, si lo deseas, volver a escribirlo. Ten en cuenta que el elemento DataTransferItem.kind
de la interfaz de arrastrar y soltar será "file"
para los archivos y directorios, mientras que el FileSystemHandle.kind
de la API de File System Access será "file"
para los archivos y "directory"
para los directorios.
La forma clásica
Usa el método DataTransferItem.webkitGetAsEntry()
no estándar
El método DataTransferItem.webkitGetAsEntry()
muestra el FileSystemFileEntry
del elemento de datos de arrastre si el elemento es un archivo y FileSystemDirectoryEntry
si el elemento es un directorio. Si bien puedes leer el archivo o directorio, no hay forma de volver a escribir en ellos. Este método tiene la desventaja de que no está en el segmento estándar, pero tiene la ventaja de que admite directorios.
Mejora progresiva
En el siguiente fragmento, se usa el método DataTransferItem.getAsFileSystemHandle()
de la API de File System Access moderna cuando es compatible, luego recurre al método DataTransferItem.webkitGetAsEntry()
no estándar y, por último, recurre al método clásico DataTransferItem.getAsFile()
. Asegúrate de verificar el tipo de cada handle
, ya que puede ser cualquiera de las siguientes opciones:
FileSystemDirectoryHandle
cuando se elige la ruta de código moderna.FileSystemDirectoryEntry
cuando se elige la ruta de acceso de código no estándar
Todos los tipos tienen una propiedad name
, por lo que registrarla está bien y siempre 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}`);
}
}
});
Lecturas adicionales
Demostración
<!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>
: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;
}
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`;
}
}
});