Question

我正在尝试使用精细上传器脚本和rails服务器实现直接上传S3系统。

我面临的问题是，我在S3上传成功的情况下发布的端点（即uploadSuccess端点）是一个呈现rails js.erb模板的控制器，据说应该更新dom。精细上传脚本将脚本捕获为成功的json响应，但js脚本不会如此执行。

相关代码：

images_controller.rb

def create
  @image = Image.create!
  set_standard_vars
end

create.js.erb（view）

alert("This is the view");
$("div#image_name").attr("id", <%= @image.name %>);

uploader.js

$(function () {
'use strict';

$("div#button").fineUploaderS3({
    debug: true,
    uploaderType: 'basic',
    button: $('div#button'),
    validation: {
      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
      sizeLimit: 3000000 // 3MB
    },
    objectProperties: {
      key: function(fileId) {
          var filename = $("div#button").fineUploader("getName", fileId);
          return item_picture_bucket + "/" + filename;
      },
      acl: "public-read"
    },
    request: {
        endpoint: "mybucket.s3.amazonaws.com",
        accessKey: access_key
    },
    signature: {
        endpoint: signature_end_point,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
    uploadSuccess: {
        endpoint: upload_url,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
  })
});

请注意，upload_url设置为image #create。 create.js.erb模板由rails正确呈现，但脚本将其解释为json，而不是javascript要流式传输到浏览器，因此它不会显示警告框。

提前感谢您的帮助。

Answer 1

虽然我没有fine uploader的经验，但我会给你一些关于Rails的想法，考虑到作者花时间及时回复你：

<强>的respond_to

#app/controllers/images_controller.rb
def create
  @image = Image.create!
  set_standard_vars
  respond_to do |format|
      format.html
      format.json { render json: {success: true} }
  end
end

如果上传者是processing the request as JSON，或许你最好准备一个JSON响应？这将允许您至少直接使用精细上传器处理响应（rather like how ajax:success works）：

$("div#button").fineUploaderS3({
    debug: true,
    uploaderType: 'basic',
    button: $('div#button'),
    validation: {
      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
      sizeLimit: 3000000 // 3MB
    },
    objectProperties: {
      key: function(fileId) {
          var filename = $("div#button").fineUploader("getName", fileId);
          return item_picture_bucket + "/" + filename;
      },
      acl: "public-read"
    },
    request: {
        endpoint: "mybucket.s3.amazonaws.com",
        accessKey: access_key
    },
    signature: {
        endpoint: signature_end_point,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
    uploadSuccess: {
        endpoint: upload_url,
        customHeaders: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
  })
})
.on('complete', function(event, id, fileName, responseJSON) {
       alert("Success: " + responseJSON.success);
       if (responseJSON.success) {
          alert("success");
       }
});

这需要返回正确的JSON

Answer 2

我认为我找到了一个合理的解决方案来解决这个问题。

在images_controller.rb中，不是将模板渲染为javascript，而是使用render_to_string方法将模板渲染为文本，并将其封装到json响应中：

def create
  # create! is really to simplify the example, in reality you want to use a background worker to 
  # attach the image to a model and maybe resize it, but this is not the point of the question
  @image = Image.create! 
  set_standard_vars
  render :json => { :success => true, :partial => render_to_string }
end

这会将渲染的create.js.erb模板发送回fineuploader进入json响应。然后我使用eval JS方法和“on complete”回调运行脚本：

$(function () {
    'use strict';

    $("div#button").fineUploaderS3({
        debug: true,
        uploaderType: 'basic',
        button: $('div#button'),
        validation: {
          allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
          sizeLimit: 3000000 // 3MB
        },
        objectProperties: {
          key: function(fileId) {
              var filename = $("div#button").fineUploader("getName", fileId);
              return item_picture_bucket + "/" + filename;
          },
          acl: "public-read"
        },
        request: {
            endpoint: "anglers-zoo.s3.amazonaws.com",
            accessKey: access_key
        },
        signature: {
            endpoint: signature_end_point,
            customHeaders: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
            }
        },
        uploadSuccess: {
            endpoint: upload_url,
            customHeaders: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
            },
            params: {
              'hash': image_group,
              'position': $('#button_slot').data('imageposition'),
            }
        },
      }).on("submit", function(id, name) {
        $('.destroy_image').hide();
        $('#button').hide();
        $("div#button").parent().find('#throbber').show();
        disable_submit_button();
      }).on("complete", function(event, id, name, responseJSON, xhr){
        jQuery.globalEval(responseJSON.partial);
      });
    });

它仍然不是100％的轨道方式，但它对我来说足够干净和轨道系统。

uploadSuccess：如何从rails应用程序呈现js.erb响应

2 个答案: