Example one

This is the default Uploadr, how it functions out of the box

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

Example 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)

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>
			

Example 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:add>
			
				<input type="button" id="test" name="test" value="clear the uploadr but do not erase files">
				<script>
				$(document).ready(function() {
					$('#test').on('click', function() {
						$('.uploadr[name=myThirdUploadr]').data('uploadr').clear({
							sound: true,
							erase: false
						});
					});
				});
				</script>
			
				<input type="button" id="test" name="test" value="change the initialed uploadr to only allow .png">
				<script>
				$(document).ready(function() {
					$('#test').on('click', function() {
						$('.uploadr[name=myThirdUploadr]').data('uploadr').set('allowedExtensions', 'png');
					});
				});
				</script>
			

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

Example 5

Initial files, files are added to the top, custom scss, 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>