Add a new example: upload plugin using Active Storage

Author: blocknotes

README.md

@@ -47,6 +47,32 @@ Why 2 separated scripts/styles? In this way you can include a different version
 f.input :description, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: [['bold', 'italic', 'underline'], ['link']] }, placeholder: 'Type something...', theme: 'snow' } } }
 ```
 
+### ImageUploader plugin
+This plugin allows to upload images to the server (instead of storing them in *base64* by default), reference [here](https://github.com/NoelOConnell/quill-image-uploader).
+
+```ruby
+# Upload method (to be included in the admin entity configuration)
+member_action :upload, method: [:post] do
+  result = { success: resource.images.attach(params[:file_upload]) }
+  result[:url] = url_for(resource.images.last) if result[:success]
+  render json: result
+end
+```
+
+```ruby
+# Form field
+unless object.new_record?
+  plugin_opts = { image_uploader: { server_url: upload_admin_post_path(object.id), field_name: 'file_upload' } }
+  f.input :description, as: :quill_editor, input_html: { data: { plugins: plugin_opts } }
+end
+```
+
+For the relevant files of the upload example see [here](examples/upload_plugin_using_activestorage/).
+Consider that this is just a basic example: images are uploaded as soon as they are attached to the
+ editor (regardless of the form submit), it shows the editor only for an existing record (because of
+the *upload_admin_post_path*) and it doesn't provide a way to remove images (just deleting them from
+the editor will not destroy them, you'll need to implement a purge logic for that).
+
 ## Do you like it? Star it!
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 

examples/upload_plugin_using_activestorage/app/admin/posts.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Post do
+  permit_params :author_id,
+                :title,
+                :description,
+                :category,
+                :dt,
+                :position,
+                :published,
+                tag_ids: []
+
+  member_action :upload, method: [:post] do
+    result = { success: resource.images.attach(params[:file_upload]) }
+    result[:url] = url_for(resource.images.last) if result[:success]
+    render json: result
+  end
+
+  index do
+    selectable_column
+    id_column
+    column :title
+    column :author
+    column :published
+    column :created_at
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :author
+      row :title
+      row :description
+      row :category
+      row :dt
+      row :position
+      row :published
+      row :tags
+      row :created_at
+      row :updated_at
+      row :images do |resurce|
+        resurce.images.each do |image|
+          div do
+            link_to image.filename, image, target: '_blank'
+          end
+        end
+        nil
+      end
+    end
+    active_admin_comments
+  end
+
+  form do |f|
+    f.inputs 'Post' do
+      f.input :author
+      f.input :title
+      unless object.new_record?
+        plugin_opts = { image_uploader: { server_url: upload_admin_post_path(object.id), field_name: 'file_upload' } }
+        f.input :description, as: :quill_editor, input_html: { data: { plugins: plugin_opts } }
+      end
+      f.input :category
+      f.input :dt
+      f.input :position
+      f.input :published
+    end
+
+    f.inputs 'Tags' do
+      f.input :tags
+    end
+
+    f.actions
+  end
+end

examples/upload_plugin_using_activestorage/app/assets/javascripts/active_admin.js

@@ -0,0 +1,6 @@
+//= require active_admin/base
+
+//= require activeadmin/quill_editor/quill
+//= require activeadmin/quill_editor_input
+
+//= require activeadmin/quill.imageUploader.min

examples/upload_plugin_using_activestorage/app/assets/stylesheets/active_admin.scss

@@ -0,0 +1,7 @@
+@import 'active_admin/mixins';
+@import 'active_admin/base';
+
+@import 'activeadmin/quill_editor/quill.snow';
+@import 'activeadmin/quill_editor_input';
+
+@import 'activeadmin/quill.imageUploader.min';

examples/upload_plugin_using_activestorage/app/models/post.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Post < ApplicationRecord
+  has_many_attached :images
+
+  validates :title, allow_blank: false, presence: true
+end