Skip to content

Instantly share code, notes, and snippets.

@balvig

balvig/active_admin.js

Last active August 23, 2020 14:22
Show Gist options
  • Save balvig/e77749fd3d2d4c05f34b to your computer and use it in GitHub Desktop.
Save balvig/e77749fd3d2d4c05f34b to your computer and use it in GitHub Desktop.
Download ZIP
Active Admin Cloudinary
Raw
active_admin.js
# app / assets / javascripts / active_admin.js
//= require active_admin/base
//= require jquery.ui.widget
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require attachinary
//= require attachments
Raw
active_admin_cloudinary.rb
# config / initializers / active_admin_cloudinary.rb
# The Active Admin equivalent of putting this in your application layout:
# <head>
# <%= cloudinary_js_config %>
# </head>
module ActiveAdmin
module Views
module Pages
class Base < Arbre::HTML::Document
alias_method :original_build_head, :build_active_admin_head
def build_active_admin_head
original_build_head
within @head do
text_node cloudinary_js_config
end
end
end
end
end
end
Raw
attachments.js.coffee
# app / assets / javascripts / attachments.js
jQuery ->
$('.attachinary-input').attachinary()
Raw
formtastic_attachinary_input.rb
# app / inputs / formtastic_attachinary_input.rb
class FormtasticAttachinaryInput
include Formtastic::Inputs::Base
attr_reader :attachinary_options
def to_html
input_wrapping do
label_html <<
template.builder_attachinary_file_field_tag(method, @builder, { html: input_html_options })
end
end
end
@Joeyjoejoe
Copy link

Nice gist, you might add an usage example like this:

#  app/admin/example.rb

form do |f|
  f.input :avatar, :as => :formtastic_attachinary
end

Without it, people may be confused with attachinary doc who is using:

 f.input :avatar, :as => :attachinary

I added some basic css to integrate in activeadmin style, if it can help someone:

# app/assets/stylesheets/active_admin.css

.attachinary_container{
  margin-left: 20%;
  margin-top: 20px;
}

.attachinary_container ul li{
  position:relative;
  display: inline-block;
}

.attachinary_container ul li a{
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,.85);
}

@saifuddin
Copy link

Fantastic! Doesn't have preview or upload bar, but works like a charm!

edit: thanks Joeyjoejoe too

@Joz84
Copy link

Joz84 commented Dec 11, 2016

Super! Tkts a lot!!!

Just an update comment. If you have this errors : “couldn't find file 'jquery.ui.widget” on rails 5., you need to install in your gemfile :
gem "jquery-fileupload-rails"

and change in # app / assets / javascripts / active_admin.js :
//= require jquery.ui.widget
//= require jquery.iframe-transport
//= require jquery.fileupload

by

//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload

See: https://github.com/tors/jquery-fileupload-rails

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment