jquery - rails : s3_direct_upload - How do I save/use the data response?

Question

我已经到处寻找答案，所以我确信以前没有人问过这个问题。请帮助我，救世主!

我正在尝试使用 s3_direct_upload gem 来处理直接将文件上传到 S3，但我只是不知道如何查看/使用/保存显然是从 S3 服务器返回的数据。我已经阅读了 s3_direct_upload 的 README 十几遍，它提供了一些 JS 代码示例片段，但没有告诉我该代码应该放在哪里。

我已经完成了自述文件的第一部分，并设置了 AWS 配置和简单的 jQuery

jQuery ->
  $("#s3-uploader").S3Uploader()

在我的 CoffeeScript 中(正确包含在 Assets 管道中)。

我的观点是:

<%= s3_uploader_form callback_url: work_path, callback_param: "work[url]", class: "s3-uploader" do %>
    <%= file_field_tag :file, multiple: false %>
<% end %>

<%= form_for(@work) do |f| %>

    <%= f.label :name, "Title" %>
    <%= f.text_field :name %>
    <%= f.label :category, "Category" %>
    <%= f.text_field :category %>
    <br>
    <%= f.submit "Upload", id: "btn-upload-work", class: "btn btn-large btn-warning btn-upload" %>

<% end %>

我希望用户上传作品并填写一些字段。当用户单击“上传”按钮时，应创建一个新的作品，其属性:url等于上传文件的url，以及与用户输入的文本相同的 :name 和 :category 属性。然后页面应该重定向到已提交作品的show页面。自述文件给出了这个例子:

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
  $('#someHiddenField').val(content.url)

但我不知道该把这段代码放在哪里。

这是我的 Controller :(我知道 create 操作需要更改，但我不知 Prop 体是什么。我已经用 respond_to 尝试了几个小时没有用。)

def show
    @work = Work.find(params[:id])
end

def new
    @work = Work.new
end

def create
    @work = current_user.works.new(work_params)
    if @work.save
        flash[:success] = "Work successfully submitted!"
        redirect_to @work
    else
        render 'new'
    end
end

private

    def work_params
        params.require(:work).permit(:name, :category, :url)            
    end

即使阅读了十几遍自述文件，我仍然不明白 callback_url 到底是什么，callback_param 是什么，以及如何使用它们。更糟糕的是，加载此 View 会出现错误 - Rails 不喜欢 callback_url: work_path 部分。我必须将其更改为 work_path(@work) 才能加载它，但我不确定这是否正确(因为我不明白 callback_url)。

从其他人提出的有关 s3_direct_upload 的问题来看，他们似乎已经知道如何使用它(问题只是较小的细节)。所以我迷失了，因为我什至无法让它工作。我对网络前端有点陌生，所以请耐心听我解释一下。非常感谢!

Answer 1

I still don't understand what callback_url really is,

callback_url 是 gem 完成将文件上传到 s3 后通过 AJAX 发布到的路径。所以 work_path(@work) 应该没问题。

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
$('#someHiddenField').val(content.url)

But I have no idea where to put this bit of code.

您可以将上述代码放在放置 $("#s3-uploader").S3Uploader() 的同一个 CoffeeScript 文件中。将 $('#someHiddenField').val(content.url) 替换为 alert(content.url)。这样，如果上传成功，您将收到一条警报消息。

还将以下代码粘贴到同一个 CoffeeScript 文件中

$('#myS3Uploader').bind "s3_upload_failed", (e, content) ->
  alert("#{content.filename} failed to upload : #{content.error_thrown}")

如果出现错误，上面的代码将显示警报。

如果您在提交文件后没有看到两者中的任何一个，则存在其他问题。我强烈建议使用 firebug 。它对于调试客户端 JavaScript 函数非常有帮助。在 firebug net 面板中，您可以查看 gem 是否正在调用 s3 服务器。它还会在控制台面板中显示任何 JavaScript 错误。