Skip to content

Instantly share code, notes, and snippets.

@styledev
Created October 29, 2012 08:40
Show Gist options
  • Save styledev/3972397 to your computer and use it in GitHub Desktop.
Save styledev/3972397 to your computer and use it in GitHub Desktop.
My jQuery file upload call [failing resize]
// Functions Go Here
$(function(){ // on ready code goes here
var form = $('.direct-upload');
form.fileupload({
url: form.attr('action'),
type: 'POST',
// autoUpload: true,
dataType: 'xml', // This is really important as s3 gives us back the url of the file in a XML document
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 300,
maxHeight: 400
},
{
action: 'save'
}
],
add: function (event, data) {
$.ajax({
url: "/signed_url",
type: 'GET',
dataType: 'json',
data: {doc: {title: data.files[0].name}}, // send the file name to the server so it can generate the key param
async: false,
success: function(data) {
// Now that we have our data, we update the form so it contains all
// the needed data to sign the request
form.find('input[name=key]').val(data.key)
form.find('input[name=policy]').val(data.policy)
form.find('input[name=signature]').val(data.signature)
}
})
console.log('add')
data.submit();
}, send: function(e, data) {
$('.progress').fadeIn();
}, progress: function(e, data){
// This is what makes everything really cool, thanks to that callback
// you can now update the progress bar based on the upload progress
var percent = Math.round((e.loaded / e.total) * 100)
$('.bar').css('width', percent + '%')
console.log('uploading');
}, fail: function(e, data) {
console.log('fail')
}, success: function(data) {
// Here we get the file url on s3 in an xml doc
// var url = $(data).find('Location').text()
var url = $(data).find('Location').text().replace(/%2F/g,'/'); // S3::XML::URL
// $('#real_file_url').val(url) // Update the real input in the other form
console.log("URL: "+url);
}, done: function (event, data) {
$('.progress').fadeOut(300, function() {
$('.bar').css('width', 0)
})
},
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment