Last active
February 23, 2016 00:43
-
-
Save aug2uag/ea2ea0f0250d5ee05e9e to your computer and use it in GitHub Desktop.
JS image upload with progress bar (not multipart/form)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}; | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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