1. Default uploadr

<uploadr:add name="myFirstUploadr" path="/tmp/uploadr/myFirstUploadr"/>

2. Initial files, files added on top, paginate into 5 files per page, allowed extensions .jpg, .png and .gif and additional custom variable passed to the controller (model)

	<uploadr:add name="mySecondUploadr" path="/tmp/uploadr/mySecondUploadr" allowedExtensions="jpg,png,gif" direction="up" maxVisible="5" unsupported="/uploadr-demo/upload/warning" model="[booleanOne:true, variableTwo: 'foo', variableThree: 'bar', variableFour: 4, myObject: someObject]">
    
	</uploadr:add>

3. Initial files, new files on top, 5 files per page, max file size is 500kb, maximum of 2 concurrent uploads (pausing others), enable rating and voting

	<uploadr:add name="myThirdUploadr" path="/tmp/uploadr/myThirdUploadr" direction="up" maxVisible="5" maxSize="512000" rating="true" voting="true" unsupported="/uploadr-demo/upload/warning" maxConcurrentUploads="2" maxConcurrentUploadsMethod="pause">
    
		<uploadr:file name="blahblah.txt">
			<uploadr:fileSize>0</uploadr:fileSize>
			<uploadr:fileModified>1414782633000</uploadr:fileModified>
			<uploadr:fileId>myId-YnngRF3A8qPoceSjGd9aj4fRohbAp4Ip</uploadr:fileId>
			<uploadr:rating>0.9460385</uploadr:rating>
		</uploadr:file>
    
	</uploadr:add>
$(document).ready(function() { $('#clearButton3').on('click', function() { $('.uploadr[name=myThirdUploadr]').data('uploadr').clear({ sound: true, erase: false }); }); });
    <input type="button" id="test" name="test" value="clear the uploadr but do not erase files">
    <r:script>
        $(document).ready(function() {
            $('#test').on('click', function() {
                $('.uploadr[name=myThirdUploadr]').data('uploadr').clear({
                    sound: true,
                    erase: false
                });
            });
        });
    </r:script>

4. Initial files, files are added to the bottom (default), custom event handlers, rating & voting, rating tooltips, override default file colors to #c78cda, colorpicker, and disable file deletions

note that due to using a custom onDelete handler the uploaded files do not get deleted anymore!

<uploadr:add name="myFourthUploadr" path="/tmp/uploadr/myFourthUploadr" maxVisible="5" rating="true" voting="true" colorPicker="true">
    
	<!-- upload event handlers //-->
	<uploadr:onStart>
		console.log('start uploading \'' + file.fileName + '\'');
	</uploadr:onStart>
	<uploadr:onProgress>
		console.log('\'' + file.fileName + '\' upload progress: ' + percentage + '%');
		return true; // return false to disable default progress handler
	</uploadr:onProgress>
	<uploadr:onSuccess>
		console.log('done uploading \'' + file.fileName + '\', setting some random file id for demonstration purposes');
        console.log('response was:');
        console.log(response);

		var text = "";
		var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		for( var i=0; i < 12; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length));

		// set a random file id for demonstration purposes
		file.fileId = 'my-random-id::'+text;

		// set file to non-deletable (we do not get a delete icon)
		file.deletable = false;
		console.log('set file.deletable to false so the delete icon will not be shown');

		// override the background to purple (same as initial files)
		$('.progress',domObj).css('background-color', '#f594cc');
		console.log('and overrided the background color to #f594cc');

		// and set the rating tooltip text for the rating
		file.fileRatingText = 'you just uploaded this file and in the onSuccess handler the rating tooltip text is added';

		// callback when done
		callback();
	</uploadr:onSuccess>
	<uploadr:onFailure>
		console.log('failed uploading \'' + file.fileName + '\'');
	</uploadr:onFailure>

	<!-- user triggered event handlers //-->
	<uploadr:onAbort>
		console.log('aborted uploading \'' + file.fileName + '\'');
	</uploadr:onAbort>
	<uploadr:onView>
		console.log('you clicked view:');
		console.log(file);
		console.log(domObj);
	</uploadr:onView>
	<uploadr:onDownload>
		console.log('you clicked download:');
		console.log(file);
		console.log(domObj);
	</uploadr:onDownload>
	<uploadr:onDelete>
		console.log('you clicked delete:');
		console.log(file);
		console.log(domObj);

		// return true / false whether it was successful
		return true;
	</uploadr:onDelete>
	<uploadr:onLike>
		console.log('you clicked like:');
		console.log(file);
		console.log(domObj);

		// callback if like action was successfull
		// and pass the new file rating
		callback(file.fileRating + 0.1);
	</uploadr:onLike>
	<uploadr:onUnlike>
		console.log('you clicked unlike:');
		console.log(file);
		console.log(domObj);

		// callback if unlike action was successfull
		// and pass the new file rating
		callback(file.fileRating - 0.1);
	</uploadr:onUnlike>
	<uploadr:onChangeColor>
		console.log('you changed the color to:');
		console.log(color);
		console.log(file);
		console.log(domObj);

		// you can perform an ajax call here
		// to update the color in the back-end
		// for this file
	</uploadr:onChangeColor>
</uploadr:add>

5. Initial files, files are added to the top, custom css, custom drop text, custom file browse text, paginate to 4 files per page, rating, no sound effects

<uploadr:add name="myFifthUploadr" path="/tmp/uploadr/myFifthUploadr" direction="up" rating="true" class="demo" placeholder="Behold: the drop area!" fileselect="Behold: the fileselect!" maxVisible="4" noSound="true">
    
</uploadr:add>