0

我正在使用神殿和jQuery File Upload将文件直接上传到 Amazon S3，但我在使用dropzone.js时遇到了问题。

当我使用没有 javascript 的 dropzone.js 时，一切正常。但是，如果我尝试使用带有 dropzone.js 的选项，则文件不会上传到 S3。

我的代码如下所示：

上传.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);*/
                }
            });

        }
    });

});

文档.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

我看不出有什么问题。

4

0 回答 0