Question

有没有人有任何集成Rails ActiveStorage与任何js上传者的例子，比如Uppy或Dropzone？

Answer 1

我们可以使用＆＃34; DirectUpload＆＃34;一类活跃的存储。它是一个javascript类，由activestorage在内部用于创建文件对象并直接将其上载到指定的服务上。

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

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");
    });
  }
}

您可以在使用处理文件更改事件并创建＆＃34; DirectUpload＆＃34;的对象时立即创建直接上传文件。类。

这是简短的例子

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后，您可以使用

提交表单

$（＆＃34;形式＆＃34）。提交（）这会将这些上传附加到您的rails模型对象。请记住，您必须在其中更新带有签名ID的表单，否则它不会将上载附加到您的模型对象。

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

使用js上传器集成Rails active_storage

1 个答案: