CelliesProjects · November 5, 2017 07:58
diff --git a/upload.htm b/upload.htm
 <!doctype HTML>
 <!-- https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery -->
 <html lang="en">
 <head>
 <title>TEST UPLOAD</title>
 <meta charset="utf-8">
 <link rel="icon" href="data:;base64,iVBORw0KGgo=">  <!--prevent favicon requests-->
 <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <style>
 button{
  margin:10px;
 }

 #uploadForm {
    width: 350px;
    margin: 0 auto;
    background-color: beige;
    padding: 10px;
    text-align:center;
 }

 #uploadForm #fileSelection{
    width: 100%;
    height: 50px;
    border: solid 1px lightgrey;
 }

 #uploadProgressBar{
    margin: 10px;
 }

 #uploadFileButton{
    width: 100px;
    height: 30px;
    margin: 10px;
 }
 </style>
 </head>
 <body>
  <form id="uploadForm" enctype="multipart/form-data" method="post" action="api/upload">
  <input id="fileSelection" name="file" type="file" />
  <progress id="uploadProgressBar" value="0" max="0"></progress>
  <p id="status">status</p>
  <input id="uploadFileButton" type="submit" value="Upload" disabled="disabled"/>
  </form>
 <script type="text/javascript">

 const pickFile_Message = "Click or drop a file in the box";

 $("#status").html( pickFile_Message );

 function uploadProgressHandler(event)
 {
  //$("#loaded_n_total").html("Uploaded "+event.loaded+" bytes of "+event.total);
  var percent = (event.loaded / event.total) * 100;
  var progress = Math.round(percent);
  $("#status").html(progress +"% uploaded... please wait");
  $( '#uploadProgressBar' ).attr({
    value: event.loaded,
    max: event.total
  });
 }

 function loadHandler(event)
 {
  if ( event.target.responseText )
  {
    $("#status").html( event.target.responseText );
  }
  else
  {
    $("#status").html( pickFile_Message );
  }
  $('#uploadFileButton').val("Upload");
  $( '#uploadProgressBar' ).attr({
    value: 0,
    max: 0
  });
 }


 function errorHandler(event){
  $("#status").html("Upload failed");
 }


 function abortHandler(event){
  $("#status").html("Upload aborted");
 }


 $('#fileSelection').on( 'change', function(){
  if ( $('#fileSelection').val() != "" ) {
    $('#uploadFileButton').val("Upload").prop( 'disabled', false );
  }
  else
  {
    $('#uploadFileButton').val("Upload").prop( 'disabled', true );
  }
 });


 $("#uploadFileButton").click(function(event)
 {
  event.preventDefault();
  if ( $( '#fileSelection' ).val() == "" ) { return; }

  //TODO: first do a post without data to see if we are logged in
  $.post( '/api/upload', function() {
    //alert( "success" );
  })
    .done(function() {
      $('#uploadFileButton').val("Uploading...").prop( 'disabled', true );
      var file = $("#fileSelection")[0].files[0];
      $("#fileSelection").val("");
      var formData = new FormData();
      formData.append("file1", file);      
      $.ajax({
        url: '/api/upload',
        method: 'POST',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        xhr: function()
        {
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress",
                                      uploadProgressHandler,
                                      false
                                     );
          xhr.addEventListener("load", loadHandler, false);
          xhr.addEventListener("error", errorHandler, false);
          xhr.addEventListener("abort", abortHandler, false);

          return xhr;
        }
      });
    })
    .fail(function() {
      $('#status').html( "Not logged in." );
    });
 });
 </script>
 </body>
	<!doctype HTML>
	<!-- https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery -->
	<html lang="en">
	<head>
	<title>TEST UPLOAD</title>
	<meta charset="utf-8">
	<link rel="icon" href="data:;base64,iVBORw0KGgo="> <!--prevent favicon requests-->
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<style>
	button{
	margin:10px;
	}

	#uploadForm {
	width: 350px;
	margin: 0 auto;
	background-color: beige;
	padding: 10px;
	text-align:center;
	}

	#uploadForm #fileSelection{
	width: 100%;
	height: 50px;
	border: solid 1px lightgrey;
	}

	#uploadProgressBar{
	margin: 10px;
	}

	#uploadFileButton{
	width: 100px;
	height: 30px;
	margin: 10px;
	}
	</style>
	</head>
	<body>
	<form id="uploadForm" enctype="multipart/form-data" method="post" action="api/upload">
	<input id="fileSelection" name="file" type="file" />
	<progress id="uploadProgressBar" value="0" max="0"></progress>
	<p id="status">status</p>
	<input id="uploadFileButton" type="submit" value="Upload" disabled="disabled"/>
	</form>
	<script type="text/javascript">

	const pickFile_Message = "Click or drop a file in the box";

	$("#status").html( pickFile_Message );

	function uploadProgressHandler(event)
	{
	//$("#loaded_n_total").html("Uploaded "+event.loaded+" bytes of "+event.total);
	var percent = (event.loaded / event.total) * 100;
	var progress = Math.round(percent);
	$("#status").html(progress +"% uploaded... please wait");
	$( '#uploadProgressBar' ).attr({
	value: event.loaded,
	max: event.total
	});
	}

	function loadHandler(event)
	{
	if ( event.target.responseText )
	{
	$("#status").html( event.target.responseText );
	}
	else
	{
	$("#status").html( pickFile_Message );
	}
	$('#uploadFileButton').val("Upload");
	$( '#uploadProgressBar' ).attr({
	value: 0,
	max: 0
	});
	}


	function errorHandler(event){
	$("#status").html("Upload failed");
	}


	function abortHandler(event){
	$("#status").html("Upload aborted");
	}


	$('#fileSelection').on( 'change', function(){
	if ( $('#fileSelection').val() != "" ) {
	$('#uploadFileButton').val("Upload").prop( 'disabled', false );
	}
	else
	{
	$('#uploadFileButton').val("Upload").prop( 'disabled', true );
	}
	});


	$("#uploadFileButton").click(function(event)
	{
	event.preventDefault();
	if ( $( '#fileSelection' ).val() == "" ) { return; }

	//TODO: first do a post without data to see if we are logged in
	$.post( '/api/upload', function() {
	//alert( "success" );
	})
	.done(function() {
	$('#uploadFileButton').val("Uploading...").prop( 'disabled', true );
	var file = $("#fileSelection")[0].files[0];
	$("#fileSelection").val("");
	var formData = new FormData();
	formData.append("file1", file);
	$.ajax({
	url: '/api/upload',
	method: 'POST',
	type: 'POST',
	data: formData,
	contentType: false,
	processData: false,
	xhr: function()
	{
	var xhr = new window.XMLHttpRequest();
	xhr.upload.addEventListener("progress",
	uploadProgressHandler,
	false
	);
	xhr.addEventListener("load", loadHandler, false);
	xhr.addEventListener("error", errorHandler, false);
	xhr.addEventListener("abort", abortHandler, false);

	return xhr;
	}
	});
	})
	.fail(function() {
	$('#status').html( "Not logged in." );
	});
	});
	</script>
	</body>