<div style="float:left;">
<form id="addAttachmentsForm" method="post" action="<?=$this->baseUrl?>/attachments.raw/process-add-attachments" enctype="multipart/form-data">
	<div style="margin-left:10px;width:350px;">
	<div style="width:325px;margin-left:auto;margin-right:auto;">
	<strong><?=__("Add Attachments")?>:</strong>
	<input type="hidden" name="attachmentReferenceId" value="<?=$this->attachmentReferenceId?>">
	<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
	<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progressKey" value="<?=uniqid('');?>"/>
	<input type="file" name="uploadFile"/>
	</div>
	<div style="width:325px;margin-left:auto;margin-right:auto;display:none;" id="fileUploadProgressId">
	<strong><?=__("Progress")?>:</strong>
	<div style="width:320px;margin-left:auto;margin-right:auto;border:thin solid black;height:20px;"><div id="uploadProgressBarId" style="background-color:blue; width:0px;height:100%;"></div></div>
	</div>
<br />
<div>
</div>
<script>
var progressTimer = "";
var uploadStarted = false;
function ajaxUploadFile() {
	uploadStarted = true;
	dojo.io.iframe.send({
		url: "<?=$this->baseUrl?>/attachments.raw/process-add-attachments",
		method: "post",
		handleAs: "json",
		method: "post",
		form: "addAttachmentsForm",
		load: function(data) {
			uploadStarted = false;
			dojo.byId("addAttachmentsForm").reset();
			clearTimeout(progressTimer);
			dojo.byId("uploadProgressBarId").style.width = "100%";
<?if(strlen($this->callback) > 0):?>
			if (window.<?=$this->callback?>) {
				<?=$this->callback?>(data);
			}
<?endif?>
		},
		error: function (er) {
			alert("err: " + er);
		}
	});
		initProgressBar();
}
</script>
<br style="clear:left"/>
<div style="text-align:right;margin-top:10px;">
	<input type="button" value="<?=__("Upload")?>" onClick="ajaxUploadFile();" />
	<!--<input type="submit" />-->
<script>
function addedNewAttachments() {

}
function initProgressBar(progressKey) {
	if (!uploadStarted) return;
	dojo.byId('fileUploadProgressId').style.display = "block";
	if (progressKey == undefined) {
		progressKey = dojo.byId('progressKey').value;
	}
	dojo.xhrGet({
		url: '<?=$this->baseUrl?>/attachments.raw/view-upload-progress?uploadKey=' + progressKey,
		handleAs: 'json', 
		load: function (data) {
			//alert('progressKey: ' + progressKey + ' :: '  + data);
			dojo.byId('uploadProgressBarId').style.width = data + '%';
			progressTimer = setTimeout("initProgressBar('"+progressKey+"')", 1000);
		}, 
		error: function (er) {alert('err: ' + er)}}
	);
}
</script>
</div>
</form>
</div>
