Coder Social home page Coder Social logo

michaelbaisch / administrate-field-active_storage Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dreamersoul/administrate-field-active_storage

0.0 1.0 0.0 529 KB

support active storage in administrate

Home Page: https://dreamersoul.github.io/administrate-field-active_storage/

License: MIT License

Ruby 79.83% HTML 18.15% JavaScript 0.89% CSS 1.14%

administrate-field-active_storage's Introduction

Administrate::Field::ActiveStorage

rails CI

Things To Know:

  • To preview pdf files you need to install mupdf or Poppler.
  • To preview video files you need to install ffmpeg.
  • To preview Office files as pictures you need to install activestorage-office-previewer by basecamp

How To Use:

Add administrate-field-active_storage and mini_magick to your Gemfile (rails 6):

gem 'administrate-field-active_storage'
gem "image_processing"

for rails 5.x use the following

gem 'administrate-field-active_storage', "0.1.8"

Install:

$ bundle install

has_one_attached:

Assuming your model name is Model and field name is attachment

class ModelDashboard < Administrate::BaseDashboard
  ATTRIBUTE_TYPES = {
    attachment: Field::ActiveStorage,
  }
# ...

Then add :attachment to FORM_ATTRIBUTES and SHOW_PAGE_ATTRIBUTES. Adding :attachment COLLECTION_ATTRIBUTES will work but will probably look too big.

has_many_attached:

Assuming your model name is Model and field name is attachments the process is identical the only issue is that the form field isn't being permitted, in order to permit it we apply the following method to the dashboard:

class ModelDashboard < Administrate::BaseDashboard
  ATTRIBUTE_TYPES = {
    attachments: Field::ActiveStorage,
  }

  # ...
  FORM_ATTRIBUTES = {
    #...
    :attachments
  }

  # permitted for has_many_attached
  def permitted_attributes
    super + [:attachments => []]
  end

I know it is not ideal, if you have a workaround please submit a PR.

Note: Rails 6 introduced a new config to determine the behavior on updates to has_many_attached. Setting Rails.application.config.active_storage.replace_on_assign_to_many to true will overwrite any existing values (purging the old ones), and setting it to false will append the new values.

Prevent N+1 queries

In order to prevent N+1 queries from active storage you have to modify your admin model controller, below an example for a model called User and with attached avatars

module Admin
  class UsersController < ApplicationController
    def scoped_resource
      resource_class.with_attached_avatars
    end
  end
end

Removing/Deleting an Attachment

Administrate::Field::ActiveStorage expects the presence of a route DELETE /<namespace>/<resource>/:id/:attachment_name, which will receive an optional parameter attachment_id in the case of an ActiveStorage::Attached::Many. For instance:

# routes.rb
...
namespace :admin do
  ...
  resources :users do
    delete :avatars, on: :member, action: :destroy_avatar
  end
end

# app/controllers/admin/users_controller.rb
module Admin
  class UsersController < ApplicationController

    # For illustrative purposes only.
    #
    # **SECURITY NOTICE**: first verify whether current user is authorized to perform the action.
    def destroy_avatar
      avatar = requested_resource.avatars.find(params[:attachment_id])
      avatar.purge
      redirect_back(fallback_location: requested_resource)
    end
  end
end

For has_one_attached cases, you will use:

# routes.rb
...
namespace :admin do
  ...
  resources :users do
    delete :avatar, on: :member, action: :destroy_avatar
  end
end

# app/controllers/admin/users_controller.rb
module Admin
  class UsersController < ApplicationController

    # For illustrative purposes only.
    #
    # **SECURITY NOTICE**: first verify whether current user is authorized to perform the action.
    def destroy_avatar
      avatar = requested_resource.avatar
      avatar.purge
      redirect_back(fallback_location: requested_resource)
    end
  end
end

This route can be customized with destroy_url. The option expects a proc receiving 3 arguments: the Administrate namespace, the resource, and the attachment. The proc can return anything accepted by link_to:

# routes.rb
delete :custom_user_avatar_destroy, to: 'users#destroy_avatar'

# user_dashboard.rb
class UserDashboard < Administrate::BaseDashboard
  ATTRIBUTE_TYPES = {
    avatars: Field::ActiveStorage.with_options(
      destroy_url: proc do |namespace, resource, attachment|
        [:custom_user_avatar_destroy, { attachment_id: attachment.id }]
      end
    ),
    # ...
  end
  # ...
end

Options

Various options can be passed to Administrate::Field::ActiveStorage#with_options as illustrated below:

class ModelDashboard < Administrate::BaseDashboard
  ATTRIBUTE_TYPES = {
    attachments: Field::ActiveStorage.with_options(index_display_preview: false),
    # ...
  }
  # ...
end

show_display_preview

Display attachment preview.

Defaults to true.

index_display_preview

Displays the first attachment (which is the only attachment in case of has_one) in the index action.

Defaults to true.

index_preview_size and show_preview_size

Indicate the size of the image preview for the index and show actions, respectively. Refer to mini_magic#resize_to_limit for documentation.

Default to [150, 150] and [800, 800], respectively.

index_display_count

Displays the number of attachments in the index action.

Defaults to true if number of attachments is not 1.

direct_upload

Enables direct upload from the browser to the cloud.

Defaults to false.

Don't forget to include ActiveStorage JavaScript. You can use rails generate administrate:assets:javascripts to be able to customize Administrate JavaScripts in your application.

I18n

You can see translation example here.

Things To Do:

  • upload single file
  • adding image support through url_for to support 3rd party cloud storage
  • use html 5 video element for video files
  • use html audio element for audio files
  • download link to other files
  • preview videos
  • preview pdfs
  • upload multiple files
  • find a way to delete attachments
  • preview office files as pictures

Contribution Guide:

  1. contributers are welcome (code, suggestions, and bugs).
  2. please document your code.
  3. add your name to the contribute.md.

Based on the Administrate::Field::Image template, and inspired by Administrate::Field::Paperclip.

administrate-field-active_storage's People

Contributors

0urobor0s avatar acrogenesis avatar benmorganio avatar c-lliope avatar deltapurna avatar dependabot[bot] avatar dreamersoul avatar fwmatt avatar haukot avatar hxrxchang avatar iamnader avatar jazzygasper avatar kayhide avatar kdiogenes avatar leifg avatar limeblast avatar mhui avatar nickcharlton avatar pedantic-git avatar pedromschmitt avatar pushcx avatar sedubois avatar taikon avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.