demo.html


<html>
<head></head>
  <body>
    <style>
      #progress_bar {
        margin: 10px 0;
        padding: 3px;
        border: 1px solid #000;
        font-size: 14px;
        clear: both;
        -moz-transition: opacity 1s linear;
        -o-transition: opacity 1s linear;
        -webkit-transition: opacity 1s linear;
      }
      #progress_bar.loading {
        opacity: 1.0;
      }
      #progress_bar .percent {
        background-color: #99ccff;
        height: auto;
        width: 0;
      }
    </style>
    
    <h1>SmartUpload.js DEMO</h1>

	<h2>Configure upload :</h2>

	<div id="smartConfig">	
		smartTarget : <input type="text" id="smartTarget" value="" placeholder="http://site/target/"><br />
		smartSize :<input type="text" id="smartSize" value="131072" placeholder="131072"><br />
		smartTimeout : <input type="text" id="smartTimeout" value="1000" placeholder="1000"><br />
		<button id="change" onClick="changeConfig()">Change</button>
	</div>

	<br />
	<h2>Choose a file to upload :</h2>
    
    <input type="file" id="fileId" name="file" />
    <br />
    <div id="progress_bar"><div class="loading percent">0%</div></div>
    
    <script src="smartupload.js"></script>
    <script>
	var smartUp;
	function changeConfig()
	{
		if(smartUp) smartUp.destruct();
      		smartUp = new SmartUpload("fileId", document.querySelector("#smartTarget").value);
		smartUp.smartSize = parseInt(document.querySelector("#smartSize").value);
		smartUp.smartTimeout = parseInt(document.querySelector("#smartTimeout").value);
		var progress = document.querySelector('.percent');
		smartUp.onProgress = function(current, total)     
		{
			var percentLoaded = Math.floor((current / total) * 100);
			progress.style.width = percentLoaded + '%';
			progress.textContent = percentLoaded + '%';
		}
		smartUp.onLoadStart = function()
		{
			progress.style.width = '0%';
			progress.textContent = '0%';
		};
		smartUp.onDone = function()
		{
			alert("File upload complete !");
		}
	}
    </script>

  </body>
</html>