1

I have a problem: the following code perfeclty works from an HTTP server, but not from a local html5 file (FILE:///).

Any idea why? Any suggestion to allow a file drag and drop for directory upload?

CSS:

#drop_zone {
    font-size: 30px;
    text-align: center;
    width: 100%;
    height: 200px;
    border: 1px solid black;
}

HTML:

<div id="drop_zone">Drop files here</div>

Javascript:

function error(e) {
    console.log('error');
    console.log(e);
}

function error_from_readentries(e) {
    console.log('error_from_readentries');
    console.log(e);
}

function traverseFileTree(item, path) {
    path = path || "";
    if (item.isFile) {
        // Get file
        item.file(function(file) {
            console.log("File: " + path + file.name);
        }, error);
    } else if (item.isDirectory) {
        // Get folder contents
        var dirReader = item.createReader();
        dirReader.readEntries(function(entries) {
            for (var i=0; i<entries.length; i++) {
                traverseFileTree(entries[i], path + item.name + "/")
            }
        }, error_from_readentries);
    }
}

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
        var items = evt.dataTransfer.items;
    for (var i = 0; i < items.length; i++) {
        var item = items[i].webkitGetAsEntry();
        if (item) {
            traverseFileTree(item);
        }
    }
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';
}

//Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

Thanks a lot!

ChibiTomo
  • 484
  • 1
  • 6
  • 15

1 Answers1

0

Why: Looks like readEntries raises an error when using the FILE:// protocol. Bug in webkit or Chrome. Suggestion: unfortunately no.

I am using Chrome (Version 28.0.1500.95)

jlguenego
  • 1,192
  • 15
  • 23