Image upload using ajax

Rails
1

can anybody let me know how to do image upload using file_column and
ajax???

2

On 10 Dec 2007, at 09:19, Koli K. wrote:

can anybody let me know how to do image upload using file_column and
ajax???

Google search “file_column ajax upload”:

http://khamsouk.souvanlasy.com/2007/5/1/ajax-file-uploads-in-rails-
using-attachment_fu-and-responds_to_parent
http://groups.google.com/group/ajaxscaffold/browse_thread/thread/
1a85713b55e32324/e36bd44cb02306bb

Should be more than enough to get you started.

Best regards

Peter De Berdt

3

P6bb

Should be more than enough to get you started.

Best regards

Peter De Berdt

both the html links are broken does not give ant information

4

On 10 Dec 2007, at 10:44, Koli K. wrote:

Should be more than enough to get you started.

both the html links are broken does not give any information

Both the links were working this morning and practically gave you the
entire application. You need to use the responds_to_parent plugin and
send your form through an iframe. The rest of the route through the
controller is just the same as a normal rjs action, with the
exception of wrapping it into a responds_to_parent block.

Best regards

Peter De Berdt

5

Both the links were working this morning and practically gave you the
entire application. You need to use the responds_to_parent plugin and
send your form through an iframe. The rest of the route through the
controller is just the same as a normal rjs action, with the
exception of wrapping it into a responds_to_parent block.

Best regards

Peter De Berdt

Thanks for the reply,i was able to upload the image with out using ajax.
the problem that i’m facing now is that now i’m getting an RJS error.
can anyone please help.

My UPLOAD Controller:

def create
@post=Entry.new(params[:entry])
if @post.save
redirect_to :action=>‘list’
else
render :action=> ‘new’
end

end

My /app/views/upload/new.rhtml:

<%= start_form_tag( { :action => ‘create’ }, :multipart => true ) %>
<%= render :partial => ‘form’ %>


<%= submit_tag ‘Create’ %>
<%= link_to_remote ‘Cancel’, :url => {:action =>
‘list’}, :options =>{‘class’ => ‘button_group’} %>

<%= end_form_tag %>

The error which i’m getting

try {
Element.update(“message”, “”);
clearMarkers();

  • \n\t fxdg\n\n
    • \n \n
  • \n\t shivaji\n\n
    • \n \n
  • \n\t tata\n\n
    • \n \n\n\n");

    createMarker(13.0049752807617, 77.634768984375, “upload”, 27);
    createMarker(12.9878091430664, 77.5891070581055, “upload”, 28);
    createMarker(12.9644631958008, 77.6254992700195, “upload”, 29);
    } } catch (e) { alert(‘RJS error:\n\n’ + e.toString());
    alert('Element.update(“message”, “”);<a href=\"#\"
    onclick=\“new Ajax.Updater(‘results’, ‘/upload/show/27’,
    {asynchronous:true, evalScripts:true}); return
    false;\”>archan\n\n \n \n<li id=\“entries27\”
    style=\“background-color:white\”>\n\t <a href=\"#\"
    onclick=\“new Ajax.Updater(‘results’, ‘/upload/show/28’,
    {asynchronous:true, evalScripts:true}); return
    false;\”>amogh\n\n \n \n<li id=\“entries17\”
    style=\“background-color:#ffffaa\”>\n\t <a href=\"#

    6

    On 11 Dec 2007, at 07:11, Koli K. wrote:

    Thanks for the reply,i was able to upload the image with out using
    ajax.
    the problem that i’m facing now is that now i’m getting an RJS error.
    can anyone please help.

    Your code makes it look as if you’ve either not read the Agile Web
    Development with Rails book or have the first (and thus quite
    outdated edition). There’s a lot of stuff there that’s deprecated in
    Rails 2.

    First, make sure you download the responds_to_parent plugin and
    install it in vendor/plugins:
    http://code.google.com/p/responds-to-parent/source

    My UPLOAD Controller:

    def create
    @post=Entry.new(params[:entry])
    if @post.save
    responds_to_parent do
    render :action => “list.rjs”
    end
    else
    responds_to_parent do
    render :action => “new.rjs”
    end
    end

    end

    My /app/views/upload/new.rhtml:

    <% form_tag({:action => ‘create’}, :multipart => true, :target =>
    "frame) %>

    <%= render :partial => ‘form’ %>


    <%= submit_tag ‘Create’ %>

    <%= link_to_remote ‘Cancel’, {:url => {:action =>
    ‘list’}}, {‘class’ => ‘button_group’} %>

             </div>

    <% end %>

    In your rjs files, you can play with the page
    [“id_of_list”].replace_html commands to do your thing.

    Best regards

    Peter De Berdt

    7

    Peter De Berdt wrote:

    On 11 Dec 2007, at 07:11, Koli K. wrote:

    <% end %>

    In your rjs files, you can play with the page
    [“id_of_list”].replace_html commands to do your thing.

    Best regards

    Peter De Berdt

    can u show me an example of how to declare rjs file as i have never done
    it before

    8

    On 11 Dec 2007, at 10:40, Koli K. wrote:

    can u show me an example of how to declare rjs file as i have never
    done
    it before

    Please, have a look at the api docs:
    http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/
    JavaScriptGenerator/GeneratorMethods.html

    Best regards

    Peter De Berdt

    9

    html

    Best regards

    Peter De Berdt

    can u show me a example of list.rjs?the action from create is passed to
    list
    but is not rendered in the same div.

    MY CONTROLLER
    def list
    @records=Entry.find(:all)
    render(:update) {|page| page.show_all(@records)}
    end

    def create
    @post=Entry.new(params[:entry])
    if @post.save
    responds_to_parent do
    render :action=>“list.rjs”
    end

    else

    render :action=> ‘new’
    end

    MY app/views/_list.rhtml

    <% for record in @records %>

  • "colors") %>"> <%= link_to_remote record.name,:update =>"results", :url => {:controller => 'upload',:action => 'show', :id => record } %> 
        </li>

    <% end %>

    My list.rjs

    page.call ‘clearMarkers’
    page.replace_html “results”, :partial => ‘list’

    THe list view is not getting rendered when i click on the submit
    button.BUt the
    image upload is happening in the database.

    can u please let me know how to render the list view?/

    • 10

    Peter De Berdt wrote:

    On 12 Dec 2007, at 06:57, Koli K. wrote:

    THe list view is not getting rendered when i click on the submit
    button.BUt the
    image upload is happening in the database.

    Best regards

    Peter De Berdt

    Thanks Peter for all the help.I got it working .
    The LInk which really helped the most was this
    http://www.naffis.com/2006/12/11/ajax-uploads-image-manipulation-drag-and-drop-sorting
    This way it was very simple to do.

    Regards,

    11

    On 12 Dec 2007, at 06:57, Koli K. wrote:

    THe list view is not getting rendered when i click on the submit
    button.BUt the
    image upload is happening in the database.

    can u please let me know how to render the list view?/

    Don’t have the time to start coding in your place, but I notice
    you’re not setting the @records instance variable in your create
    method. Remember that render :action DOESN’T execute the code in the
    method, it just renders the template.

    If you need the @records instance variable in more than one method,
    you could use a before_filter (see the api.rubyonrails.org api docs).

    Another way would be to insert the new record at the bottom of the
    list using page.insert_html :bottom, … instead of rerendering the
    complete list.

    Did you read the Agile Web D. with Rails book? What you’re
    asking is all explained nicely in the book.

    Best regards

    Peter De Berdt

    12

    Koli K. wrote:

    can anybody let me know how to do image upload using file_column and
    ajax???

    Its a simple app to upload a image

    create table pictures (
    id int not null auto_increment,
    comment varchar(100),
    name varchar(200),
    content_type varchar(100),
    data blob,
    primary key (id)
    );

    class UploadController < ApplicationController
    def get
    @picture = Picture.new
    end

    def save
    @picture = Picture.new(params[:picture])
    if @picture.save
    redirect_to(:action => ‘show’, :id => @picture.id)
    else
    render(:action => :get)
    end
    end

    def picture
    @picture = Picture.find(params[:id])
    send_data(@picture.data,
    :filename => @picture.name,
    :type => @picture.content_type,
    :disposition => “inline”)
    end

    def show
    @picture = Picture.find(params[:id])
    end

    end

    get.rhmtl
    <%= error_messages_for(“picture”) %>
    <%= form_tag({:action => ‘save’}, :multipart => true) %>
    Comment: <%= text_field(“picture”, “comment”) %>


    Upload your picture: <%= file_field(“picture”, “picture”) %>


    <%= submit_tag(“Upload file”) %>
    <%= end_form_tag %>

    show .rhtml

    <%= @picture.comment %>


    <img src="<%= url_for(:action => “picture”, :id => @picture.id) %>"/>

    For more go to Agile web Development with Rails Book
    Page no.351