File Upload with Activeadmin Rails Using Paperclip

File upload with Activeadmin Rails using paperclip

I found a way to use Paperclip with Active Admin.

I added this code in my model "Event" :

has_attached_file :map, :styles => { :medium => "238x238>", 
                                   :thumb => "100x100>"
                                 }

And i did this for my admin model :

ActiveAdmin.register Event do
 form :html => { :enctype => "multipart/form-data" } do |f|
   f.inputs "Details" do
    f.input :continent
    f.input :event_type
    f.input :name
    f.input :title
    f.input :content
    f.input :date_start, :as => :date
    f.input :date_end, :as => :date
    f.input :place
    f.input :map, :as => :file
    f.input :image, :as => :file, :hint => f.template.image_tag(f.object.image.url(:medium))
    f.input :userfull_info
    f.input :price
    f.input :phone, :as => :phone
    f.input :website, :as => :url
  end
  f.buttons
 end
end

To use it on the index page, you have to use :

column "Image" do |event|
    link_to(image_tag(event.image.url(:thumb), :height => '100'), admin_event_path(event))
  end
  default_actions
end

Multiple image uploads with paperclip/active admin

I would suggest using something like jQuery file upload to handle the file uploads for you.

That way your controller still only handles one file upload at a time, though you can upload many files at a time as each upload is handled separately via an Ajax call.

I have tried other alternatives, but trying to post more than one file to a server at a time, you quickly run into server timeout issues (especially on heroku).

Here is a gem you can wire into ActiveAdmin

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

Let me know if you need more help on the implementation.

UPDATE: (please see comments for context)

Here is some example code illustrating how to implement the code in active admin. I know it looks like a lot of code but just work through it step by step and you will see its pretty simple.

Product model:

class Product < ApplicationRecord
  has_many :photos
end

Photo model:

class Photo < ApplicationRecord
  include ActionView::Helpers

  belongs_to :product
  has_attached_file :image, :styles => { large: "500x500>",thumb: "100x100>" }
  validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]

  def thumb
    link_to(image_tag(image.url(:thumb)), thumb_url)
  end

  private

  def thumb_url
    Rails.application.routes.url_helpers.admin_product_photo_path(product, self)
  end
end

Then in active admin do the following.

ActiveAdmin Product:

ActiveAdmin.register Product do
  permit_params :title

  form do |f|
    f.inputs do
      f.input :title
    end
    f.actions
   end

  index do
    column :title
    column :images do |product|
      product.photos.map do |photo|
        link_to (image_tag photo.image.url(:thumb)), [:admin, photo.product, photo]
      end.join.html_safe
    end
    actions
  end

  show do
    attributes_table
    panel "Images" do
      div class: "js-product_photos" do
        product.photos.map do |photo|
          link_to (image_tag photo.image.url(:thumb)), [:admin, photo.product, photo]
        end.join.html_safe
      end
      div do
        semantic_form_for [:admin, resource, Photo.new], multipart: true do |f|
          f.inputs do
            f.input :image, as: :file,
                            input_html: {
                              class: 'js-photo_upload',
                              type: "file",
                              name: "photo[image]",
                              multiple: true
                            }
          end
         end
      end
    end
  end
end

Note the html options defined in the form. That is where jQuery upload derives a lot of its options. the form url is also important.

I could have added the form anywhere, but I think it works well on the product show page.

ActiveAdmin Photo:

ActiveAdmin.register Photo do
  belongs_to :product
  permit_params :image

  controller do
    def create
      create! do |format|
        format.json { render :json => {thumb: resource.thumb} }
      end
    end
  end

  show do
    attributes_table do
      row :product
      row :image do |product|
        image_tag product.image.url(:large)
      end
    end
  end
end

and finally in the active_admin.js.coffee

#= require active_admin/base
#= require jquery-fileupload/basic

$ ->
  $('.js-photo_upload').fileupload dataType: 'json', done: (e, data) ->
    $('.js-product_photos').append data.result.thumb

And that's it! The files should upload via an AJAX call as soon as you select them. Once uploaded an image tag will be appended to the list of images. You can select more than one image at a time

This really just scratches the surface of what the basic jQuery file uploader can do - read more about it here. https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Just for reference the app I built is a rails 5 app, here are the gems that were important for this example:

gem 'activeadmin', github: 'activeadmin'
gem 'inherited_resources', github: 'activeadmin/inherited_resources'
gem 'devise'
gem 'paperclip', "~> 5.0.0"
gem "jquery-fileupload-rails" 

UPDATE: Based on a further question

Now that you are able to upload images, you can display them on for example the product show page (show.html.erb):

<h1><%= @product.title %></h1>
<% @product.photos.each do |photo| %>
  <%= image_tag(photo.image.url(:large) %>  
<% end %>

Uploading more than one image using paperclip and active admin

That model, as you have it, can only hold one file upload in its image attribute. You need to add a has_many association to your product so that it can have many files.

i.e. create an Image model that will hold the attachment and be associated to the product:

rails g model Image product_id:integer image_file_name:string image_file_size:integer image_content_type:string
rake db:migrate

Then associate the product to it:

class Product < ActiveRecord::Base
  has_many :images
  # ... the rest of your code...
end

And move the attached file declaration to your Image model:

class Image < ActiveRecord::Base
  belongs_to :product

  has_attached_file :image, styles: { medium: "500x500#", thumb: "100x100#" }
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
end

Now you have a way of associating many images with one product:

product = Product.new
product.images.build image: File.open('some/image/for/example.jpg', ?r)
product.save
product.images.first.image # the Paperclip::Attachment object

I can only take you this far since you didn't post any controller, view code, or active_admin setup but, you just need to read rails or active_admin documentation on nested resources so that you can figure out how to write a nested form that lets you create these images for your Product.

Update: If by "taking this answer further" you mean "write the code for you" Then, no. There is enough information here and in the active_admin documentation on nested resources for you to figure it out. I can however, provide clarifications if any of this is confusing.

Rails direct upload to Amazon S3 using Activeadmin + Paperclip

There is a really nice article I've used when was first time setting up the AA+s3+Paperclip.

It has decent explanations + example app on Github, so you can check it live.

In AA the form would look something like this:

form multipart: true do |f|
  # f.semantic_errors *f.object.errors.keys
  f.inputs do
    f.input :image_name #or whatever field is called
  end
    f.has_many :attachments do |a|
      if a.object.persisted?
        link_to image_tag(a.object.encoded_url, class: 'image-preview'), a.object.encoded_url, target: "_blank"
      else
        a.inputs do
          a.s3_file_field(:attachment, as: :file, class: 'js-s3_file_field')
        end +
        a.inputs do
          a.input(:s3_url, as: :hidden, input_html: { class: "s3_url" })
        end
      end  
    end
  f.actions
end

Active admin multiple image upload with paperclip Rails 5

I solve the problem ! working code :

 permit_params :project_name , :project_location , :project_status , :project_area , :project_prices , :project_info , :project_description ,  images_attributes: [:image , :id , :_destroy]


  f.inputs do
      f.has_many :images , heading: false, allow_destroy: true do |ff|
        ff.input :image, required: true, as: :file
      end
    end

most important part that i miss is : images_attributes: [:image , :id , :_destroy] if you don't write this part fully , it won't work !

how to add an upload button to active admin

The simplest solution I can think of looks something like this:

ActiveAdmin.register User do
  form :html => { :multipart => true } do |f|
    f.inputs "Upload" do
      f.input :image, :type => :file
    end
    f.actions
  end
end

Maybe you missed the multipart attribute? Nevertheless, I'd suggest you to take a look at carriverwave (https://github.com/carrierwaveuploader/carrierwave).

If this is not helping you at all, please post some code examples. That will make it much easier for others to provide you some useful feedback.

Cannot upload a file in activeadmin

The problem was the same as in this question: File upload with Activeadmin Rails using paperclip

Changing admin/events.rb to this made the upload work:

ActiveAdmin.register Event do
  permit_params :user_id, :category_id, :name, :date, :description, :text, :picture

  form :html => { :enctype => "multipart/form-data" } do |f| # <--- changed
    f.inputs "Event details" do
      ...
    end
    f.actions
  end
end

---

Related Topics