cgkio/app.js

## app.js
Parse.initialize("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

var file;

function fileSelected() {
    var file = document.getElementById('fileToUpload').files[0];

    if (file) {
        var fileSize = 0;
        if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

    }
}

function uploadFile() {

    var file = document.getElementById('fileToUpload').files[0];

    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    var serverUrl = 'https://api.parse.com/1/files/' + file.name + '';

    xhr.open("POST", serverUrl, true);
    xhr.setRequestHeader("X-Parse-Application-Id", "fAQ3T1CMKY9PRG6vnpGwZxbcXLSUQq6UD2hnXPBd");
    xhr.setRequestHeader("X-Parse-REST-API-Key", "pRSh5LVIgFhiE9HKtucYNbbt6FtApS0VczMHZ1CD");
    xhr.setRequestHeader("Content-Type", file.type);
    xhr.send(file);

}

function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);

        var currentstatus = percentComplete.toString() + '%';

    } else {
        document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
}

function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    // this micro-script came from
    // http://jquerybyexample.blogspot.com/2012/05/how-to-read-and-parse-json-using-jquery.html
    var jsonp = '[' + evt.target.responseText + ']';
    var lang = '';
    var obj = $.parseJSON(jsonp);
    $.each(obj, function () {
        lang += this['name'];
    });

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://api.parse.com/1/classes/inspection_photos", true);
    xhr.setRequestHeader("X-Parse-Application-Id", "fAQ3T1CMKY9PRG6vnpGwZxbcXLSUQq6UD2hnXPBd");
    xhr.setRequestHeader("X-Parse-REST-API-Key", "pRSh5LVIgFhiE9HKtucYNbbt6FtApS0VczMHZ1CD");
    xhr.setRequestHeader("Content-Type", "application/json");

    // assuming that "data" is the same as '-d' in curl format
    var data = '{ "fileKey": { "name": "' + lang + '", "__type": "File" } }';

    xhr.send(data);

}

function uploadFailed(evt) {
    alert("There was an error attempting to upload the file.");
}

function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
}

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Photo Upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.1.15.min.js"></script>
<script src="app.js"></script>
<!-- THIS MUST BE BELOW THE JQUERY MOBILE SCRIPT/CSS -->
<script type="text/javascript">
<!-- Add global jQuery Mobile tweaks/settings -->
    $(document).bind("mobileinit", function() {
		// to allow for AJAX/RESTful actions
		$.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
		// to speed up jQuery Mobile performance
		$.mobile.buttonMarkup.hoverDelay = 0;
    });
</script>
</head>
<body>
<div data-role="page">

<div data-role="header">
	<h1>Inspector</h1>
</div>

<div data-role="content">

  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>

      <input type="button" onclick="uploadFile()" value="Upload" />

    <div id="progressNumber"></div>

  </form>

</div>
</div>

</body>
</html>
	Parse.initialize("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

	var file;

	function fileSelected() {
	var file = document.getElementById('fileToUpload').files[0];

	if (file) {
	var fileSize = 0;
	if (file.size > 1024 * 1024)
	fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
	else
	fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

	document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
	document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
	document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

	}
	}

	function uploadFile() {

	var file = document.getElementById('fileToUpload').files[0];

	var xhr = new XMLHttpRequest();

	xhr.upload.addEventListener("progress", uploadProgress, false);
	xhr.addEventListener("load", uploadComplete, false);
	xhr.addEventListener("error", uploadFailed, false);
	xhr.addEventListener("abort", uploadCanceled, false);

	var serverUrl = 'https://api.parse.com/1/files/' + file.name + '';

	xhr.open("POST", serverUrl, true);
	xhr.setRequestHeader("X-Parse-Application-Id", "fAQ3T1CMKY9PRG6vnpGwZxbcXLSUQq6UD2hnXPBd");
	xhr.setRequestHeader("X-Parse-REST-API-Key", "pRSh5LVIgFhiE9HKtucYNbbt6FtApS0VczMHZ1CD");
	xhr.setRequestHeader("Content-Type", file.type);
	xhr.send(file);

	}

	function uploadProgress(evt) {
	if (evt.lengthComputable) {
	var percentComplete = Math.round(evt.loaded * 100 / evt.total);

	var currentstatus = percentComplete.toString() + '%';

	} else {
	document.getElementById('progressNumber').innerHTML = 'unable to compute';
	}
	}

	function uploadComplete(evt) {
	/* This event is raised when the server send back a response */
	// this micro-script came from
	// http://jquerybyexample.blogspot.com/2012/05/how-to-read-and-parse-json-using-jquery.html
	var jsonp = '[' + evt.target.responseText + ']';
	var lang = '';
	var obj = $.parseJSON(jsonp);
	$.each(obj, function () {
	lang += this['name'];
	});

	var xhr = new XMLHttpRequest();
	xhr.open("POST", "https://api.parse.com/1/classes/inspection_photos", true);
	xhr.setRequestHeader("X-Parse-Application-Id", "fAQ3T1CMKY9PRG6vnpGwZxbcXLSUQq6UD2hnXPBd");
	xhr.setRequestHeader("X-Parse-REST-API-Key", "pRSh5LVIgFhiE9HKtucYNbbt6FtApS0VczMHZ1CD");
	xhr.setRequestHeader("Content-Type", "application/json");

	// assuming that "data" is the same as '-d' in curl format
	var data = '{ "fileKey": { "name": "' + lang + '", "__type": "File" } }';

	xhr.send(data);

	}

	function uploadFailed(evt) {
	alert("There was an error attempting to upload the file.");
	}

	function uploadCanceled(evt) {
	alert("The upload has been canceled by the user or the browser dropped the connection.");
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Photo Upload</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.1.15.min.js"></script>
	<script src="app.js"></script>
	<!-- THIS MUST BE BELOW THE JQUERY MOBILE SCRIPT/CSS -->
	<script type="text/javascript">
	<!-- Add global jQuery Mobile tweaks/settings -->
	$(document).bind("mobileinit", function() {
	// to allow for AJAX/RESTful actions
	$.support.cors = true;
	$.mobile.allowCrossDomainPages = true;
	// to speed up jQuery Mobile performance
	$.mobile.buttonMarkup.hoverDelay = 0;
	});
	</script>
	</head>
	<body>
	<div data-role="page">

	<div data-role="header">
	<h1>Inspector</h1>
	</div>

	<div data-role="content">

	<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
	<div class="row">
	<label for="fileToUpload">Select a File to Upload</label><br />
	<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
	</div>
	<div id="fileName"></div>
	<div id="fileSize"></div>
	<div id="fileType"></div>

	<input type="button" onclick="uploadFile()" value="Upload" />

	<div id="progressNumber"></div>

	</form>

	</div>
	</div>

	</body>
	</html>