Uploading a File with AJAX with Symphony

ajax-upload.js

$(document).ready(function() {
	// FormData is magic.
	var formData = new FormData();

	// Listen for drag/drop events.
	$('#drop-here')
		.on('dragover', function(event) {
			event.preventDefault();
		})
		.on('drop', function(event) {
			event.preventDefault();

			var files = event.originalEvent.dataTransfer.files;
			if(files.length) preview(files);
		});

	// Show the preview of the file (if it can) and then do the 'upload'
	var preview = function(files) {
		for(var i = 0, ii = files.length; i < ii; i++) {
			// If it's an image, show a preview yo!
			if (files[i].type.match(/image.*/) && typeof FileReader == 'function') {
				var reader = new FileReader();

				// Listen for when the Reader is invoked
				reader.onload = function(event) {
					var img = document.createElement('img');
					img.src = event.target.result;
					img.width = 200;

					// Preview the image
					$('#drop-here').append(img);
				}

				reader.readAsDataURL(files[i]);
			}

			// Add single image to formData.
			// formData.append('fields[file]', files[i]);

			// Symphony event has 'allow-multiple', so add images accordingly
			formData.append('fields[' + i + '][file]', files[i]);
		}

		upload();
	};

	// Thanks https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
	var handleProgess = function(event, xhr) {
		if (event.lengthComputable) {
			var percentage = Math.round((event.loaded * 100) / event.total);
			$('#progress').text('Uploading ' + percentage + '%');
		}
	}

	// Upload the file to Symphony.
	var upload = function() {
		var data = formData,
			jQueryDefaultXHR = $.proxy($.ajaxSettings.xhr, $.ajaxSettings);

		// Add Symphony trigger
		data.append('action[file-upload]', 'yes');

		$.ajax({
			url: window.location,
			processData: false,
			type: 'POST',
			// Add an onprogress listener to the original XHR object. This extends
			// jQuery implementation of creating XHR by merely adding a listener
			// for 'progress'. Ta https://github.com/kpozin/jquery-ajaxprogress
			xhr: function() {
				var xhr = this;
				var defaultXHR = jQueryDefaultXHR();
				if (defaultXHR) {
					defaultXHR.addEventListener("progress", function(event) {
						handleProgess(event, xhr);
					}, false);
				}
				return defaultXHR;
			},
			beforeSend: function(jqXHR, settings) {
				settings.data = formData;
			},
			success: function(data, textStatus, jqXHR) {
				$('#progress').text('Upload complete!');
			},
			error: function(data, textStatus, jqXHR) {
				$('#progress').text('Upload failed!');
			}
		});
	}
});

upload.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
	doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
	doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	omit-xml-declaration="yes"
	encoding="UTF-8"
	indent="yes" />

<xsl:template match="/">
	<h1><xsl:value-of select="$page-title"/></h1>

	<xsl:if test='data/events/*[@result="success"]'>
		<xsl:text>Happy days!</xsl:text>
	</xsl:if>

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="{$workspace}/assets/ajaxupload.js"></script>

	<style type='text/css'>
		div {
			margin: 20px;
			text-align: center;
			padding: 20px;
		}

		#drop-here {
			border: 3px dotted #DDD;
			display: block;
			width: 200px;
			min-height: 200px;
		}

		img {
			margin: 10px 0;
		}
	</style>

	<form method='post' enctype='multipart/form-data'>
		<div id='drop-here'>Drop zone</div>

		<div id='progress'></div>

		<button type='submit' name='action[file-upload]'>Upload</button>
	</form>


</xsl:template>

</xsl:stylesheet>