ActiveAdmin with CarrierWave and multiple file upload

4
votes

EDITED: I added the solution at the end.

I followed the alestuber's instructions exactly, the multipart trick helped me to get working with upload of multiple images successfully. But I still get error on exhibition of the images.

I am using Rails 4.2.1, ActiveAdmin 1.0.0.pre1 and MySql.

My code:

# Gemfile
# (...)
gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'
gem "mini_magick"
# (...)

# migration
class CreateProducts < ActiveRecord::Migration
  def up
    create_table :products do |t|
      t.string :name
      t.string :slug, null: false
      t.decimal :price, precision: 8, scale: 2
      t.text :description
      t.text :images, array: true
      t.references :category

      t.timestamps null: false
    end
    add_index :products, :slug, unique: true

    Product.create_translation_table! :name => :string, :description => :text
  end

  def down
    drop_table :products
    Product.drop_translation_table!
  end
end

#app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base

  include CarrierWave::MiniMagick
  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  version :thumb do
    process :resize_to_fit => [200, 200]
  end

  def extension_white_list
    %w(jpg jpeg gif png)
  end
end

#app/models/product.rb
class Product < ActiveRecord::Base
  belongs_to :category

  translates :name, :description
  active_admin_translates :name, :description

  extend FriendlyId
  friendly_id :name, use: :slugged

  mount_uploaders :images, ImageUploader

  def to_s
    name
  end
end

#app/admin/product.rb
ActiveAdmin.register Product do
  permit_params :category_id, :price, translations_attributes: [:id, :locale, :name, :description, :_destroy], images: []

  index do
    selectable_column
    column :name
    column :category
    column :price do |product|
      number_to_currency product.price
    end
    translation_status_flags
    actions
  end

  show do
    attributes_table do
      row :slug
      translated_row :name
      translated_row :description
      row :category
      row :price do |product|
        number_to_currency product.price
      end
      row :images do
        ul do
          product.images.each do |image|
            li do
              image_tag(image.url(:thumb))
            end
          end
        end
      end
    end

    active_admin_comments
  end

  form html: { multipart: true } do |f|
    f.semantic_errors

    f.inputs do
      f.translated_inputs auto_sort: false do |t|
        t.input :name
        t.input :description
      end
    end

    f.inputs do
      f.input :category
      f.input :price
      f.input :images, as: :file, input_html: { multiple: true }
    end

    actions
  end
end

The error:

Started GET "/uploads/product/images/1/thumb_%5B%22image_1.jpg%22%2C%20%22image_2.png%22%5D" for 10.0.2.2 at 2015-07-14 13:01:43 +0000

ActionController::RoutingError (No route matches [GET] "/uploads/product/images/1/thumb_%5B%22image_1.jpg%22%2C%20%22image_2.png%22%5D")

It seems the object saved into the database is a one item array, independent of the amount of files I have pick in the upload form. The images get saved as expected on the filesystem.

Edited:

Product.find(...).images.inspect returns:

"[#<ImageUploader:0xd4afc24 @model=#<Product id: 1, name: \"Camiseta\", slug: \"camiseta\", price: #<BigDecimal:d4ac010,'0.599E2',18(18)>, description: \"\", images: \"[\\\"image_1.jpg\\\", \\\"image_2.png\\\"]\", category_id: 1, created_at: \"2015-07-14 13:01:27\", updated_at: \"2015-07-14 16:41:36\">, @mounted_as=:images, @storage=#<CarrierWave::Storage::File:0xd4afbe8 @uploader=#<ImageUploader:0xd4afc24 ...>>, @file=#<CarrierWave::SanitizedFile:0xd4af904 @file=\"/vagrant/public/uploads/product/images/1/[\\\"image_1.jpg\\\", \\\"image_2.png\\\"]\", @original_filename=nil, @content_type=nil>, @versions={:thumb=>#<ImageUploader::Uploader94172950:0xd4af8dc @model=#<Product id: 1, name: \"Camiseta\", slug: \"camiseta\", price: #<BigDecimal:d4ac010,'0.599E2',18(18)>, description: \"\", images: \"[\\\"image_1.jpg\\\", \\\"image_2.png\\\"]\", category_id: 1, created_at: \"2015-07-14 13:01:27\", updated_at: \"2015-07-14 16:41:36\">, @mounted_as=:images, @parent_version=#<ImageUploader:0xd4afc24 ...>, @storage=#<CarrierWave::Storage::File:0xd4af8a0 @uploader=#<ImageUploader::Uploader94172950:0xd4af8dc ...>>, @file=#<CarrierWave::SanitizedFile:0xd4af580 @file=\"/vagrant/public/uploads/product/images/1/thumb_[\\\"image_1.jpg\\\", \\\"image_2.png\\\"]\", @original_filename=nil, @content_type=nil>, @versions={}>}>]"

Product.find(...).images.first.url returns:

"/uploads/product/images/1/%5B%22image_1.jpg%22%2C%20%22image_2.png%22%5D"

Any idea where is the problem??

Thanks in advance!

EDITED: The solution is to add serialize :images to the products model. So simple! Thanks to @johnmcl from CarrierWave github.

2
mysqlruby-on-railsactiveadmincarrierwave
What does Product.find(...).images.inspect returns? - Timo Schilling
@TimoSchilling, I added the answer to your question. - Glauber Santana
@GlauberSantana can you post your final code in a gist? - DogEatDog

2 Answers

2
votes

I thought that multiple file uploading is still in beta.

When I want to have multiple images for one model I simple create ModelImage model and make one-to-many relationship between them.

1
votes

Looks like your not calling the image version correctly (thumb in this case). Try this ...

show do
attributes_table do
  row :slug
  translated_row :name
  translated_row :description
  row :category
  row :price do |product|
    number_to_currency product.price
  end
  row :images do
    ul do
      product.images.each do |image|
        li do
          image_tag(image.thumb.url)
        end
      end
    end
  end
end