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>