使用带有JSON的Active Storage手动上载

我正在尝试为我的Rails应用程序的所有文件和图像制作一般文件上传器 . 上传器功能与流行的JS上传器相同，例如Filestack或Uppy Uploader，用户只需在浏览器上选择任何文件，然后应用程序将处理文件并在文件上传后返回文件的URL . 现在，通过这个URL，我们可以将它附加到任何形式/ WYSIWYG编辑器/我们喜欢的地方，如聊天消息等 .

为此，我的方法是使用Rails Active Storage进行手动上载 .

首先，我创建一个名为Uploader的类，它链接到Rails Active Storage：

app/models/uploader.rb

class Uploader < ApplicationRecord
  has_one_attached :file
end

然后，我使用名为“file”的操作为此Uploader创建了一个Controller，其中将处理所有文件：

config/routes.rb

post 'uploaders/file' => 'uploaders#file'

app/controllers/uploaders_controller.rb

def file
    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:uploader][:file],
      filename: params[:uploader][:file].original_filename,
      content_type: params[:uploader][:file].content_type
    )

    @filelink = url_for(blob)

    respond_to do |format|
      format.html { redirect_back(fallback_location: root_path) }
      format.js
    end
  end

最后，这是这个Uploader的视图：

app/views/new.html.erb

<h3>Select Files To Upload</h3>

<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Save
  <% end %>
<% end %>

QUESTION

所以，我的问题是如何在上面的代码中使用JSON，以便我可以获取上传的文件URL？

首先，我已将上述代码更改为：

app/controllers/uploaders_controller.rb

def file
    blob = ActiveStorage::Blob.create_after_upload!(
      io: params[:uploader][:file],
      filename: params[:uploader][:file].original_filename,
      content_type: params[:uploader][:file].content_type
    )

    render json: { filelink: url_for(blob) }
  end

app/views/new.html.erb

<%= form_for @uploader, url: uploaders_file_path(@uploader), remote: true, :html => {:'data-type' => 'json', :multipart => true} do |f| %>
  <%= f.file_field :file, direct_upload: true,  class: "form-control" %>

  <%= f.button type: "submit", id: "submit-uploader", class: "btn btn-primary btn-md", data: {disable_with: "Uploading..."} do %>
    Save
  <% end %>
<% end %>

<script type="text/javascript">
  $("#submit-uploader").click(function(e){
    e.preventDefault();

    $.ajax({
      type: "POST",
      dataType: "script",
      url: $(this).parents("form").attr("action"),
      contentType: 'application/json',
      data: JSON.stringify({ file: $("#uploader_file"), _method: 'post' })
    }).done(function( data ){
      console.log(data);
    });
  });
</script>

现在，我使用javascript通过JSON提交活动存储表单 . 但显然缺少一些东西，因为脚本目前还没有处理任何活动存储 . 那么，我该如何解决这个问题呢？

谢谢！