HTML5 Drag and Drop file uploader

plugins {
  runtime ":hibernate:$grailsVersion"
  build ":tomcat:$grailsVersion"
  runtime ":jquery:1.7.1"
  runtime ":resources:1.1.6"
  compile ":jquery-ui:1.8.15"
  compile ":modernizr:2.0.6"
  compile ":uploadr:0.5.8"
}

grails install-plugin uploadr

<uploadr:demo/>

<uploadr:add name="myUploadrName" path="/my/upload/path" direction="up" maxVisible="8" unsupported="/my/controller/action" rating="true" voting="true" colorPicker="true" maxSize="204800" />

<uploadr:file name="${file.name}">
		<uploadr:fileSize>${file.size()}</uploadr:fileSize>
		<uploadr:fileModified>${file.lastModified()}</uploadr:fileModified>
		<uploadr:fileId>myId-${RandomStringUtils.random(32, true, true)}</uploadr:fileId>
	</uploadr:file>

<uploadr:add name="mySecondUploadr" path="${path}" direction="up" maxVisible="5" unsupported="${createLink(plugin: 'uploadr', controller: 'upload', action: 'warning')}">
<% path.listFiles().each { file -> %>
	<uploadr:file name="${file.name}">
		<uploadr:fileSize>${file.size()}</uploadr:fileSize>
		<uploadr:fileModified>${file.lastModified()}</uploadr:fileModified>
		<uploadr:fileId>myId-${RandomStringUtils.random(32, true, true)}</uploadr:fileId>
	</uploadr:file>
<% } %>
</uploadr:add>

<uploadr:color>#f594cc</uploadr:color>

<uploadr:deletable>false</uploadr:deletable>

<uploadr:rating>0.33</uploadr:rating>

<uploadr:ratingText>This is the tooltip text of the rating for Assignment 2.pdf</uploadr:ratingText>

<!-- 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');
		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>

# labels that appears in the uploadr's percentage text when
# an upload is complete, failed or aborted
uploadr.label.done=done
uploadr.label.failed=failed
uploadr.label.aborted=aborted
uploadr.label.maxsize=too large
# label for the 'select files' button
uploadr.button.select=Click to upload files
# placeholder text
uploadr.placeholder.text=Drag and drop files here to upload...
# badge tooltip
uploadr.badge.tooltip.singular=%d file is still being uploaded…
uploadr.badge.tooltip.plural=%d files are still being uploaded...
# error messages / tooltips
uploadr.error.maxsize=The upload size of %s is larger than allowed maximum of %s
# file control tooltips
uploadr.button.delete=Click to delete this file
uploadr.button.delete.confirm=Are you sure you want to delete this file?
uploadr.button.abort=Click to abort file transfer
uploadr.button.abort.confirm=Are you sure you would like to abort this tranfer?
uploadr.button.download=Click to download this file
uploadr.button.view=Click to view this file
uploadr.button.like=Click to like
uploadr.button.unlike=Click to unlike
uploadr.button.color.picker=Click to change background color
uploadr.button.remove=Click to remove this aborted transfer from your view

<uploadr:add … placeholder="Behold: the drop area!" fileselect="Behold: the fileselect!" ...>
…
</uploadr:add>

<uploadr:add … noSound="true" ...>
…
</uploadr:add>

<uploadr:add … controller="myController" action="myAction" ...>
…
</uploadr:add>

<uploadr:add … controller="myController" action="myAction" plugin="myPlugin" ...>
…
</uploadr:add>

uploadr.onDownload {
                                // render a template (separation of concerns)
				out << g.render(template:'/js/uploadr/onDownload', model:[])
            }

window.open('<g:createLink plugin="myPlugin" controller="uploadedFile" action="downloadUploadedFile"/>?fileId='+file.fileId);

def downloadUploadedFile = {
        UploadedFile uploadedFile = UploadedFile.get(params.fileId)
        if (!uploadedFile) response.sendError(404, "No uploaded file could be found matching id: ${params.fileId}.")
        GridFSFile gridFSFile = uploadedFile.file
        if (!gridFSFile) response.sendError(404, "No file attached to UploadedFile")
		response.setStatus(200)
		response.setHeader("Content-disposition", "attachment; filename="${uploadedFile.fileName}"")
		response.setContentType("application/octet-stream")
		response.setContentLength(uploadedFile.fileSize as int)
		// define input and output streams
		InputStream inStream = null
		OutputStream outStream = null
		// handle file download
		try {
			inStream = gridFSFile.inputStream
			outStream = response.getOutputStream()
			while (true) {
				synchronized (buffer) {
					int amountRead = inStream.read(buffer)
					if (amountRead == -1) {
						break
					}
					outStream.write(buffer, 0, amountRead)
				}
				outStream.flush()
			}
		} catch (Exception e) {
			// whoops, looks like something went wrong
			println "download failed! ${e.getMessage()}"
		} finally {
			if (inStream != null) inStream.close()
			if (outStream != null) outStream.close()
		}
		return false
    }