javascript - 目录 : Accept File Upload and Copy&Paste Upload

Question

我想让用户可以使用 HTML 输入上传 CSV 文件，或者将列数据复制并粘贴到文本框中，然后创建 CSV 文件，将其保存到模型中。

你知道有什么好的库或实用的方法来解决这个问题吗？

Answer 1

伪实现示例:

测试在 Rails 5.2 上使用 ActiveStorage

假设你已经set up ActiveStorage ,

app/models/foo.rb

class Foo < ApplicationRecord
  has_one_attached :csv

  # sets `csv` attachment from a String input
  # i.e. value = "Name,Age,\nBen,24,\nJenny,23,\nGeorge,21,\n"
  def csv_string=(value)
    tempfile = Tempfile.new
    tempfile << value
    tempfile.close

    self.csv = ActionDispatch::Http::UploadedFile.new(
      tempfile: tempfile,
      type: 'text/csv',
      filename: 'some_file_name.csv' # << change this filename accordingly
    )
  end
end

app/views/foos/_form.html.erb

<%= form_with(model: @foo, local: true) do |form| %>
  <!-- ... -->
  <%= form.file_field :csv %>
  <%= form.text_area :csv_string %>
  <!-- ... -->
<% end %>

app/controllers/foos_controller.rb

class FoosController < ApplicationController

  def create
    @foo = Foo.new(foo_params)
    # ...
  end

  private

  def foo_params
    params.require(:foo).permit(:csv, :csv_string)
  end
end

您的TODO:

• 添加一些 JS，允许用户为 CSV 选择“文件上传”或“文本区域”(即一些 JS 将隐藏/显示(和“启用”/“禁用”)输入之一相应地)，因为如果你没有这种交互，它会让用户感到困惑，因为上面的 file_field 和 text_area 并排出现在表单上。 (但只有一个可行:如果两者均由用户输入，csv_string 将覆盖 csv 的值)