Question

我使用 shrine 和 jQuery文件上传将文件直接上传到Amazon S3，但我遇到了问题，无法使用 dropzone.js

当我使用没有javascript的dropzone.js时，一切正常。但是如果我尝试使用带有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的选项时）是使用dropzonejs而没有javascript代码的GET。

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

我无法看出问题所在。

dropzonejs和jQuery文件上传预签名文件无效

0 个答案: