Using javascript and XMLHTTPRequest to upload file/image.
<div id="drop_zone" style=>Drop files here</div> <output id="list"></output> <script> function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // XHR for Chrome/Firefox/Opera/Safari. xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { // XDomainRequest for IE. xhr = new XDomainRequest(); xhr.open(method, url); } else { // CORS not supported. xhr = null; } return xhr; } function test() { var url = YOUR_IMAGE_URL; var xhr = createCORSRequest('PUT', url); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send(); } function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // FileList object. // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>'); var reader = new FileReader(); var reader2 = new FileReader(); reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = "<img style=\"width:400px;\" src=\"data:image/jpeg;base64" + e.target.result + "\" />"; }; })(f); reader2.onload = (function(theFile) { return function(e){ file_body = e.target.result; file_blob = new Blob([file_body], { type: "image/jpeg"}); var method = "POST", url = YOUR_URL;, handler = function(event) { alert(event.text) }, success_handler = function(event) { /* update user */ var method = "POST", url = YOUR_URL, auth_token = JSON.parse(event.text).response.auth_session.token, data = { picture: file_blob, x_oauth_token: auth_token } oauth.request({ success: handler, failurea: handler, url: url, method: method, data: data }) }, data = { //YOUR DATA SECTION } oauth.request({ success: success_handler, failure: handler, url: url, method: method, data: data }) }; })(f); reader.readAsDataURL(f); reader2.readAsDataURL(f); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. } // Setup the drag and drop listeners. var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleFileSelect, false); </script>