file uploads and ajax_scaffold

[alista...@gmail.com]

After reading a lot of feature requests for file upload ability in
ajax_scaffold I thought I would share how I have implemented this.

plugins required are:

1) ajax_scaffold - As we all know
2) file_column - provides a form helper that creates a iframe for
posting through (as ajax can't do file upload forms directly.) Also
provides other helpers as well.

3) responds_to_parent - Without this all ajax responses to will
update the hidden iframe that submitted the request.

so

form_remote_upload_tag replaces form_remote_tag in _new_edit.rhtml as
it creates the iframe and <form> tags

Controller::action
#all the normal stuff up here
responds_to_parent do
render :action => 'create.rjs'
end.
end

and

class Bob < ActiveRecord::Base
file_column :image
end

handles the assigning/storing of the file to a db.

FileColumn also handles the ability form repostings so you don't even
have to worry about the file lasting over multple form validation
failures

I will attempt to create a tutorial for this in the coming weeks and
will email it to Richard. If he (you) so like he (you) can blog it.

personally I don't think file_uploads are a feature that ajax_scaffold
needs. All that needs to happen is a certain level of care so that
this method doesn't break (which it shouldn't)

[rrwhite]

They are certianly not something that will every be integrated into the
ajax_scaffold but a tutorial on this subject would do wonders around
here :)

In the mean time I'm going to sticky this thread. Thanks.

[tim.a...@gmail.com]

Hi,

I'm not sure I understand what has to been done (and where it has to be
done) for :

Controller::action
#all the normal stuff up here
responds_to_parent do
render :action => 'create.rjs'
end.
end

Could somebody clear this point up ?

[era...@gmail.com]

What I did id in the "create" method of the controller is just wrap
return render :action => 'create' if request.xhr?
so it becomes:
responds_to_parent do
return render :action => 'create' if request.xhr?
end

But this still don't work.

I also have
ActionView::TemplateError (undefined method `form_remote_upload_tag'
for #<#<Class:0x38d5308>:0x38d51d0>)

when I replaced "form_remote_tag" with "form_remote_upload_tag" in
_new_edit.rhtml

What library/plugin is "form_remote_upload_tag" supposed to come from ?

[Ben]

How did you use the url_for_file_column helper to display the image in
teh ajax scaffolding? I have tried using this as the :eval option but
it doesn't seem to work:
image_tag url_for_file_column(category, category.image)

What did you do?

-Ben

[alista...@gmail.com]

OK i'll try and see if I can get this to

rails file_column_example
#edit your config/database.yml and create a table images with id and
image columns
./scipt/generate ajax_scaffold Image

# install file_column
http://www.kanthak.net/opensource/file_column/index.html
./script/plugin install
http://opensvn.csie.org/rails_file_column/plugins/file_column/trunk
## you need to have rmagick installed to use file_column.

# install responds_to_parent
# http://www.agilewebdevelopment.com/plugins/responds_to_parent
# download it here
http://sean.treadway.info/svn/plugins/responds_to_parent
cd vendor/plugins
svn export http://sean.treadway.info/svn/plugins/responds_to_parent
responds_to_parent

#then and I think I missed this bit sorry.
svn export
http://svn.kylemaxwell.com/upload_reference_app/vendor/plugins/remote_upload/
remote_upload
#copy the remote_upload.js to your public/javascripts directory and
include the js in your layout

then you can modify app/views/images/new_edit.rhtml to include the tag
form_remote_upload_tag in replace or form_remote_tag

change app/views/images/_image.rhtml to look like

<td class="<%= column_class(scaffold_column.name, column_value,
current_sort(params)) %>">
<% if scaffold_column.name == "image" %>
<%= image_tag url_for_file_column("image", "image", "thumb") %>
<% else %>
<%= format_column(column_value) %>
<% end %>
</td>

then

add to models/image.rb

file_column :image, :magick => {
:versions => { "thumb" => "100x100", "standard" => "640x480" }
}

and change the controller to

begin
@image = Image.new(params[:image])
@successful = @image.save
rescue
flash[:error], @successful = $!.to_s, false
end

responds_to_parent do
render :action => 'create.rjs'
end

return
end

I will leave the update action for you to fix.

add <%= javascript_include_tag 'remote_upload' %> to your image layout
ie app/views/layout/images.rhtml

then replace the text_field in _form.rhtml to
<%= file_column_field "image", "image", :multipart => true %>.

I now have a example of this going so I will package it up. Just email
me if you want it and ill forward it on.

sorry this is really ruff but I have rather major time constraints at
the moment. I am also sure that there is a mistake in it somewhere so
don't trust my word that this is correct.

[alista...@gmail.com]

:) if you want the example ive created email my like the masses :)
Some bowing and worshipping will also do nicely :D

Alistair.

ps It should probably be me doing the worshipping. Ajax_scaffold rocks.

[scott_b...@hotmail.com]

Many thanks in advance. Two questions:

1) Are you saying the controller create method should transform from
this:

def create
begin
@user = User.new(params[:user])
@successful = @user.save

rescue
flash[:error], @successful = $!.to_s, false
end

return render(:action => 'create') if request.xhr?
if @successful
return_to_main
else
@options = { :scaffold_id => params[:scaffold_id], :action =>
"create" }
render :partial => 'new_edit', :layout => true
end
end

to this:

> begin
> @image = Image.new(params[:image])
> @successful = @image.save
> rescue
> flash[:error], @successful = $!.to_s, false
> end
>
> responds_to_parent do
> render :action => 'create.rjs'
> end
> return
> end

That seems like VERY different functionality??? What about the
@options variable? Or the fall back for non-js browsers?

2) I notice you pulled code from Kyle's reference app rather than the
standalone remote-upload project ... is there a reason for this? Hard
to tell which of these is the "blessed version".

Again, thanks alot. I'm hoping to get this all working soon.

[alista...@gmail.com]

there is actually nothing stopping you have having the fall back code
there. In fact you should probably have it there and I was just in a
hurry. Im not really sure what you are meaning about the @options
variable as that is in the create.rjs 'view' and doesn't change.

Im not going to say that the code I produced is 100% correct. so
please look at the code ive done and make sure that im not doing
anything wrong.

[scott_b...@hotmail.com]

Understood. I guess more than anything I was hoping to see the your
ENTIRE rendition of the create method, just to compare to the code
snippets I posted above.

As I've been implementing this I've been pulling bits and pieces of
advice, code, and plugins from all over the net. A frustrating
process. This thread has been the most helpful so far.

But that said, I've still only got my implementation to the point where
everything works except the _new_edit form doesn't go away after the
AJAX calls create to persist my information. Just sits there spinning.
If I refresh the table it's clear everything worked.

Help still appreciated.

Brittain

[John Henderson]

Alistair,

Thanks for sending me your example code for this. I'm still having a
lot of difficulty using it....

I think i've got file_column and responds_to_parent successfully
installed although they did come with the example anyway - not sure.

The svn command doesn't seem to do anything for me. I can't find any
svn program on my machine (running OSX 10.4). Because of this I've not
been able to install remote_upload - although again it is included in
the plugins folder in the eample project so maybe thats enough?

I'm also having a lot of trouble installing rmagick. I found
instructions for insalling this but I seems to want me to install lots
and lots of different things and I'm a bit worried about all of this
when it comes to deploying into Production. i'm not sure if I'll be
allowed to do all this on a shared hosting environment. The other
question - is rMagick actually necessary? From what I can see it is a
tool for minuplating image files. What if you are not uploading images
- is rMagicK still required?

John

[jalense]

Hello Brittain,

Can you tell us whether you finally got this working? I have followed
Alistairs example above but just get an empty 'popped up' window with
this address: .../create?remote_upload_id=remote_uploader_go7way6htd.
It would be interesting to hear if you were able to get it working.

Thanks,
Jeffrey

[scott_b...@hotmail.com]

Jeffrey, sorry to say, I never have. Tabled it and have yet to make it
back. I'll definitely post a note here if/when I get something
working, otherwise, I keep hoping to see the "definitive code example"
popup!

Brittain

[alista...@gmail.com]

1) RMagick depends on Image Magick which depends on a whole host of
libraries for manipulation image formats.

2) svn is a program called subversion (think cvs but better) I would
suggest you get it.

3) You only need rmagick if you are uploading images and plan on
modifying them. All you need to do is remove any references to rmagick
in the file_column :image line of the controller (and maybe any
includes/requires that are there as well).

One suggestion for everyone. FIREFOX and an extension FIREBUG.
firebug is a wonderful tool that will allow you to see all the ajax
calls (except those that go thru the hidden iframe sadly)

[alista...@gmail.com]

mmm.... definitive code examples won't happen. The dependancy on
rmagick is the major hurdle there. Im not able to distrubute it in a
package for multiple distro's/OS's.

I may remove the dependancy on rmagick for you guys. which may help a
lot with your problems.

Another hint...

most methods have begin .... rescue ... end within them.

I would suggest that you put 'logger.debug $!.to_s' within the rescue
block so that any errors are logged to the dev log.

[Pakkio]

Hi, guys, and especially Alistair...

I read with infinite interest this thread on image uploads.
This sounds a real fundamental block for anybody's real life Ajax work.

But what I saw was an infinite thread of postings and errors coming up
everywhere.

I'm running in development on a Windows laptop and on production on a
Fedora box.

I'm quite concerned on the dependency from a lot of other libraries.

Just for the sake of the examples, could you Alistair, just give us a
zip with ALL the code, working correctly? :) It is somewhat complex and
cumbersome to cut and paste from the thread and then getting a lot of
exceptions from ruby just because it is finding "strange" characters.

My problem is quite simple: I just want to upload a file with Ajax in
ajax_scaffold wonderful framework.... :(

[alista...@gmail.com]

If you dont wish to upload images (and resize them) then the dependancy
on rmagick is not required.

If you look above I have said that anyone wanting the files just needs
to email me. And I will get around to it as soon as possible.

Sadly There is no way I can attach a zip to this thread, which I would
if I could.

If you are having problems with it you might find it interesting to go
to each of the independant websites that I have used within the plugin
and recreate it yourself. Also dont test with IE straight of. I HATE
IE and the example might work better in firefox

[YodaYid]

Some people may find this useful:
http://blog.flornet.fr/magazine/article/2

I didn't write it, but it seems to work for me...
I used it side by side with this thread.

Good luck,

--YY

[johnnybutler7]

Ive used this sample and it works great.
Im not interested in upoading pictures, i just want to upload files to
the file directory. Ive taken out all the references to rmagick and
what i want is the ability to upload a document to a folder in the
public directory called Documents.

Ive tried the below but this adds a folder called image so if i upload
a file now i get the following \public\Documents\image\image\6. I dont
want this i want a folder called documents and all the uploaded files
to be placed in that folder. How can i alter this code as i cant find
any reference to why it creates a new folder called image and then a
sub folder with the image id.

file_column :image, :root_path => File.join(RAILS_ROOT, "public",
"Documents"), :web_root => "Documents/"

Is using file_column the best solution, ive seen acts_as_attachment and
that looks good but i dont know if it can be integrated with
ajax_scaffold easily?

Any help appreciated.