Question

我在Rails应用程序中使用Paperclip来验证文件附件并将其加载到AWS S3中。期望的行为是用户能够上传多个＆＃34; RecordAttachments＆＃34; （文件附件）提交记录表格时。

问题是我想在用户选择要使用文件选择器上传的文件时立即开始上传RecordAttachments，无论用户是否已提交记录表单。我还想确保每个RecordAttachment都映射到它所属的Record。这一定是可能的，但我还不确定如何构建逻辑。

目前，我可以允许用户在填写并提交“记录”表单时创建多个RecordAttachments，但我想立即开始上传文件，以便向用户显示表单上每次上传的进度页。这是允许用户使用多个RecordAttachments提交记录的代码：

#app/models/record.rb
class Record < ActiveRecord::Base
  has_many :record_attachments
  accepts_nested_attributes_for :record_attachments

  # Ensure user has provided the required fields
  validates :title, presence: true
  validates :description, presence: true
  validates :metadata, presence: true
  validates :hashtag, presence: true
  validates :release_checked, presence: true

end

子元素：

#app/models/record_attachment.rb  
class RecordAttachment < ActiveRecord::Base
  belongs_to :record
  validates :file_upload, presence: true

  # Before saving the record to the database, manually add a new
  # field to the record that exposes the url where the file is uploaded
  after_save :set_record_upload_url 

  # Use the has_attached_file method to add a file_upload property to the Record
  # class. 
  has_attached_file :file_upload

  # Validate that we accept the type of file the user is uploading
  # by explicitly listing the mimetypes we are willing to accept
  validates_attachment_content_type :file_upload,
    :content_type => [
      "video/mp4", 
      "video/quicktime"
  ]
end

记录控制器：

class RecordsController < ApplicationController
  # GET /records/new
  def new
    @record = Record.new
  end

  def create
    # retrieve the current cas user name from the session hash
    @form_params = record_params()
    @form_params[:cas_user_name] = session[:cas_user]
    @record = Record.create( @form_params )

    respond_to do |format|
      if @record.save
        if params[:record_attachments]
          params[:record_attachments].each do |file_upload|
            @record.record_attachments.create(file_upload: file_upload)
          end
        end

        flash[:success] = "<strong>CONFIRMATION</strong>".html_safe + 
          ": Thank you for your contribution to the archive."
        format.html { redirect_to @record }
        format.json { render action: 'show', 
          status: :created, location: @record }
      else
        format.html { render action: 'new' }
        format.json { render json: @record.errors, 
          status: :unprocessable_entity }
      end
    end
  end
end

我的表单如下：

<%= form_for @record, html: { multipart: true } do |f| %>
  <div class="field">
    <%= f.label :title, "Title of Material<sup>*</sup>".html_safe %>
    <%= f.text_field :title %>
  </div>
  <!-- bunch of required fields followed by multiple file uploader: -->
  <div id="file-upload-container" class="field">
    <%= f.label :file_upload, "Upload File<sup>*</sup>".html_safe %>
    <div id="placeholder-box">File name...</div>
    <%= f.file_field :file_upload, 
      multiple: true,
      type: :file, 
      name: 'record_attachments[]', 
      id: "custom-file-upload",
      style: "display:none"
    %>
    <span class="btn btn-small btn-default btn-inverse" id="file-upload-button" onclick="$(this).parent().find('input[type=file]').click();">Browse</span>
  </div>

  <!-- bunch of fields followed by submit button -->
  <%= button_tag(type: 'submit', class: "btn btn-primary blue-button submit-button") do %>
    <i class="icon-ok icon-white"></i> SUBMIT
  <% end %>
<% end %>

鉴于此设置，其他人是否知道任何方法可以让我在用户选择RecordAttachments时立即开始上传，而不是在他们提交记录表单时？

在下面与@ShamSUP讨论之后，我想到的是：在页面加载时，检查用户是否有Record_id为零的任何RecordAttachments。如果是，请删除它们。然后用户选择一个或多个文件。对于每个，在RecordAttachment表中保存一行，并将record_id设置为nil。然后，如果/当用户成功提交其Record表单时，找到具有record_id == nil的所有用户的RecordAttachments，并将每个记录的record_id设置为当前Record的id。

这看起来像是一个合理的解决方案吗？有更好/更简单的方法吗？我非常感谢其他人可以在这个问题上提供任何帮助！

Answer 1

Javascript无法实际读取文件输入字段中的文件内容，因此在用户尝试填写表单的其余部分时，很遗憾无法通过ajax提交它们。但这并不意味着你不能执行一些迂回方法。

您可以尝试的是在表单页面加载时生成记录ID，然后在主窗体的隐藏输入中包含id，并将文件输入放在单独的表单中，或者将它们移动到单独的表单中页面加载后的javascript。与文件输入格式相同，还包括生成的记录ID。

<form id="main-form" enctype="multipart/form-data">
    <input type="hidden" name="recordid" value="123">
    <input type="text" name="title">

    .... etc fields
</form>
<form id="file-form" enctype="multipart/form-data" target="file_frame">
    <div id="placeholder-box">Select a file</div>
    <input type="file" multiple name="record_attachments">
    <input type="hidden" name="recordid" value="123">
</form>

获得这两个表单后，您可以使用javascript在值更改后将文件表单提交到iframe，从而阻止在提交时重新加载页面。

<iframe name="file_frame" id="file_frame" src="path_to_upload_script" />

一些示例javascript：More in-depth script here

$("input.[name=record_attachments]").change(function () {
    $("#file_form').submit();
});

因为您包含了hiden recordid字段，所以您可以在用户完成其他部分后使用此字段关联这两个表单。

Answer 2

我最终使用ng-file-upload，这是一个非常棒的Angular.js文件上传库，用于此任务。 full source可用，以防其他人在保存父记录之前最终需要保存子项，但是长和短是您要从Javascript写入子数据库，然后保存父项后，更新每个子节点的parent_id元素。

Rails：保存父元素之前保存子元素

2 个答案: