I am working on a drag-and-drop upload feature. Through the drop event, I use e.dataTransfer.items to retrieve the handles for all files and folders, then call the items[n].webkitGetAsEntry() method to get the FileEntry object. Finally, I attempt to use the FileEntry.file((file) => {}) method to retrieve the file object from the callback:
function traverseFileTree(item, path = "") {
// The item here is the return value of webkitGetAsEntry().
const isRecursive = document.getElementById("recursiveOption").checked;
if (item.isFile) {
item.file(
(file) => {
console.log("file", file);
if (file.name.toLowerCase().endsWith(".md")) {
file.fullPath = path + file.name;
files.push(file);
updateFileList();
}
},
(error) => {
console.error(error);
showPopup(`Failed to read file ${item.name}: ${error.message}`);
}
);
} else if (item.isDirectory) {
if (isRecursive || path === "") {
let dirReader = item.createReader();
dirReader.readEntries(
(entries) => {
for (let i = 0; i < entries.length; i++) {
traverseFileTree(entries[i], path + item.name + "/");
}
},
(error) => {
console.error("Failed to read directory:", error);
showPopup(`Failed to read directory ${item.name}: ${error.message}`);
}
);
}
}
}
However, something strange happens: when I open the HTML file directly in the browser (using the file protocol), the .file() method throws an EncodingError:
file:
EncodingError: A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs.
But, when I serve the same HTML file through a local server (e.g., using Live Server over HTTP), the .file() method works as expected and I can successfully retrieve the file object.
http:
I’ve searched various resources and consulted GPT but couldn’t find a definitive answer. I suspect the issue may be related to browser security policies or relative path restrictions. Has anyone encountered this problem or knows what might be causing it?
I wish:
Understand the specific cause of this issue.
How should I solve similar problems on my own in the future?
Thank you!