HTML 5 Drag and Drop (FileEntry)

I am trying to implement drag and drop using folders in HTML5 and I found an issue with converting the FileEntry to an actual file object as used in the single file handler.

        e.originalEvent.dataTransfer.items[i].webkitGetAsEntry();

        if (entry.isFile) {

            var files = e.originalEvent.dataTransfer.files;
            //We need to send dropped files to Server
            handleFileUpload(files);

        } else if (entry.isDirectory) {

            readFileTree(entry);
        }
    }

handleFileUpload uses:

function handleFileUpload(files) {
    for (var i = 0; i < files.length; i++) {
        var fd = new FormData();
        fd.append('file', files[i]);
        fd.append('library', $('#ddlDMSLibraries').val());
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name, files[i].size);

        sendFileToServer(fd, status);
    }
}

While readFileTree calls handleFolderUpload with FileEntry as shown below:

function handleFileUploadFolder(fileEntry){

    var fd = new FormData();
    fd.append('file', fileEntry.file);
    fd.append('library', $('#ddlDMSLibraries').val());
    var status = new createStatusbar(obj); //Using this we can set progress.

    fileEntry.getMetadata(function (metadata) {

        status.setFileNameSize(fileEntry.name, metadata.size);

        sendFileToServer(fd, status);
    });

Single file upload works perfect while folder upload crashes on context.Request.Files[0] since Files does not contain any objects.

public void ProcessRequest(HttpContext context)
{

    FileItManager manager = new FileItManager();

    HttpPostedFile file = context.Request.Files[0];

Any ideas how to accomplish this?


Source: html5

Leave a Reply