im not quite sure what to do next, followed along a few other tutorials etc and cant seem to get this to work.
I have a folder full of subfolders and files and i want to drop them on my web app and from there read out the top level folder all sub folders and all files within said folders.
It works but only ever reads out the top folder never goes into subfolders OR files – maybe im missing something..
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Drop Zone</title>
</head>
<body>
<div id="drop-zone" style="width: 100%; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
Drop files here
</div>
<script src="app.js"></script>
</body>
</html>
Javascript
// Function to handle file drop
async function dropHandler(event) {
event.preventDefault();
console.log('Drop event triggered');
const files = await getDroppedFilesFromFolder(event);
console.log('Received', files.length, 'files from drop:', files);
// Your logic here
}
async function getDroppedFilesFromFolder(event) {
console.log('Getting files from dropped folders');
const dataTransfer = event.dataTransfer;
const fileList = [];
for (let i = 0; i < dataTransfer.items.length; i++) {
const item = dataTransfer.items[i];
if (item.kind === 'file') {
console.log('Found file:', item.getAsFile().name);
fileList.push(item.getAsFile().name);
} else if (item.kind === 'directory') {
console.log('Found directory:', item.webkitGetAsEntry().name);
const directory = await processDirectoryEntry(item.webkitGetAsEntry());
fileList.push(...directory);
}
}
console.log('Finished getting files from dropped folders:', fileList);
return fileList;
}
async function processDirectoryEntry(directoryEntry) {
const files = [];
const directoryReader = directoryEntry.createReader();
const readEntries = () => {
return new Promise((resolve, reject) => {
directoryReader.readEntries((entries) => {
resolve(entries);
}, reject);
});
};
const processEntries = async () => {
let entries;
while ((entries = await readEntries())) {
for (let entry of entries) {
if (entry.isFile) {
console.log('Found file in directory:', entry.name);
files.push(entry.name);
} else if (entry.isDirectory) {
console.log('Found subdirectory:', entry.name);
files.push(entry.name);
}
}
}
};
await processEntries();
return files;
}
// Prevent default behavior for drag events
function preventDefault(event) {
event.preventDefault();
event.stopPropagation();
}
// Initialize the application
function init() {
console.log('Initializing application');
const dropZone = document.getElementById('drop-zone');
// Add event listeners for drag events
dropZone.addEventListener('drop', dropHandler);
dropZone.addEventListener('dragover', preventDefault);
dropZone.addEventListener('dragenter', preventDefault);
console.log('Event listeners added');
}
// Call the init function when the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM content loaded');
init();
});
New contributor
tidy file is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.