Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// See also: http://www.aaronland.info/weblog/2014/09/22/desire/#upload
function upload_init(){
$("#upload-form").submit(function(){
try {
var photos = $("#photo");
var files = photos = photos[0].files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(evt){
var data_uri = evt.target.result;
var dt = new Date();
var pending_id = window.btoa(dt.toISOString());
var key = "upload_" + pending_id;
localforage.setItem(key, data_uri, function(rsp){
upload_process_pending(pending_id);
});
};
reader.readAsDataURL(file)
}
catch(e){
console.log("Hrm, there was a problem uploading your photo.", e);
return false;
}
return false;
});
upload_clear_processing();
setInterval(upload_process_pending, 30000);
}
function upload_clear_processing(){
var re = /processing_(.*)/;
localforage.keys(function(rsp){
var count = rsp.length;
for (var i=0; i < count; i++){
var m = rsp[i].match(re);
if (m){
localforage.removeItem(m[0], function(){
console.log("unset " + m[0]);
});
}
}
});
}
function upload_process_pending(){
var re = /upload_(.*)/;
localforage.keys(function(rsp){
var count = rsp.length;
for (var i=0; i < count; i++){
var m = rsp[i].match(re);
if (m){
console.log("process pending id " + m[1]);
upload_process_pending_id(m[1]);
}
}
});
}
function upload_process_pending_id(pending_id){
var processing_key = "processing_" + pending_id;
var upload_key = "upload_" + pending_id;
console.log("process id: " + processing_key);
console.log("process id: " + upload_key);
localforage.getItem(processing_key, function(rsp){
if (rsp){
console.log("got processing key, so skipping");
return;
}
var dt = new Date();
var ts = dt.getTime();
localforage.setItem(processing_key, ts, function(rsp){
console.log("set " + processing_key + ", to " + ts);
localforage.getItem(upload_key, function(data_uri){
console.log("got data uri for " + upload_key);
try {
var blob = upload_data_uri_to_blob(data_uri);
}
catch(e){
console.log("failed to create a blob for " + upload_key + ", because " + e);
return false;
}
upload_do_upload(blob, pending_id);
});
});
});
}
function upload_do_upload(file, pending_id){
console.log("do upload for " + pending_id);
var data = new FormData();
data.append('photo', file);
var on_success = function(rsp){
console.log(rsp);
var processing_key = "upload_" + pending_id;
var upload_key = "upload_" + pending_id;
localforage.removeItem(upload_key, function(rsp){
console.log("removed " + upload_key);
localforage.removeItem(processing_key, function(rsp){
console.log("removed " + processing_key);
});
});
};
var on_error = function(rsp){
console.log(rsp);
var processing_key = "processing_" + pending_id;
localforage.removeItem(processing_key, function(rsp){
console.log("removed " + processing_key);
});
var details = '';
try {
var rsp = JSON.parse(rsp['responseText']);
details = rsp['error']['message'];
console.log(details);
}
catch(e){
console.log(e);
}
};
$.ajax({
url: 'https://upload.example.com/',
type: "POST",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: on_success,
error: on_error,
});
return false;
}
// http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
function upload_data_uri_to_blob(data_uri){
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (data_uri.split(',')[0].indexOf('base64') >= 0){
byteString = atob(data_uri.split(',')[1]);
}
else {
byteString = unescape(data_uri.split(',')[1]);
}
// separate out the mime component
var mimeString = data_uri.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment