Thanks for reply Kevin. I have discovered the answer to this in an old post in which 'adamski' and Tom discussed this issue. Here is the quote from Tom:
/*******************************************************/ [Hobo Users] Re: getting error from update form on edge hobo Tom Locke Thu, 27 Nov 2008 12:46:07 -0800 Oh hang on a minute - I just twigged what was going on. <input type="file"> doesn't work with XMLHttpRequest. To do ajax image uploaders you need a completely different approach. YUI has some support for this. You can see an example in the hobo cookbook source code. Tom /*******************************************************/ It is impossible to do in the way I was approaching it. So if you or anyone knows WHERE in source code the example is that would be helpful. Also, I do not know what 'YUI' is, so any info on that would be helpful too. Cheers, Jet On Sep 2, 10:33 am, kevinpfromnm <[email protected]> wrote: > I'm wondering if the ajax updater handles the multipart encoding > properly... I haven't tried it myself. > > On a side note, I noticed at one point you had a part and inside the > part you used an external variable @img... you can't do that. You > don't have the exact same context as when the page is first rendered. > You need to use the 'this' context as that's the only thing passed. > Also, no attributes from the tag or variables defined outside the > part. > > On Sep 2, 11:18 am, blueHandTalking <[email protected]> wrote: > > > From the Hobo Cookbook, description of > > "Using parts on repeated elements" by Tom: > > > /***************************/ > > > The basics > > > Hobo’s part mechanism makes it very easy to have parts of the page > > updates “ajax” style. All you do is add the part attribute to a tag > > somewhere: > > > <div part="my-part"> > > ... this section can be updated without reloading the page > > </div> > > > Then use the update attribute, which is supported by various Rapid > > tags, invcluding <form> > > > <form update="my-part"> ... <submit label="Go!"/></form> > > > The presence of the update tells Rapid to generate an ajax form. When > > the use clicks that “Go!” button, the form is submitted in the > > background, the content “my-part” is re-rendered on the server, and > > the new content is placed onto the page. > > > /***************************************/ > > > The above is definitely not working as described. There should be a > > more complete description of what is necessary to make > > this work. In fact, if I use > > > update="my-part" > > > as described above in the Cookbook, my part does not get updated. If I > > have > > > <div id="mydiv" part="my-part"> > > > and then > > > <form update="mydiv"> > > > my form does get updated. So either I have something quirky going on, > > or the documentation example I quoted should > > be changed. > > > Cheers, > > > Jet > > > Cheers, > > > Jet > > > On Sep 2, 12:50 am, blueHandTalking <[email protected]> wrote: > > > > Code generated by the 2 forms: > > > > BELOW IS FORM WITH AJAX---update="imgmain": > > > > <form action="/photos" > > > class="new photo" > > > enctype="multipart/form-data" > > > method="post" > > > onsubmit="Hobo.ajaxRequest(this, ['imgmain']); return false;"> > > > > <div class="hidden-fields"> > > > <input id="page_path" name="page_path" type="hidden" > > > value="projects/new" /> > > > <input name="authenticity_token" type="hidden" value="gA7U/ > > > n2koCKgZxpPdJrQtQgeCwZXwu2m7hPnEZ++JYE=" /> > > > <input id="photo_user_id" name="photo[user_id]" type="hidden" > > > value="14" /> > > > </div> > > > <table class="field-list"> > > > <tr> > > > <th class="mainimg-label"> > > > Mainimg > > > </th> > > > <td class="mainimg-view"> > > > <input class="mainimg-tag paperclip--attachment photo- > > > mainimg" id="photo_mainimg" name="photo[mainimg]" type="file" /> > > > </td> > > > </tr> > > > </table> > > > <div class="actions"> > > > <input class="button submit-button" type="submit" value="Save" /> > > > </div> > > > <input name="after_submit" type="hidden" value="stay-here" /> > > > </form> > > > > The above does not save the image file, only a null object. Paperclip > > > does > > > not confirm the image was saved > > > > BELOW IS FORM WITHOUT AJAX: > > > > <form action="/photos" > > > class="new photo" > > > enctype="multipart/form-data" > > > method="post"> > > > > <div class="hidden-fields"> > > > <input id="page_path" name="page_path" type="hidden" > > > value="projects/new" /> > > > <input name="authenticity_token" type="hidden" value="gA7U/ > > > n2koCKgZxpPdJrQtQgeCwZXwu2m7hPnEZ++JYE=" /> > > > <input id="photo_user_id" name="photo[user_id]" type="hidden" > > > value="14" /> > > > </div> > > > <table class="field-list"> > > > <tr> > > > <th class="mainimg-label"> > > > Mainimg > > > </th> > > > <td class="mainimg-view"> > > > <input class="mainimg-tag paperclip--attachment photo-mainimg" > > > id="photo_mainimg" name="photo[mainimg]" type="file" /> > > > </td> > > > </tr> > > > </table> > > > <div class="actions"> > > > <input class="button submit-button" type="submit" value="Save" /> > > > </div> > > > <input name="after_submit" type="hidden" value="stay-here" /> > > > </form> > > > > The above correctly saves the image file. Paperclip confirms the image > > > file was saved. > > > > As you can see, they are identical except for: > > > > onsubmit="Hobo.ajaxRequest(this, ['imgmain']); return false;" > > > > So why is the above Hobo.ajaxRequest not reading the data from: > > > > <input class="mainimg-tag paperclip--attachment photo-mainimg" > > > id="photo_mainimg" name="photo[mainimg]" type="file" /> > > > > ? > > > > The object is saved, but with Null fields, so for some reason the file > > > input field is empty when submitted with the > > > Hobo.ajaxRequest. > > > > If this is really a bug, I would be interested in hearing alternate > > > solutions on updating my partial with the image file > > > that has just been uploaded. I have made a couple attempts, but they > > > broke the image file being saved. > > > > Thanks for looking at this. > > > > Cheers, > > > Jet > > > > On Sep 1, 6:57 pm, blueHandTalking <[email protected]> wrote: > > > > > I am getting back to an earlier post: > > > > > "Understanding the Hobo <form> > > > > > In that I mentioned being unable to get a form to post to the database > > > > when update is used with a Paperclip attachment. I am using the > > > > paperclip > > > > plugin and the paperclip_with_hobo plugin. > > > > > When I use this form: > > > > > <form with="&[email protected]" > > > > > <field-list: fields="mainimg" /> > > > > <actions: /> > > > > </form> > > > > > The image is saved to the database, and I stay on the current page, > > > > because I have <after-submit stay-here /> in my form: > > > > > <def tag="form" for="Photo"> > > > > <form merge multipart param="default"> > > > > param="photo-object"/> --> > > > > <error-messages param/> > > > > <field-list fields="mainimg,lwrimg,uprimg" param/> > > > > <div param="actions"> > > > > <submit label="Save" param/> <!--<or-cancel > > > > param="cancel"/> -- > > > > > </div> > > > > <after-submit stay-here /> > > > > </form> > > > > </def> > > > > > I am trying to upload an image file and save it to d.b., and then load > > > > that image into a <div> > > > > on the page: > > > > > <div id="imgmain" part="photomain"> > > > > <%= render :partial => 'photos/mainphoto'%> > > > > </div> > > > > > This is the partial: > > > > > <%= (@photo == nil) ? '<img src="/images/main_tmp_display.jpg" />' : > > > > image_tag @photo.mainimg.url %> > > > > > The syntax must be wrong for > > > > > image_tag @photo.mainimg.url > > > > > because it generates an error. I could use help on that. > > > > > But back to the form issue, if I change the form to: > > > > > <form with="&[email protected]" update="imgmain" > > > > > <field-list: fields="mainimg" /> > > > > <actions: /> > > > > </form> > > > > > The image file does not get saved to the database. > > > > I appreciate the suggestions from Kevin and Bryan, > > > > but the examples you mentioned were not photos. > > > > Text updating does work. It appears that images do not. > > > > I believe that something is broken in regard to saving images, > > > > or there is some information I have missed. However, in the > > > > > Notice that I am passing an instance of @project.photo to the form. > > > > I am creating that in the project controller. The form without the > > > > 'update' correctly saves the photo, but the form with update does not. > > > > Do I need to pass the @project.photo instance in the params hash? > > > > > I am now using a dynamic <div> with a partial, so that would satisfy > > > > the > > > > condition Kevin mentioned about the content being static. > > > > > What I am really looking for is a solution. If update is broken with > > > > images, > > > > what are some suggestions for an alternative? I have tried an rjs > > > > approach, > > > > but get directed to a 'photo' page instead of reloading the 'projects/ > > > > new' page. > > > > > If anyone has example or has been successful in uploading an image, > > > > then > > > > updating a partial with that image using Paperclip, I really would > > > > like to > > > > hear about it. > > > > > Cheers, > > > > > Jet --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
