Converting all input fields to button using Paperclip Gem in Ruby on Rails

Question

I am working on my first Rails project and have installed the Paperclip Gem to handle image uploads. As is, it works fine, but all the upload fields are displayed to be fill out separately as seen in the screen shot below.

Below is my code as is with all the image input fields broken out individually.

models/project.rb

class Project < ApplicationRecord
  has_many :tasks

  validates :name, presence: true, length: { maximum: 50 }
  validates :content, presence: true, length: { maximum: 500 }
  validates :price, presence: true, numericality: { only_integer: true }

  has_attached_file :avatar, styles: { medium: '680x300>', thumb: '170x75>' }, default_url: '/images/:style/missing.png"'
  validates_attachment_content_type :avatar, content_type: '/\Aimage\/.*\z/'
end

admin/project.rb

ActiveAdmin.register Project do
  permit_params :name, :content, :price, :image

  show do |t|
    attributes_table do
      row :name
      row :content
      row :price
      row :image do
        project.image? ? image_tag(project.image.url, height: '100') : content_tag(:span, 'No Photo Yet')
      end
    end
  end

  # form html: { enctype: 'multipart/form-data' } do |f|
  #   f.input do
  #     f.input :name
  #     f.input :content
  #     f.input :price
  #     f.input :image, hint: f.project.image? ? image_tag(project.image.url, height: '100') : content_tag(:span, 'Upload JPG/PNG/GIF Image')
  #   end
  #   f.actions
  # end
end

I know that there is a way to take all these inputs and have them automatic as part of an upload button, but am having a hard time with the code; I keep getting the error below when I uncomment the other part of my admin/project.rb code.

I am using ActiveAdmin, Paperclip 5.1 and Rails 5.1.1

Started GET "/admin/projects/2/edit" for 127.0.0.1 at 2017-06-26 13:14:33 -0700
Processing by Admin::ProjectsController#edit as HTML
  Parameters: {"id"=>"2"}
  AdminUser Load (0.1ms)  SELECT  "admin_users".* FROM "admin_users" WHERE "admin_users"."id" = ? ORDER BY "admin_users"."id" ASC LIMIT ?  [["id", 2], ["LIMIT", 1]]
  Project Load (0.1ms)  SELECT  "projects".* FROM "projects" WHERE "projects"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  Rendering /Users/rooster/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activeadmin-1.0.0/app/views/active_admin/resource/edit.html.arb
  CACHE Project Load (0.0ms)  SELECT  "projects".* FROM "projects" WHERE "projects"."id" = ? LIMIT ?  [["id", 2], ["LIMIT", 1]]
  Rendered /Users/rooster/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activeadmin-1.0.0/app/views/active_admin/resource/edit.html.arb (129.0ms)
Completed 500 Internal Server Error in 163ms (ActiveRecord: 1.4ms)



ActionView::Template::Error (wrong number of arguments (given 0, expected 1..2)):
    1: insert_tag renderer_for(:edit)

Answer 1

I see a couple changes that would have to be made with your form.

It currently looks like:

form html: { enctype: 'multipart/form-data' } do |f|
  f.input do
    f.input :name
    f.input :content
    f.input :price
    f.input :image, hint: f.project.image? ? image_tag(project.image.url, height: '100') : content_tag(:span, 'Upload JPG/PNG/GIF Image')
  end
  f.actions
end

And it should look something like:

form html: { enctype: 'multipart/form-data' } do |f|
  f.inputs do
    f.input :name
    f.input :content
    f.input :price
    f.input :image, hint: resource.project.image? ? image_tag(project.image.url, height: '100') : content_tag(:span, 'Upload JPG/PNG/GIF Image')
  end
  f.actions
end

Two minor changes that were made. Changed input to inputs , got this from after looking at ActiveAdmin's documentation about forms . Next I changed f.project.image? to resource.project.image? . resource corresponds with your Project object.