Serivce Portal widget progress addEventListener

[Brad59]

I am attempting to implement a rather complex widget in the customer portal. Our business needs frequently require the sharing of extremely large zipped log dumps. We want to offload these large files to Amazon S3. When the file is over 100MB, Amazon recommends splitting the file up and uploading each part separately. I have a progress bar working that shows a percentage of parts uploaded. For example, 25% if 1 of 4 100MB chunks have been uploaded. 

However, I want to show another progress bar that shows the progress of the currently uploading file. This should be easy to do with a progress event listener. I just cannot get the event listener to work in a Service Portal widget. I see that there are a few out of box widgets that use the 'addEventListener' function. None of them use the progress event though. Additionally, none seem to use XMLHttpRequest();

You can see that in the client code below, I have attempted to calculate the event totals in both a separate function and contained within the addEventListener call itself.

Example code I am attempting.

HTML

<progress id="htmlProg" value="0" max="100"></progress>

Client

	/** 
	 * send request object to S3
	 */
	c.sendXMLHttpRequest = function(re) {
		// get current part number or finish upload, if no more parts
		c.data.xhrFileObj = c.uploadParts[c.partNumber-1];
		
		// open request
		var httpHeaders = re.data.headers,
				xhr = new XMLHttpRequest();
		
		xhr.addEventListener("progress", function(event){
			
			var percent = (event.loaded / event.total) * 100;
			('htmlProg').value = Math.round(percent);
		
		});
		
		console.log('Uploading: ' + c.uploadKey);
		xhr.open(c.httpMethod, 'https://' + httpHeaders.host + '/' + c.uploadKey);
		
		// set HTTP request headers
		var headerKeys = Object.keys(httpHeaders);
		
		for (var x in headerKeys) {
			// cannot set "host" header in CORS requests
			if (headerKeys[x] == 'host')
				continue;
			else
				xhr.setRequestHeader(headerKeys[x], httpHeaders[headerKeys[x]]);
		}
		
		// response handler
		xhr.onload = function(e) {
			if (xhr.readyState === xhr.DONE)
				c.responseHandler(xhr);
		};
		
		// error handler
		xhr.onerror = function(e) {
			console.error(e);
			console.error(xhr.response);
		};
		
		// send request
		xhr.send(c.data.xhrFileObj);
	};
	
	/*
	c.progressHandler = function(event){
		
		var percent = (event.loaded / event.total) * 100;
		('htmlProg').value = Math.round(percent);
		
	};
	*/