HTML file upload with jQuery/Ajax not working
===

I'm trying to incorporate some code from Stack user DannYo's [comment here][1], however my version of his code doesn't seem to run. The error and the "beforesend" functions return each time.

**HTML**

    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" id="file">
        <input type="email" id="sender" name="sender" required>
        <input type="email" id="receiver" name="receiver" required>
        <input type="text" id="message" name="message">
        <button id="send" class="button">Send it</button>
    </form>

**JavaScript**

    $("form").on("submit", function() {
		
		var formData = new FormData($('form')[0]);
		
		$.ajax({
			url: 'upload.php',  //server script to process data
			type: 'POST',
			xhr: function() {  // custom xhr
				
				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() { console.log("before send function works"); },
			success: function(e) {
				console.log(e);
			},
			error: function() { console.log("error function works"); },
			
			// Form data
			data: formData,
			
			//Options to tell JQuery not to process data or worry about content-type
			cache: false,
			contentType: false,
			processData: false
		});
		
		return false;
		   
	});

**PHP**

For testing purposes, the `upload.php` file only has `<?php echo "success"; ?>`

Using Chrome's network developer tool, I don't see my file being transferred anywhere. Anybody see a glaring hole in my code? Thanks

  [1]: http://stackoverflow.com/a/8758614/362136