diff --git a/README.md b/README.md index 6826c59..b61fcef 100644 --- a/README.md +++ b/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. diff --git a/examples/upload_plugin_using_activestorage/app/admin/posts.rb b/examples/upload_plugin_using_activestorage/app/admin/posts.rb new file mode 100644 index 0000000..869860f --- /dev/null +++ b/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 diff --git a/examples/upload_plugin_using_activestorage/app/assets/javascripts/active_admin.js b/examples/upload_plugin_using_activestorage/app/assets/javascripts/active_admin.js new file mode 100644 index 0000000..41f0fb4 --- /dev/null +++ b/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 diff --git a/examples/upload_plugin_using_activestorage/app/assets/stylesheets/active_admin.scss b/examples/upload_plugin_using_activestorage/app/assets/stylesheets/active_admin.scss new file mode 100644 index 0000000..aa4d364 --- /dev/null +++ b/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'; diff --git a/examples/upload_plugin_using_activestorage/app/models/post.rb b/examples/upload_plugin_using_activestorage/app/models/post.rb new file mode 100644 index 0000000..ece654d --- /dev/null +++ b/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