如何将文件从 froala 编辑器上传到 Rails 活动存储

Question

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

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

1. an upload button, that allows uploading a pdf file and
2. a text field with froala where images can be uploaded

Active Storage

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

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

I would like to do something like:

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

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?

Answer 1

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

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

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.

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.