MCF/index-xhrupload.html

## index-xhrupload.html
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Upload Files via XHR Test App</title>
    <script type="text/javascript">
      window.onload = function()
      {
        var uploadURL = "/file_upload";
        document.getElementById("description").appendChild(document.createTextNode(uploadURL));

        var progressElement = document.getElementById("uploadProgress");
        var inputElement = document.getElementById("fileInput");

        inputElement.onchange = function()
        {
          for (i = 0; i < this.files.length; i++)
          {
            uploadFile(i, progressElement, this.files[i], uploadURL);
          }

          progressElement.appendChild(document.createElement("br"));
        }

        // Upload the given file using XMLHttpRequest.
        function uploadFile(index, rootReportEle, file, URL)
        {
          if ( ! window.XMLHttpRequest)
            return;

          var fileStats = (index + 1) + ". name: " + file.name +
                          ", size: " + file.size + ", type: " + file.type +
                          ", last modified: " + file.lastModifiedDate;

          var myReportEle = document.createElement("p");
          myReportEle.appendChild(document.createTextNode(fileStats));

          rootReportEle.appendChild(myReportEle);

          var fileForm = new FormData();
          fileForm.append("file", file);

          var xhr = new XMLHttpRequest();
          xhr.open("post", URL, true);

          xhr.onreadystatechange = function()
          {
            if (xhr.readyState == 4)
            {
              var statusTextEle;
              var statusEle = document.createElement("strong")

              var xhrStat = getHttpStatus(xhr);
              if (xhrStat == 200)
              {
                statusTextEle = document.createTextNode(" UPLOAD COMPLETE");
                statusEle.setAttribute("class", "success");
              }
              else if (xhrStat == -1)
              {
                statusTextEle = document.createTextNode(" FINISHED, STATUS UNKNOWN");
                statusEle.setAttribute("class", "unknown");
              }
              else
              {
                statusTextEle = document.createTextNode(" ERROR: " + xhrStat);
                statusEle.setAttribute("class", "error");
              }

              statusEle.appendChild(statusTextEle);
              myReportEle.appendChild(statusEle);
            }
          }

          xhr.send(fileForm);
        }

        // Some older browser throw an exception when requesting the
        // XMLHttpRequest status property.  In that case you will get
        // a status of -1 returned by this function.
        function getHttpStatus(xmlRequest)
        {
          var stat = -1;
          try {
            stat = xmlRequest.status
          } catch (exception){}

          return stat;
        }
      }
    </script>
    <style type="text/css">
      body { font-family: arial, sans-serif; font-size: 13px;}
      p { padding: 0px; margin: 0px; }
      #uploadProgress { margin: 5px; }
      #fileInput { margin: 15px 0px 15px 0px; }
      strong.success { color: green; }
      strong.unknown { color: yellow; }
      strong.error { color: red; }
    </style>
  </head>

  <body>
    <h3>Upload Files via XHR Test App</h3>
    <p id="description">
      Select one or more files to upload to the following URL:
    </p>
    <input id="fileInput" type="file" multiple="multiple" />
    <div id="uploadProgress"></div>
  </body>
</html>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Upload Files via XHR Test App</title>
	<script type="text/javascript">
	window.onload = function()
	{
	var uploadURL = "/file_upload";
	document.getElementById("description").appendChild(document.createTextNode(uploadURL));

	var progressElement = document.getElementById("uploadProgress");
	var inputElement = document.getElementById("fileInput");

	inputElement.onchange = function()
	{
	for (i = 0; i < this.files.length; i++)
	{
	uploadFile(i, progressElement, this.files[i], uploadURL);
	}

	progressElement.appendChild(document.createElement("br"));
	}

	// Upload the given file using XMLHttpRequest.
	function uploadFile(index, rootReportEle, file, URL)
	{
	if ( ! window.XMLHttpRequest)
	return;

	var fileStats = (index + 1) + ". name: " + file.name +
	", size: " + file.size + ", type: " + file.type +
	", last modified: " + file.lastModifiedDate;

	var myReportEle = document.createElement("p");
	myReportEle.appendChild(document.createTextNode(fileStats));

	rootReportEle.appendChild(myReportEle);

	var fileForm = new FormData();
	fileForm.append("file", file);

	var xhr = new XMLHttpRequest();
	xhr.open("post", URL, true);

	xhr.onreadystatechange = function()
	{
	if (xhr.readyState == 4)
	{
	var statusTextEle;
	var statusEle = document.createElement("strong")

	var xhrStat = getHttpStatus(xhr);
	if (xhrStat == 200)
	{
	statusTextEle = document.createTextNode(" UPLOAD COMPLETE");
	statusEle.setAttribute("class", "success");
	}
	else if (xhrStat == -1)
	{
	statusTextEle = document.createTextNode(" FINISHED, STATUS UNKNOWN");
	statusEle.setAttribute("class", "unknown");
	}
	else
	{
	statusTextEle = document.createTextNode(" ERROR: " + xhrStat);
	statusEle.setAttribute("class", "error");
	}

	statusEle.appendChild(statusTextEle);
	myReportEle.appendChild(statusEle);
	}
	}

	xhr.send(fileForm);
	}

	// Some older browser throw an exception when requesting the
	// XMLHttpRequest status property. In that case you will get
	// a status of -1 returned by this function.
	function getHttpStatus(xmlRequest)
	{
	var stat = -1;
	try {
	stat = xmlRequest.status
	} catch (exception){}

	return stat;
	}
	}
	</script>
	<style type="text/css">
	body { font-family: arial, sans-serif; font-size: 13px;}
	p { padding: 0px; margin: 0px; }
	#uploadProgress { margin: 5px; }
	#fileInput { margin: 15px 0px 15px 0px; }
	strong.success { color: green; }
	strong.unknown { color: yellow; }
	strong.error { color: red; }
	</style>
	</head>

	<body>
	<h3>Upload Files via XHR Test App</h3>
	<p id="description">
	Select one or more files to upload to the following URL:
	</p>
	<input id="fileInput" type="file" multiple="multiple" />
	<div id="uploadProgress"></div>
	</body>
	</html>