<!-- Handle search request -->
<script type="text/javascript">
function updateListing() {
	var input = $('#filetoupload');
	var preview = $('#preview');

	preview.html("");
	$('#message').html("");

	var curFiles = input.prop('files');
	if(curFiles.length === 0) {
		var para = document.createElement('p');
		para.textContent = 'No files currently selected for upload';
		preview.append(para);
	} else {
		var list = document.createElement('ol');
		preview.append(list);
		for(var i = 0; i < curFiles.length; i++) {
			var listItem = document.createElement('li');
			var para = document.createElement('p');

			para.textContent = curFiles[i].name + ' (' + returnFileSize(curFiles[i].size) + ')';
			listItem.append(para);

			list.append(listItem);
		}
	}
}

function returnFileSize(number) {
  if(number < 1024) {
    return number + 'bytes';
  } else if(number >= 1024 && number < 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number >= 1048576 && number < 1073741824) {
    return (number/1048576).toFixed(1) + 'MB';
  } else if(number >= 1073741824) {
    return (number/1073741824).toFixed(1) + 'GB';
  }
}


$(document).ready(function() {
	$('#filetoupload').change(updateListing);
});

</script>

<h1 style="text-align:center;">Upload</h1>

<div style="text-align: center;">
	<form action="upload" method="post" enctype="multipart/form-data">
	  <div>
		<label for="filetoupload">Choose file to upload</label>
		<input class="hidden" type="file" id="filetoupload" name="filetoupload" multiple="multiple">
	  </div>
</div>
<div>Files to update:</div>
 <div id="preview" class="preview">
	<p>No file currently selected for upload</p>
</div>
<div style="text-align: center;">
	  <div>
		<button>Upload</button>
	  </div>
	</form>
	<div id="message" class="message">{{message}}</div>
</div>
