I am trying to implement a feature where users can drag and drop multiple files to their desktop for direct download. If I drag one file, it works perfectly, but when I try to drag multiple files at once, it doesn’t work.
What I Tried: Setting dataTransfer.setData("DownloadURL", ...) for each file This works for a single file, but for multiple files, only one file is downloaded. Joining multiple files with \n separator: Some sources suggest setting multiple DownloadURL values using newline separation:
vent.dataTransfer.setData("DownloadURL", "application/pdf:file1.pdf:.pdf\napplication/pdf:file2.pdf:.pdf");
However, Chrome is giving that file is not availible.
Using dataTransfer.items instead of dataTransfer.setData: I tried dynamically adding files using event.dataTransfer.items.add(), but this doesn’t seem to support file downloads.
code:
document.addEventListener("dragstart", function (event) {
let draggedFiles = document.querySelectorAll(".files-a[data-selected='1']");
if (draggedFiles.length === 0) {
let singleFile = event.target.closest(".files-a");
if (singleFile) {
draggedFiles = [singleFile]; // Convert single file to an array
}
} else {
draggedFiles = Array.from(draggedFiles); // Convert NodeList to an array
}
if (draggedFiles.length > 0) {
console.log("Dragging multiple files:", draggedFiles);
let downloadLinks = draggedFiles.map(file => {
let fileUrl = file.getAttribute("href");
let fileName = file.getAttribute("data-name") || fileUrl.split('/').pop();
let mimeType = getMimeType(fileUrl);
return `${mimeType}:${fileName}:${window.location.origin + "/priloge/" + fileUrl}`;
}).join("\n"); // Attempt to set multiple files
event.dataTransfer.setData("DownloadURL", downloadLinks);
}
});
My Questions: Is it even possible to drag and drop multiple files for direct download in Chrome? Is there a workaround to trigger multiple file downloads via drag-and-drop? Does any browser allow DownloadURL with multiple files, or is this a hard restriction? I am testing in Chrome, but I’m open to hearing about other browser behaviors as well. Any help would be appreciated!