Question

I’m trying to implement an ability to upload files and folders. I drop some files and folders in chrome, then i get a list of entries of type dataTransferItemList, then i want to perform some action for each of the entries in the list. I get an entry with webkitGetAsEntry function and when i try to call file function of FileEntry object dataTransferItemList becomes empty.

_processEntries: function () {
        //this._entries list of entries of type dataTransferItemList
        var entry = this._getNetxFileEntry(this._entries);
        if (!isNullOrUndefined(entry)) {
            if (entry.webkitGetAsEntry) {
                entry = entry.webkitGetAsEntry();
            } else {
                //TODO: code for other browsers without getAsEntry implementation
            }

            if (entry.isFile) {
                this._readAsFileEntry(entry);
            }
            else if (entry.isDirectory) {
                this._readAsDirectoryEntry(entry);
            }
        }
    },

    _readAsFileEntry: function (fileEntry) {
        fileEntry.file($.proxy(this._onFileSuccessfullyRead, this));
    },

    _onFileSuccessfullyRead: function (file) {
        //Here this._entries becomes empty so i can't read next entry
    },

Why does in happen and how can i process all enties in this situation?
Thanks for help.

Answer 1

I too had a lot of headaches with this.

I solved this way

afterInit : function() {

    this.uploads = [];

    this.entries = [];
    for ( var i = 0; i < this.options.items.length; i++)
        this.entries.push(this.options.items[i].webkitGetAsEntry());

    this.scan(0);

},

scan : function(i) {

    if (i >= 0 && i < this.entries.length) {

        var entry = this.entries[i];

        if (entry.isDirectory) {
            entry.createReader().readEntries(this.readEntries.bind(this, i + 1));
        } else if (entry.isFile) {
            this.manageFileEntry(entry);
            this.scan(i + 1);
        }

    } else if (this.uploads.length > 0)
        this.doUpload(0);

}

Remember that .file() and .readEntries() are asynchronous. This means that your method will return immediately and the JS engine is allowed to “free” resources. Being it async, there is a moment (namely when your method returns) that has the dataTransferItemList out of scope, and as such, freed (set to null).

As you can see in my code, I preventively save the entries references calling .webkitGetAsEntry() before my items get out of scope because of the async calls to .file() or .readEntries().

Hope this helps, I spend 2 hours debugging this before figuring out a solution!