Skip to content

Instantly share code, notes, and snippets.

@aug2uag
Last active February 23, 2016 00:43
Show Gist options
  • Save aug2uag/ea2ea0f0250d5ee05e9e to your computer and use it in GitHub Desktop.
Save aug2uag/ea2ea0f0250d5ee05e9e to your computer and use it in GitHub Desktop.
JS image upload with progress bar (not multipart/form)
var file = $('#filesToUpload').get(0).files[0];
if (!file) {
alert('no file');
return;
};
var o = {};
o.category = cat;
o.name = 'some file';
if (!o.name) {
alert('no filename');
return;
};
var reader = new FileReader();
reader.onload = function(evt) {
o.file = evt.srcElement.result;
sendFileToServer(o);
};
reader.readAsBinaryString(file);
function sendFileToServer(options) {
var requestObject = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
makeRequestWithHeaders(requestObject, '/api/upload', 'POST', options);
var progCounter = 0;
requestObject.onreadystatechange = function() {
if (requestObject.readyState === 2) {
setTimeout(function() {
progCounter = 25;
}, 600);
} else if (requestObject.readyState === 3) {
setTimeout(function() {
progCounter = 50;
}, 600);
} else if (requestObject.readyState === 4) {
setTimeout(function() {
progCounter = 100;
}, 600);
if (requestObject.status === 200) {
var data = JSON.parse(requestObject.responseText);
data.direction = 'marketing';
appendNewItem(data);
} else {
generateErrModal('network error, please check connection. you will now be logged out.', function() {
callback(true);
});
};
};
};
var foo0 = setInterval(function() {
var _progC = progCounter * 5.2;
$('#oprog').attr('aria-valuenow', _progC).width(_progC);
$('#oprog').text(progCounter + '%');
if (progCounter >= 100) finishFoo0();
if (progCounter >= 25 && requestObject.readyState !== 2 && requestObject.readyState !== 3 && requestObject.readyState !== 4) return;
progCounter += Math.floor(Math.random() * 5) + 1
}, 100);
function finishFoo0() {
clearInterval(foo0);
}
};
exports.s3Delete = function(req, res) {
var document = req.body;
var items = req.user.items[document.category];
items.forEach(function(i, idx) {
if (i.image === document.id) {
client.deleteFile(i.image, function(err, response){
if (err) return res.send(400, 'could not delete item, please try again later');
items.splice(i, 1);
req.user.markModified('items');
req.user.save(function(err) {
if (err) return res.send(400, 'could not delete item, please try again later');
res.send(200);
});
return;
});
};
});
}
var knox = require('knox');
var client = knox.createClient({...});
s3Upload = function(req, res) {
var document = req.body;
var headers = {
'Content-Length': req.body.image.length,
'Content-Type': "image/*"
};
var mime = document.image.indexOf('PNG') > -1 ? '.png' : '.jpg';
var name = document.name + mime;
client.putBuffer(new Buffer(document.image, 'binary'), name, headers, function(err, response){
if (err) return res.send(400, 'error uploading image, please try again later');
res.send(200);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment