将 Rails active_storage 与 js 上传器集成答案

【问题标题】：Integration Rails active_storage with js uploaders将 Rails active_storage 与 js 上传器集成
【发布时间】：2018-06-15 09:41:05
【问题描述】：

有没有人将 Rails ActiveStorage 与任何 js 上传器（例如 Uppy 或 Dropzone）集成的示例？

【问题讨论】：

标签： ruby-on-rails rails-activestorage

【解决方案1】：

我们可以使用 ActiveStorage 的“DirectUpload”类来做到这一点。它是activestorage内部用来创建文件对象并直接上传到指定服务的javascript类。

Dropzone 需要指定一个 URL，它可以在上传时发布文件数据。在这种情况下，您可以提供用于向 Dropzone 提供成功消息的临时 URL，然后您可以创建一个 ActiveStorage DirectUpload 对象以使用 Active Storage 上传文件

Dropzone.options.folderUpload = {
  maxFiles: 100,
  url: temp_url,
  clickable:false,
  addRemoveLinks: false,
  //timeout: 25000,
  accept: function(file, done) {
  },
  init: function() {
    this.on("success", function(file, response) {
      // window.$('.dz-progress').hide();
      // window$('.dz-size').hide();
      // window.$('.dz-error-mark').hide();
      toastr.success("File uploaded successfully");
    });
  }
}

您可以使用处理文件更改事件并创建“DirectUpload”类的对象，在附加文件后立即创建直接上传文件。

这是一个简单的例子

import { DirectUpload } from "activestorage"

  // on file selection or change {
  const url = element.dataset.directUploadUrl
  const upload = new DirectUpload(file, url)

  upload.create((error, blob) => {
    if (error) {
      // Handle the error
    } else {
      // Add an appropriately-named hidden input to the form with a value of blob.signed_id
      $('<input>').attr({
        type: 'hidden',
        name: 'your_object[files][]',
        value: blob.signed_id
      }).appendTo('form');
    }
  })
// }

上传到activestorage后，您可以使用

$("form").submit() 这会将这些上传附加到您的 rails 模型对象。请记住，您必须更新带有签名 ID 的表单，否则它不会将上传附加到您的模型对象。

我最近在我的一个项目中使用了上述流程。

【讨论】：