Rails 3.2 Ajax Paperclip Image uploading

I was working on uploading images using paperclip gem . I wanted to use Ajax. I googled a lot, But every result says its not possible, that  you can't upload images using Ajax. Some Jquery plug-ins are available, But its not behaving like what I really needed in my project.

Finally I got the solution for this problem. It is a common solution. First of all download the the js code and save it as jquey.form.js in assets/javascripts. Include in application.js like

    //= require jquery.form

Next is your view. Which may look like this

    <div id="image_view">
      <%=image_tag @model.image_attr_name.url %>
    </div>

Next is your form to upload image
[You can use bootstrap modal to render this form. Then it'll be more beautiful]

    <%=form_for @model, :html => { :multipart => true, :id => "form_id" }, :url => url_for(:controller => 'controller', :action => 'method') do | f | %>
     Upload picture : <%= f.file_field image_attr_name %>
     <%= f.submit "Save changes", :id => :upload_pic %>
    <% end %>

Then add some javascript to the file where the form is rendered

    <script type="text/javascript">
      $(document).ready(function(){
        $('#upload_pic').click(function() {
          $("#form_id").ajaxForm({ target: "#image_view" }).submit(); // This line will display the ajax response in "image_view" div.
          //$("#modal_id").modal('hide'); if using modal uncomment this line to close current modal
          return false;
       });
     });
    </script>

Then write the method in corresponding controller

    def method
      @pic = Model.new( params[:model_name] )
      @pic.save    
      render :template => "corresponding_view_file(ie, like pictures/show)", :layout => false
    end

Note : You can use this method for submitting forms which handle fields of any data types. So if you guys have more fields, you can simply add those in the form and view file. Ajax will remain same.

Hope You people know how the model and Gemfile look like. I think It may help you. For any query please comment on the same thread. Thank you.

Comments

  1. Moncho17 August 2013 at 12:06

    Nice!!, i just have one question.. How can i do it if im in a Wizard? like
    <%= nested_form_for @player, :url => wizard_path do |f| %>

    ReplyDelete
  2. vtr11 November 2013 at 03:49

    Thanks :)

    ReplyDelete
  3. Tejuteju12 June 2018 at 19:45

    Thank you for providing useful content Ruby on Rails Online Course Hyderabad

    ReplyDelete

Post a Comment

Popular posts from this blog

Rails Kaminari - Ajax pagination

Here is a simple way to implement AJAX pagination using  Kaminari gem. Suppose, We are having a Product Model with fields id and name. So, In the ProductsController , def index   @products =  Product.all.page(params[:page]).per(params[:per])    respond_to do |format|       format.js       format.html     end end in view file index.html.haml   #products     = render 'products'   #paginator     = paginate @products, :remote => true And create _products.html.haml (this will be rendered from index) with content   %table     @products.each do |product|      %tr        %td= product.name Finally, We have to create one more  file _index.js.haml with content $('#products').html("#{escape_javascript(render 'products')}"); $('#paginator').html("#{escape_javascript(paginate(@products, :remote => true)) }"); This post may help you. Please comment on the same, If you guys have any queries.
Read more

Rails mongoid has field model validation

This can be done only with a custom method validation, Such as           class Comment        include Mongoid::Document        include Mongoid::Timestamps         include ActiveModel::Validations              validate :must_be_friends              def must_be_friends           errors.add(:base, 'Must be friends to leave a comment') if hash[:firstname].nil?        end     end
Read more

Ruby's class_eval & instance_eval. Is it that confusing?

Image
We can do class_eval & instance_eval using following syntax, In this example, class_eval? method can be accessed my any objects of the String class. Where as instance_eval? method can be accessed by only String class.  More clearly, class_eval creates instance methods, but instance_eval creates class methods or it can be applied to only one object at a time. [3] pry(main)> String.class_eval? NoMethodError: undefined method `class_eval?' for String:Class Did you mean?  class_eval from (pry):3:in `<main>' [4] pry(main)> String.instance_eval? => true [5] pry(main)> String.new.class_eval? => true my_string = "This is a string" For example you can simply do like below as any string is an object of String Class [5] pry(main)>  my_string .class_eval? => true But you can not do  [7] pry(main)> my_string.instance_eval? NoMethodError: undefined method `instance_eval?' for "This is a string":String
Read more