Uploading Images for a Book Inventory Management System

(Page 1 of 2 )

In this eleventh part of a 12-part article series on using the scaffolding feature of Ruby on Rails to build a book inventory management system, we'll complete both the Upload Book Cover user story and the List Books user story. This article is excerpted from chapter three of the book Practical Rails Projects, written by Eldon Alameda (Apress; ISBN: 1590597818).

Completing the Upload Book Cover User Story 

The Upload Book Cover user story is performed by the administrator, George. When adding a book, George should be able to select an image and upload it to the Emporium site. This image is then shown to customers when they are viewing the details of a book.

Adding File Upload Functionality

We don’t have to reinvent the wheel to implement file upload functionality. Sebastian Kanthak has already implemented the file upload functionality we need and released it as the FileColumn plugin. The plugin contains view helpers and an extension to ActiveRecord that allows us to implement file upload easily.

Install the FileColumn plugin by executing the following command:

$ script/plugin install \ http://opensvn.csie.org/rails_file_column/ plugins/file_column/trunk/

This downloads the latest version of the plugin from the Internet and installs it in thevendor/plugins/trunkdirectory. After the installation has finished, rename thetrunkdirectory tofile_column. Note that you need to restart WEBrick to activate the plugin.

---

Tip For more information about FileColumn, visithttp://www.kanthak.net/opensource/ file_column/. For example, you can discover how to configure FileColumn to resize the uploaded image with the RMagick image processing library.

---

The FileColumn plugin stores the path to the uploaded image in the database. The exact column where it should store the information is specified with a call to thefile_columnmethod. Currently, our database schema doesn’t contain a column that we can use for this purpose, which is why we’ll create it in the next section.

But first, add thefile_columncall toapp/models/book.rb:

class Book < ActiveRecord::Base
has_and_belongs_to_many :authors
belongs_to :publisher

file_column :cover_image
validates_length_of :title, :in => 1..255

By callingfile_column, we include the file upload functionality in our model and tell it to store the path to the uploaded image in thecover_imagecolumn.

---

Note At the time of writing, the FileColumn plugin contained an annoying bug that runs a unit test located in the plugin’slibdirectory every time you executerakeor a script. To fix this, deletevendor/plugins/file_column/lib/test_case.rband remove the linerequire 'test_case'from thevendor/plugin/file_column/init.rbfile.

---

Modifying the Database Schema

We’ll use an ActiveRecord migration to add thecover_imagecolumn to thebookstable. Create the migration with the following command:

$ script/generate migration add_book_cover_column

--------------------------------------------
exists db/migrate
create db/migrate/004_add_book_cover_column.rb
--------------------------------------------

Add the following migration code todb/migrate/004_add_book_cover_column.rb.

class AddBookCoverColumn < ActiveRecord::Migration
def self.up
add_column :books, :cover_image, :string
end

def self.down
remove_column :books, :cover_image
end
end

The migration adds thecover_imagecolumn to thebookstable, and removes it if we are rolling back changes.

You can now execute the migration withrake migrate:

$ rake migrate

--------------------------------------------
(in C:/projects/emporium)
== AddBookCoverColumn: migrating ============================================== -- add_column(:books, :cover_image, :string)
-> 0.5150s
== AddBookCoverColumn: migrated (0.5150s) ===========================================
--------------------------------------------

Cloning the Changes

You should clone the changes to your test database, because we’ll create an integration test later in this chapter that tests the file upload functionality. You can clone the development database to test by executing the following command:

rake db:test:clone_structure

As usual, you could runrake without specifying any parameters.

Changing the Form

Next, we’ll change the form we created for the Add Book user story so that the user can select an image and upload it. Add the following code to the end of the viewapp/views/admin/book/_form.rhtml.

<p><label for="book_cover_image">Cover image</label><br/>
<%= file_column_field 'book', "cover_image" %></p>

Note that the file upload functionality requires that we change the form encoding to bemultipart/form-data. This is done by changing thestart_form_taginapp/views/admin/book/new.rhtml, as follows:

<%= start_form_tag( {:action => 'create'}, :multipart => true ) %>

You can now test the file upload functionality in your browser by openinghttp://localhost:3000/admin/book/newand selecting a file for the Cover image field. As you can see after clicking the Create button, the path to the uploaded image is stored in the database.

When we implement the View Book user story, we will show you how to use theurl_for_file_columnmethod to extract the path and display the image on a page:

<%= image_tag url_for_file_column(:book, :cover_image) %>

---

Tip At the time of writing, we couldn’t test file uploading with integration tests because of a bug in Rails. But, when it is fixed, you can use thefixture_file_uploadin your tests to create a valid HTTP parameter that can be used by thegetandpost methods; for example,:cover_image => fixture_file_upload ('/book_cover.gif', 'image/png'). Note that thebook_cover.gifimage should be in thefixturesdirectory.

---

Next: Completing the List Books User Story >>
 

More Database Articles Articles
More By Apress Publishing

blog comments powered by Disqus