Here is a synopsis of getting Paperclip to do a simulated Ajax upload,
and also
displaying uploaded image in the current page.

The pieces used in my application:

+) Paperclip:   http://github.com/thoughtbot/paperclip

+) Gert Thiel's fork of  Tom's paperclip_with_hobo:

     
http://github.com/GertThiel/paperclip_with_hobo/commit/3013fbd0eefdf23cdd74c33f329636d88230b50e

    Gert also has some good suggestions on setting up the form.

+) Mark Catley's responds_to_parent:  Necessary for the 'Ajaxy' upload
and rjs part

    http://github.com/markcatley/responds_to_parent

My example is based on an application where there is a Project class
that has_one Photo,
and the Photo belongs_to the Project.  Photo class is set up to have
fields for 3 photos. I am uploading
3 photos from a project page, then displaying them in the same page
using responds_to_parent.

Install the plugins, following guidelines from above references. Be
sure to put

<include src="paperclip" plugin="paperclip_with_hobo"/>

in your application.dryml.

Define your form:

<def tag="form" for="Photo">
        <form merge multipart param="default">
        <error-messages param/>
        <field-list  fields="mainimg,lwrimg,uprimg" param/>
        <div param="actions">
                <submit label="Save" param/>
        </div>
        </form>
</def>

...create instances in ProjectsController 'new'

    @project = Project.new
    @project.user = current_user
    @project.save

...and redirect

    redirect_to :action => "edit"

...find project, and build photo instance

    @project = Project.find(params[:id])
    @photo = @project.build_photo
    @photo.user = current_user

Call to form:

<form target="main_upload"  with="&@project.photo" action="/photos/
upload_main" >
         <field-list:  fields="mainimg" />
 </form>

Div to be updated:

   <div id="imgmain" part="photomain"><img src="temp.jpg" /></div>

Iframe targeted in form:

   <iframe id="main_upload" name="main_upload" style="width:0px;height:
0px;top:3000px"></iframe>

PhotosController method called by form:

    def upload_main
    @photo = Photo.find_by_project_id(params[:photo][:project_id])
    if @photo != nil
       @photo.update_attributes(params[:photo])
    else
      @photo = Photo.new(params[:photo])
    end
    if  @photo.save
        responds_to_parent do
          render :action => 'main_Photo.rjs'
        end
    end
  end

Content of main_Photo.rjs, to update parent of <iframe> with image
that was just uploaded:

   page[:imgmain].replace_html("<img src='#[email protected]}' width=435
height=365 />")

That's it, any comments appreciated on improving.

Cheers,

   Eric


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Hobo 
Users" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to 
[email protected]
For more options, visit this group at 
http://groups.google.com/group/hobousers?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to