RyanFriedman/upload.html

## upload.html
<!DOCTYPE html>
<head>
<script>
/* attach a submit handler to the form */

$(document).ready(function () {
  $("#one").click(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $('#new_post'),
  location = $form.attr('action');

  $.ajax({
         url: location,
         data: $form.serialize(),
         dataType: "jsonp",
         type: "POST",
         });

          var div = $('<div id="notice">Thank you for posting! Your post will appear in the appropriate category shortly.</div>');
          $('form').replaceWith( div);
  });
});

function uploadPicture() {

    // Get URI of picture to upload
    var img = document.getElementById('camera_image');
    var imageURI = img.src;
    if (!imageURI || (img.style.display == "none")) {
        document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
        return;
    }

    // Verify server has been entered
		var $form = $('#new_post'),
	  location = $form.attr('action');
    if (location) {

        // Specify transfer options
        var options = new FileUploadOptions();
        options.fileKey="post[image]";
        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType="image/jpeg";
        options.chunkedMode = false;

        var params = Object();
        params.utf8 = "✓";

        options.params = params;

        // Transfer picture to server
        var ft = new FileTransfer();
        ft.upload(imageURI, location, function(r) {
            document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
        }, function(error) {
            document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;
        }, options);
    }
}
</script>
</head>

<body>
  <form accept-charset="UTF-8" enctype="multipart/form-data" action="http://localhost:3000/mobile_upload" class="new_post" id="new_post" method="post">

        <div>
        <b>Image:</b> <img style="width:120px;visibility:hidden;display:none;" id="camera_image" name="post[image]" src="" />
        </div>

        <div>
            <input type="button" onclick="takePicture();" value="Take Picture" /><br/>
            <input type="button" onclick="selectPicture();" value="Select Picture from Library" /><br/>
	    <input type="button" onclick="uploadPicture();" value="Upload Picture" /><br/>
        </div>

        <div class="field">
            <input id="post_title" placeholder="Title" name="post[title]" size="30" type="text" />
        </div>

        <div class="field">
            <input id="post_company" placeholder="Company" name="post[company]" size="30" type="text" />
        </div>

        <div class="actions">
            <a href="#" name="commit" data-rel="dialog" type="button" data-theme="b" id="one">Create Post</a>
        </div>

</form>
</body>
<html>
	<!DOCTYPE html>
	<head>
	<script>
	/* attach a submit handler to the form */

	$(document).ready(function () {
	$("#one").click(function(event) {

	/* stop form from submitting normally */
	event.preventDefault();

	/* get some values from elements on the page: */
	var $form = $('#new_post'),
	location = $form.attr('action');

	$.ajax({
	url: location,
	data: $form.serialize(),
	dataType: "jsonp",
	type: "POST",
	});

	var div = $('<div id="notice">Thank you for posting! Your post will appear in the appropriate category shortly.</div>');
	$('form').replaceWith( div);
	});
	});

	function uploadPicture() {

	// Get URI of picture to upload
	var img = document.getElementById('camera_image');
	var imageURI = img.src;
	if (!imageURI \|\| (img.style.display == "none")) {
	document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
	return;
	}

	// Verify server has been entered
	var $form = $('#new_post'),
	location = $form.attr('action');
	if (location) {

	// Specify transfer options
	var options = new FileUploadOptions();
	options.fileKey="post[image]";
	options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
	options.mimeType="image/jpeg";
	options.chunkedMode = false;

	var params = Object();
	params.utf8 = "✓";

	options.params = params;

	// Transfer picture to server
	var ft = new FileTransfer();
	ft.upload(imageURI, location, function(r) {
	document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
	}, function(error) {
	document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;
	}, options);
	}
	}
	</script>
	</head>

	<body>
	<form accept-charset="UTF-8" enctype="multipart/form-data" action="http://localhost:3000/mobile_upload" class="new_post" id="new_post" method="post">

	<div>
	<b>Image:</b> <img style="width:120px;visibility:hidden;display:none;" id="camera_image" name="post[image]" src="" />
	</div>

	<div>
	<input type="button" onclick="takePicture();" value="Take Picture" /><br/>
	<input type="button" onclick="selectPicture();" value="Select Picture from Library" /><br/>
	<input type="button" onclick="uploadPicture();" value="Upload Picture" /><br/>
	</div>

	<div class="field">
	<input id="post_title" placeholder="Title" name="post[title]" size="30" type="text" />
	</div>

	<div class="field">
	<input id="post_company" placeholder="Company" name="post[company]" size="30" type="text" />
	</div>

	<div class="actions">
	<a href="#" name="commit" data-rel="dialog" type="button" data-theme="b" id="one">Create Post</a>
	</div>

	</form>
	</body>
	<html>