Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Drag and Drop Demo</title> | |
| <style> | |
| #drop_zone { | |
| width: 300px; | |
| height: 200px; | |
| border: 2px dashed #aaa; | |
| line-height: 200px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="drop_zone">Drop files or folders here</div> | |
| <ul id="file_list"></ul> | |
| <input type="file" id="fileInput" multiple /> | |
| <input type="file" id="dirInput" webkitdirectory="" /> | |
| <script> | |
| let dropZone = document.getElementById('drop_zone'); | |
| let fileList = document.getElementById('file_list'); | |
| dropZone.ondragover = function (event) { | |
| event.preventDefault(); | |
| this.style.backgroundColor = '#ccc'; | |
| }; | |
| dropZone.ondrop = function (event) { | |
| event.preventDefault(); | |
| this.style.backgroundColor = '#fff'; | |
| let items = event.dataTransfer.items; | |
| for (let i = 0; i < items.length; i++) { | |
| let item = items[i].webkitGetAsEntry(); | |
| if (item) { | |
| traverseFileTree(item); | |
| } | |
| } | |
| }; | |
| function traverseFileTree(item, path = '') { | |
| if (item.isFile) { | |
| // Get file | |
| item.file(function(file) { | |
| let listItem = document.createElement('li'); | |
| listItem.textContent = path + file.name; | |
| fileList.appendChild(listItem); | |
| }); | |
| } else if (item.isDirectory) { | |
| // Get folder contents | |
| let dirReader = item.createReader(); | |
| dirReader.readEntries(function(entries) { | |
| for (let i=0; i<entries.length; i++) { | |
| traverseFileTree(entries[i], path + item.name + "/"); | |
| } | |
| }); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |