dropzonejs и jQuery File Upload предопределенные файлы не работают

Question

Я использую shrine и jQuery File Upload для загрузки файлов напрямую в Amazon S3, но у меня возникают проблемы с тем, чтобы он работал с dropzone.js.

Когда я использую dropzone.js без JavaScript, все работает нормально. Но если я пытаюсь использовать параметры с dropzone.js, файл не загружается в S3.

Мой код выглядит так:

Upload.js

$(document).on("turbolinks:load", function () {

    $("[type=file]").fileupload({
        add: function (e, data) {
            console.log("add", data);
            data.progressBar = $('<div class="progress" style ="width: 300px"><div class="progress-bar"</div></div>').insertAfter(".loading");
            var options = {
                extension: data.files[0].name.match(/(\.\w+)?$/)[0], //file extension
                _: Date.now() //previene caching
            };

            $.getJSON("/files/upload/cache/presign", options, function (result) {
                console.log("presign", result);
                data.formData = result ['fields'];
                data.url = result['url'];
                data.paramName = "file";
                data.submit();
            });
        },
        progress: function (e, data) {
            console.log("progress", data);

            var progress = parseInt(data.loaded / data.total * 100, 10);
            var percentage = progress.toString() + '%';
            data.progressBar.find(".progress-bar").css("width", percentage).html(percentage);
        },
        done: function (e, data) {

            console.log("done", data);
            data.progressBar.remove();


            var document = {
                id: data.formData.key.match(/cache\/(.+)/)[1], // we have to remove the prefix part
                storage: 'cache',
                metadata: {
                    size: data.files[0].size,
                    filename: data.files[0].name.match(/[^\/\\]+$/)[0], // IE return full path
                    mime_type: data.files[0].type
                }
            };


            var form = $(this).closest("form");
            var form_data = new FormData(form[0]);
            form_data.append($(this).attr("name"), JSON.stringify(document));

            $.ajax(form.attr("action"), {
                contentType: false,
                processData: false,
                data: form_data,
                method: form.attr("method"),
                dataType: "json",
                success: function (response) {
                    /*var $img = $("<img/>", {src: response.image_url, width: 400});
                     var $div = $("<div/>").append($img);
                     $("#photos").append($div);*/
                }
            });

        }
    });

});

document.js

Dropzone.autoDiscover = false;
document.addEventListener("turbolinks:load", function () {
    new Dropzone("#myAwesomeDropzone", {
        paramName: "",
        maxFilesize: 2,
        dictDefaultMessage: 'Testing'
    });
});

HTML-форма

<%= form_for(@document, html: {multipart: true, class: 'dropzone', id: 'myAwesomeDropzone'}) do |f| %>
    <div class="fallback">
      <%= f.file_field :document %><br>
      <%= f.submit 'Upload my document' %>
    </div>
<% end %>

Единственное существенное отличие, которое я вижу в консоли (когда я использую параметры с dropzonejs), заключается в следующем GET от использования dropzonejs без кода JavaScript.

Started GET "/files/upload/cache/presign?extension=.png&_=1500254726834" for 127.0.0.1 at 2017-07-16 21:25:26 -0400

Я не вижу, в чем проблема.