CODEWITHSUNDEEP
jqueryruby-on-railsimagepluginsupload
sergserg
sergserg

Reputation: 22264

How to use jQuery File Upload in Rails 4?

I have a simple model called RealEstateListing.

Users can create a RealEstateListing and describe the house they're selling/renting. We want to allow users to upload up to 5 images for their listing and we found this plugin called jQuery File Upload.

http://blueimp.github.io/jQuery-File-Upload/

Unfortunately, all of the documentation and guides for Rails seem to have stagnated in Rails 3.2.x

Using this very simple model example, how can I upload images using this plugin and have the images be associated to the RealEstateListing. using Rails 4?

Upvotes: 3

Views: 8288

Answers (1)

Luke Schoen
Luke Schoen

Reputation: 4543

jQuery File Upload appears to be supported by Rails 4 according to this link: Gems Ready for Rails 4.

Follow the guide that I have prepared for you if you want to perform the File Upload with Paperclip Gem instead. I learnt this method from Pranava Swaroop.

Alternative solutions are at these links: Stackoverflow: Rails 4 multiple file uploads solution, Stackoverflow: Jquery file upload in rails 4

1- Add property called 'image' to your RealEstateListing resource. Then run 'rake db:migrate' and/or 'rake db:migrate RAILS_ENV=development' as relevant to update your schema and database.

i.e.

class AddImageFieldsToRealEstateListing < ActiveRecord::Migration
  def change
    add_column :realestatelisting, :image_file_name, :string
    add_column :realestatelisting, :image_content_type, :string
    add_column :realestatelisting, :image_file_size, :integer
    add_column :realestatelisting, :image_uploaded_at, :datetime
  end
end

2- Update your Gemfile and use Paperclip gem and a service such as Amazon Web Services to for image uploading. Then run 'bundle install' to update Gemfile.lock

gem 'paperclip'
gem 'aws-sdk'

3- Update your RealEstateListing controller to ensure that the 'image' parameter is permitted

i.e.

def realestatelisting_params
  params.require(:realestatelisting).permit(:name,:image)
end

4- Update app/helpers/application_helper.rb

i.e.

def image_for_realestatelisting(house)
  if house.image.exists?
    image_tag(house.image.url, size:'200x200')
  else
    image_tag('image.jpg')
  end
end

5- Update your RealEstateListing model with image uploading functionality

i.e.

has_attached_file :image
validates_attachment :image, 
                     :content_type => { :content_type => ['image/jpeg', 'image/png'] }, 
                     :size => { :less_than => 2.megabyte }

6- Update your RealEstateListing .html.erb view with image uploading field

i.e. Create Upload

<div>
  <div>
    <%= f.label :image %><br/>
    <%= f.file_field :image %>
  </div>
</div>
<div>
  <%= f.submit "Create" %>
</div>

i.e. Show Uploads

<div>
  <%= image_for_realestatelisting(@house) %>
</div>

Note that the Paperclip gem is an abstract Ruby library that is being used here in a Ruby on Rails app to reduce the complexity of file uploading in the ActiveRecord Model called RealEstateListing. AWS SDK gem aws-sdk is being used in conjunction with Paperclip gem to provide an API client for uploading an image to the app for model validation before being stored on Amazon's S3 file hosting service to scale the app's image file resources independently. Paperclip gem's specification includes class method options to handle the image file like an ActiveRecord Model attribute. The Paperclip helper method (has_attached_file) declares a model association between the attribute symbol :image and the image file attachment, whereas its helper method validates_attachment conveniently wraps multiple attributes (i.e. image file attachment's size and MIME content type to prevent XSS attacks) for validation.

Upvotes: 6

Related Questions