FancyUpload is a slick looking file uploader with a progress bar. However, it’s not completely obvious how to get it working with your Rails application. I searched long and hard and found 2 pretty good examples here and here. The problem is that the former only works with Amazon S3, and the latter just doesn’t seem to work. If you are using Amazon S3 check out the first link which will be more useful than this article. I will show you how to get a great file uploading interface up and running in minutes.
After some wrestling with the code in both examples, I was able to get a sample Rails app up and running. The app is hosted on github for your downloading pleasure.
I don’t think it’s worth going through the fancyuploader code here because you can view examples and usage on the official website, but I will mention the trick to getting it working in Rails:
Step 1. Disable protect_from_forgery for the upload action
This is as simple as:
class UploadsController < ApplicationController protect_from_forgery :except => 'upload' def upload ...
Step 2. Copy the file somewhere useful and return 200
class UploadsController < ApplicationController protect_from_forgery :except => 'upload' def upload FileUtils.mv params[:file].path, RAILS_ROOT+"/data/#{params[:Filename]}" return render :nothing => 200 end end
Step 3. Set the URL param of FancyUploader properly
... var up = new FancyUpload3.Attach('uploader_file_list', '#upload_link', { path: 'http://#{request.host_with_port}/javascripts/fancyupload/source/Swiff.Uploader.swf', url: 'http://#{request.host_with_port}/uploads/upload', ...
I highly recommend checking out the sample app from my git repository and poking around in the code. There is very little. Feel free to contact me if you cannot get fancyupload to work with Rails after trying my sample app.
If you enjoyed this post, make sure you subscribe to my RSS feed!
4 Comments
Hey Tony.
I wan you app and it work perfectly. Then I tried copying the code to mine, put the controller inside assets/upload and pointed that to the route /upload_asset. I changed the url in the helper method and imported the JS in the head of my layout. Copied the crossdomain.xml you had in the public folder…
however, when I click on the upload link nothing happens, only the # is attached at the end of th browser’s url. Don’t know how to track what’s happening, to see if any event whatsoever’s being triggered….so I’m plain stuck here.
I’ve been working on this for quite some hours and fancyupload documentation is not very good, so I don’t really know where else to go. Hope you can help me.
Just worked a little bit more on it, now it works but I had to isolate all the code like in your app, don’t know what interferring with the upload link to open the file select window. If you know any issues or have any clues I’d thank you a lot!
David, forgive me for possibly stating the obvious, but have you tried to detect any JS errors? That could certainly describe the behavior you are seeing. I would be happy to look at your code if you want to give me access. Without your code its tough to give more detailed insight. Also stay tuned on my blog because I have an article coming up about how to upload files gmail style!
Works great! thx