如何将文件从 froala 编辑器上传到 Rails 活动存储 [英] how to upload a file from froala editor to rails active storage

问题描述

我有一个使用 ActiveStorage(图片附加到文章)和 froala 编辑器的 rails 6 应用程序.两者都上传到 S3.

I have a rails 6 app using ActiveStorage (image attached to article) and froala editor. Both upload to S3.

但我目前使用 froala S3 上传和主动存储.在表格中，我有:

But I currently use the froala S3 upload and active storage. In the form, I have:

1. 一个上传按钮，允许上传 pdf 文件和
2. 带有 froala 的文本字段，可以在其中上传图像

活动存储

class Article < ApplicationRecord
  belongs_to :author
  has_one_attached :image

#ArticleController
@article.image.attach(params[:image])

Froala:

# class Adm::ArticleController < ApplicationController
    def new 
        #....
        @aws_data = FroalaEditorSDK::S3.data_hash(Article.froalaoptions)
    end
end

并在 javascript 中初始化:

and initialise in javascript:

var editor = new FroalaEditor('#article_contenu',{
                              attribution: false,
                              height: 330,
                              key: "mykey",
                              iframeStyleFiles: ['my.css'],
                              pluginsEnabled: ['image'],
                              imageUploadToS3: <%= @aws_data.to_json.html_safe %>,
                              saveURL: '<%= adm_auteur_article_autosave_url %>',
                              saveMethod: 'POST'     
});

我想做类似的事情:

var editor = new FroalaEditor('#article_contenu',{
                              attribution: false,
                              height: 330,
                              key: "mykey",
                              iframeStyleFiles: ['my.css'],
                              pluginsEnabled: ['image'],
                              // imageUploadToS3: <%= @aws_data.to_json.html_safe %>,
                              saveURL: '<%= rails_blob_path(article.image, disposition: "attachment")%>    
});

有没有办法使用 Rails Active Storage 在 froala 编辑器中上传文件，类似于 Rails ActionText，在 Trix 编辑器中上传的图像存储在 ActiveStorage 中?

Is there a way to use Rails Active Storage to upload files in the froala editor, similar to Rails ActionText where an image uploaded in the trix editor is stored in ActiveStorage?

推荐答案

从我发现尝试将 Froala 与 Rails 6 一起使用(如果可以，请使用其他东西)，在您的控制器中，您可以执行以下操作:

From what I've found trying to use Froala with Rails 6 (use something else if you can), in your controller, you can do something like this:

blob = ActiveStorage::Blob.create_after_upload!(
  io: params[:file].original_filename,
  filename: params[:file].original_filename,
  content_type: params[:file].content_type
)
render json: { link: url_for(blob), data: blob.id }.to_json

这将创建 Blob，并且 Froala 会将 data 属性放入元素中，以便您在需要通过侦听 Froala image.removed 事件来清除它时引用它:

This will create the Blob and and Froala will put the data attribute in the element so you can reference it when you need to purge it by listening for the Froala image.removed event:

    events: {
      'image.removed': function ($img) {
        $.post('/your_delete_file_action', {
          blob_id: $img.attr('data')
        });
     }

不过这有问题.这些 blob 不会附加到任何东西，因此您不能使用 unattached 方法来清理 S3.如果用户上传图像，但没有提交表单或使用撤消按钮撤消上传图像，这可能会成为一个问题.它仍将存储在 S3 上.此外，如果用户删除图像然后单击撤消，则在从 S3 中删除图像后，您最终会得到一个断开的链接.由于我必须在项目中使用 Froala，因此我仍在努力解决这一部分.

This has issues though. These blobs won't be attached to anything, so you can't use the unattached method to clean up S3. This can become a problem if a user uploads an image, but doesn't submit the form or uses the undo button to undo uploading an image. It will still be stored on S3. Also, if the user deletes an image and then clicks undo, you'll end up with a broken link after the image is deleted from S3. I'm still trying to work that part out since I have to use Froala for a project.

编辑 5/25/21所以我最终为 froala 图像创建了一个新模型，并将其设置为 has_one_attached.在控制器中，我在新模型的表中创建了一条记录，并附有图像.我在新模型中添加了一个 slug 列，并在上传图像后将 slug 返回到 froala.由于 slug 包含在元素中，我将其发送到控制器以查找并删除从编辑器中删除图像时附加到的记录.Rails 然后处理清除记录.由于 ActiveStorage 已经与 S3 一起设置，它会自动使用它来存储图像.仍在研究撤消/重做和未提交的带有图像的表单的解决方案.

Edit 5/25/21 So I ended up creating a new model for the froala images and made it has_one_attached. In the controller, I created a record in that new model's table with the image attached to it. I added a slug column to the new model and I returned the slug back to froala after an image was uploaded. Since the slug was contained in the element, I sent it to the controller to find and delete the the record that the image was attached to when removed from the editor. Rails then handles purging the records. Since ActiveStorage was already set up with S3, it automatically used it for storing the images. Still working on solutions for undo/redo and unsubmitted forms with images.

这篇关于如何将文件从 froala 编辑器上传到 Rails 活动存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！