Sample usages of my extension to blueimp.fileupload, s3upload

s3upload-samples.js

// simple usage
// 2 retries on S3
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerMethod: 'PUT',
  submitStrategy: {
    retries: 2
  }
})

// submit sometime later i.e. when a user clicks a button
// and not immediately after files are being added
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerMethod: 'PUT',
  autoSubmit: false
})

$('#my-button').click(function () {
  $('input#file').s3upload('submit');
})


// consolidate an upload, actually confirm that it is really uploaded to S3
// useful for IE8 & IE9
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerMethod: 'PUT',
  submitStrategy: {
    retries: 2
  },
  consolidate: function (data) {
    // check with your app
    // return a boolean or a promise (so you can do it asynchronously)
  }
})

// retries on register as well
// delay between retries computed by function
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerStrategy: {
    retries: 3,
    delay: function (attempt) {
      return attempt * 1000;
    }
  },
  submitStrategy: {
    retries: 4,
    delay: 2000
  }
})

// retry S3 on certain errors only 
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerStrategy: {
    retries: 3,
    delay: function (attempt) {
      return attempt * 1000;
    }
  },
  submitStrategy: {
    retries: 4,
    delay: 2000,
    retryRules: [
      {
        status: 400,
        codes: ['RequestTimeout']
      },
      {
        status: 503,
        codes: ['ServiceUnavailable', 'SlowDown']
      }
    ]
  }
})

// retry S3 on all BUT certain errors
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerStrategy: {
    retries: 3,
    delay: function (attempt) {
      return attempt * 1000;
    }
  },
  submitStrategy: {
    retries: 4,
    delay: 2000,
    negativeRetryRules: true,
    retryRules: [
      {
        status: 403,
        codes: ['AccessDenied']
      }
    ]
  }
})


// do something before retrying stuff
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  submitStrategy: {
    retries: 4,
    delay: 2000,
    negativeRetryRules: true,
    retryRules: [
      {
        status: 403,
        codes: ['AccessDenied']
      }
    ],
    beforeRetry: function (xhr, status, error)  { // <- the ajax response is given here
      // do something about it
      // return false to 
    }
  }
})


// edge case where we need to throw a built-in strategy away and roll a new one
$('input#file').s3upload({
  registerUrl: 'foo/bar',
  registerStrategy: function () {
    // do lots of stuff here
    // and at the end, return an object with an execute method;
    
    return {
      execute: function (action) {
        // execute it as you see fit...
      }
    }
  },
  submitStrategy: function () {
    // ...
  }
})

// Finally, lots of available events to listen to
// We build the UI by listening to these events

// method A
$('input#file').s3upload({
  //...
  submit: function (e, data) {
    // do something before submit
    // return false to cancel it
  },
  send: function (e, data) {
    // do something before sending to S3
    // return false to abort it
  },
  register: function (e, file, data, registrationData) {
    // do something registering an uploaded file
    // return false to abort it
  },
});


// method B - and what's considered best practice
$('input#file').s3upload({
  //...
})
  .on('s3uploadfail', function (e, data) {
    // preventDefault on event to cancel it
  }).on('s3uploaddone', function (e, data) {
    // preventDefault on event to cancel it
  }).on('s3uploadregister', function (e, data) {
    // preventDefault on event to cancel it
  });
  


// all available events

.bind('s3uploadadd', function (e, data) {/* ... */})
.bind('s3uploadsubmit', function (e, data) {/* ... */})
.bind('s3uploadsend', function (e, data) {/* ... */})
.bind('s3uploaddone', function (e, data) {/* ... */})
.bind('s3uploadfail', function (e, data) {/* ... */})
.bind('s3uploadalways', function (e, data) {/* ... */})

// added ones - start

.bind('s3uploadretrysubmit', function (e, data) {/* ... */})
.bind('s3uploadregister', function (e, file, data, registrationData) {/* ... */})
.bind('s3uploadregisterdone', function (e, file, data, registrationData) {/* ... */})
.bind('s3uploadregisterfailed', function (e, file, data, registrationData) {/* ... */})
.bind('s3uploadregisteralways', function (e, file, data, registrationData) {/* ... */})
.bind('s3uploadretryregister', function (e, file, data, registrationData) {/* ... */})

// added ones - end

.bind('s3uploadprogress', function (e, data) {/* ... */})
.bind('s3uploadprogressall', function (e, data) {/* ... */})
.bind('s3uploadstart', function (e) {/* ... */})
.bind('s3uploadstop', function (e) {/* ... */})

.bind('s3uploadchange', function (e, data) {/* ... */})
.bind('s3uploadpaste', function (e, data) {/* ... */})
.bind('s3uploaddrop', function (e, data) {/* ... */})
.bind('s3uploaddragover', function (e) {/* ... */})
.bind('s3uploadchunksend', function (e, data) {/* ... */})
.bind('s3uploadchunkdone', function (e, data) {/* ... */})
.bind('s3uploadchunkfail', function (e, data) {/* ... */})
.bind('s3uploadchunkalways', function (e, data) {/* ... */});