lukaszkorecki/Readme.markdown

## Readme.markdown

      
    Raw
  

              Readme.markdown
            
          
    Compatibility

Works in Mikrob which is deployed both to Titanium Desktop and as a Chrome Application.
This code was extracted from my own code and a wrapper library which I'm working on.
Any questions? Post them in comments.
Behind the scenes

Here's where everything happens:


jsOAuth goes through your post data and checks whether a reference to a file was included source


if it finds one, it resets the conent-type source


and build the whole form data object for you source


Notes

Few things to keep in mind:


I used it only with an API which doesn't use OAuth-echo, and allows direct uploads


this is based on OAuth 1.0a (Oauth2 is not supported yet)


## oauth-file-upload.html
<!DOCTYPE html >
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <title>OAuth form data test</title>
  <script src="zepto.js" type="text/javascript" charset="utf-8"></script>
  <script src="jsoauth.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    // I'm assuming that your user is already authenticated and can make requests etc
    var oauth = Oauth(options = {});


    function oauthUpload() {
      var body = $('#status').value(),
          // this is the important bit:
          // you need to get the raw dom element which is the file  upload filed in your form
          file = $('#picture').dom[0].files[0],

          // your usual callbacks
          callbacks = {
            onSuccess : function() {
                          console.log('upload worked!')
                        },
            onFailure : function() {
                          console.log('upload failed!');
                          console.dir(arguments);
                        }
          },

          uploadData = {
            'status' : body,
            'file' : file
          };

      oauth.post('http://example.com/api/picture_upload',uploadData, callbacks.onSuccess, callbacks.onFailure);

      return false;
    }

    $('#mainForm').submit(oauthUpload)
  </script>

</head>
<body >
  <div id="form">
    <form id="mainForm" action="/" method="post" accept-charset="utf-8">

      <input type="file" name="picture" value="value" id="picture"/>
      <input type="text" name="status" value="value" id="status"/>

      <p><input type="submit" value="Continue &rarr;"/></p>
    </form>
  </div>
</body>
</html>
	<!DOCTYPE html >
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>OAuth form data test</title>
	<script src="zepto.js" type="text/javascript" charset="utf-8"></script>
	<script src="jsoauth.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	// I'm assuming that your user is already authenticated and can make requests etc
	var oauth = Oauth(options = {});


	function oauthUpload() {
	var body = $('#status').value(),
	// this is the important bit:
	// you need to get the raw dom element which is the file upload filed in your form
	file = $('#picture').dom[0].files[0],

	// your usual callbacks
	callbacks = {
	onSuccess : function() {
	console.log('upload worked!')
	},
	onFailure : function() {
	console.log('upload failed!');
	console.dir(arguments);
	}
	},

	uploadData = {
	'status' : body,
	'file' : file
	};

	oauth.post('http://example.com/api/picture_upload',uploadData, callbacks.onSuccess, callbacks.onFailure);

	return false;
	}

	$('#mainForm').submit(oauthUpload)
	</script>

	</head>
	<body >
	<div id="form">
	<form id="mainForm" action="/" method="post" accept-charset="utf-8">

	<input type="file" name="picture" value="value" id="picture"/>
	<input type="text" name="status" value="value" id="status"/>

	<p><input type="submit" value="Continue →"/></p>
	</form>
	</div>
	</body>
	</html>