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]">

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">
$(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">
        $(document).ready(function() {
            $('#test').on('click', function() {
                    sound: true,
                    erase: false

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 //-->
		console.log('start uploading \'' + file.fileName + '\'');
		console.log('\'' + file.fileName + '\' upload progress: ' + percentage + '%');
		return true; // return false to disable default progress handler
		console.log('done uploading \'' + file.fileName + '\', setting some random file id for demonstration purposes');
        console.log('response was:');

		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
		console.log('failed uploading \'' + file.fileName + '\'');

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

		// return true / false whether it was successful
		return true;
		console.log('you clicked like:');

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

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

		// you can perform an ajax call here
		// to update the color in the back-end
		// for this file

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">