jQuery-file-upload: как отправить отдельный запрос для каждого размера файла

Question

Я использую виджет jQuery File Upload для прямой загрузки с клиентской стороны в AWS S3. Используются CORS и предварительно подписанный POST.

Если загруженный исходный файл или файл изменен в размере, как только он работает нормально. То же самое работает для множественного выбора.

Пока я не добавлю измененные версии. Изменение размера выполняется через processQueue из jQuery-File-Upload.

При попытке загрузить несколько разрешений одного изображения S3 возвращает сообщение об ошибке «POST требует ровно одну загрузку файла на запрос».

Как можноЯ отправляю отдельный запрос XHR для каждого размера файла?

singleFileUploads По умолчанию параметр true, но он работает только для разных файлов, а не для версий файлов каждого файла.

В моем случае у меня естьследующая структура:

file_input.element[0]
  data.files[0] - original size
  data.files[1] - thumbnail
file_input.element[1]
  data.files[0] - original size
  data.files[1] - thumbnail
...

Думаю, мне нужно использовать параметры обратного вызова, но уже 3 дня не могу найти, как это сделать. Заранее спасибо.

Main js выглядит следующим образом:

$(document).on('turbolinks:load', function() {
  $(function() {
    var submitButton = $('#fileupload').find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    $('#fileupload').after(barContainer);

    $('#fileupload').fileupload({
      url:             $('#fileupload').data('url'),
      type:            'POST',
      autoUpload:       true,
      formData:         $('#fileupload').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,
      singleFileUploads: false,
      processQueue: [
          {
              action: 'loadImage',
              fileTypes: /^image\/(gif|jpeg|png)$/,
              maxFileSize: 20000000 // 20MB
          },
          {
              action: 'resizeImage',
              maxWidth: 1920,
              maxHeight: 1200
          },
          {action: 'saveImage'},
          {action: 'duplicateImage'},
          {
              action: 'resizeImage',
              maxWidth: 1280,
              maxHeight: 1024
          },
          {action: 'saveImage'},
      ],

      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e) {
        submitButton.prop('disabled', true);

        progressBar.
          css('background', 'green').
          css('display', 'block').
          css('width', '0%').
          text("Loading...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Uploading done");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//' + $('#fileupload').data('host') + '/' + key;

        // create hidden field
        var input = $("<input />", { type:'hidden', name: $('#fileupload').attr('name'), value: url })
        $('#fileupload').append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
    $.blueimp.fileupload.prototype.processActions.duplicateImage = function (data, options) {
        if (data.canvas) {
            data.files.push(data.files[data.index]);
        }
        return data;
    };
  });
});

form.data ('url') и for.data ('form-data') - подготовлены в контроллере с помощью prePOST-подпись, сгенерированная из рубинового камня AWS.

Answer 1

Мое собственное решение не было хорошим, но оно работает - добавьте submit обратный вызов:

  singleFileUploads: true,
  submit: function (e, data) {
    if (data.files.length > 1) {
      original_file = data.files[1]
      thumbnail = data.files[0]
      thumbnail.name = 'thumbnail_'+thumbnail.name
      data.files = [thumbnail];
      data.submit();
      data.files = [original_file]
    }
  }

Надеюсь, что в будущем кто-то напишет правильный способ сделать.