Rails 4 Jquery File Upload ProcessQueue Error with Resize Image

Question

I am trying to upload multiple size versions of a single file directly to AWS S3 with the Jquery File Upload gem.

This code uploads correctly the file passed to the input:

$('#file_upload').find("input:file").each(function(i, elem) {
  var fileInput    = $(elem);
  var form         = $(fileInput.parents('form:first'));
  fileInput.fileupload({
    fileInput:       fileInput,
    url:             form.data('url'),
    type:            'POST',
    autoUpload:       true,
    formData:         form.data('form-data'),
    paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
    dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
    replaceFileInput: false,
    disableImageResize: false,
    singleFileUploads: false,
    sequentialUploads: true,
    imageCrop: true,
    processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 400,
              maxHeight: 400
          },
          {action: 'saveImage'}
      ],
      processstart: function (e) {
          console.log('Processing started...');
      },
      process: function (e, data) {
          console.log('Processing ' + data.files[data.index].name + '...');
      },
      processdone: function (e, data) {
          console.log('Processing ' + data.files[data.index].name + ' done.');
      }
  }); //fileupload

I also want to upload the same image but resized to 200x200. I followed the gem documentation https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-multiple-resolutions-of-one-image-with-multiple-resize-options and wrote the following processQueue

processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 400,
              maxHeight: 400
          },
          {action: 'saveImage'},
          {action: 'duplicateImage'},
          {
              action: 'resizeImage',
              maxWidth: 200,
              maxHeight: 200
          },
          {action: 'saveImage'},
      ],

and added the duplicateImage action.

$.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
  if (data.canvas) {
    data.files.push(data.files[data.index]);
  }
  return data;
};

Problem : the first saveImage does not upload the first image before duplicating. Instead there is only one POST request issued for both files, which returns the error POST requires exactly one file upload per request.

Is there a way to process the files one after the other?

Any idea what I'm missing?