I'm making a file upload system where the user can upload a folder of files/folder. I have my code to recognize the files when you drop them onto a div box.

it goes through each one to check if it is a directory or a file. If it is a file it calls uploadFile(entry) to it.

The problem is it's only uploading the LAST file it recognizes. It successfully alerts me of each folder, sub folder & files but will not upload them.

I am very noobish with Javascript so please be thorough in any explanation.



Code:
        var files = event.dataTransfer.files;
		
        //Add the data to the form.
		var entry;
        for (var i = 0; i < files.length; i++) {
			entry = event.dataTransfer.items[i].webkitGetAsEntry();
			traverseFolder(entry);
			}

Code:
function traverseFolder(itemEntry)
{
if (itemEntry.isFile) {
	alert('FILE: ' + itemEntry.name);
	itemEntry.file(function(theFile){uploadFile(theFile);});
	
		
	}
else if (itemEntry.isDirectory)
{
alert('DIR: ' + itemEntry.name);

var dirReader = itemEntry.createReader();
dirReader.readEntries(
function(entries){
var idx = entries.length;
for (var i = 0; i < idx; i++){
	traverseFolder(entries[i]);
}

}
);};
}

Code:
   function uploadFile(file) {
	alert('uploading a file...');
        var formData = new FormData($('#upload-file')[0]);
        formData.append('file', file)
        $.ajax({
            url: 'admin_upload2.php',  //server script to process data
            type: 'POST',
            xhr: function () {  // custom xhr
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // check if upload property exists
					myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            //Ajax events
            beforeSend: function () {
                $('#upload-feedback').html('<h3>Upload starting...</h3>')
            },
            success: function (data) {
                $('#upload-feedback').html(data + '<h3>file uploaded!</h3>')
            },
            error: function () {
                $('#upload-feedback').html('<h3>file upload failed!</h3>')
            },
            // Form data
            data: formData,
            //Options to tell JQuery not to process data or worry about content-type
            cache: false,
            contentType: false,
            processData: false
        });
    }