Uploadify and Rails 2.3

19 Comments

1. Douglas F Shearer

   Jul 22, 2009

   Finally a simple, awesome solution to what is a hard problem. No more trying to crowbar upload.swf into applications.

2. Andy Atkinson

   Jul 22, 2009

   Hi John. I’ve been trying to shoehorn uploadify into our app the last couple days (without modifying uploadify source). In our app we have an Asset model that uses paperclip to store asset records. Uploadify POSTs the upload to the create action in our assets controller which creates a new asset record, but additional form fields are not sent in that POST. Without JS/Flash all form attributes are of course posted. We’ve resorted to redirecting to an edit form (in JS) following the ajax uploadify POST of a single upload to complete the additional asset model attributes. (1) Would you mind sharing some of your model and controller code (here or in the uploadify forum)? The Rails/REST examples are lacking. I’m also planning a blog post and test app for the scenario I’m describing, email me if you want to collaborate.

3. John Nunemaker

   Jul 22, 2009

   @Andy – We are just doing files and not currently allowing changing titles and such. My model and controller does nothing special. Haven’t needed to do what you are doing yet. If I do I’ll be sure to post.

4. Andy Atkinson

   Jul 22, 2009

   In practice I have found Uploadify difficult (impossible in its current form?) to work with in this regard. Things I’ve tried (1) auto:false uploadify option, and do a jquery $.post being sure to send extra form fields, (2) use scriptData to grab form data with jquery and post it, (3) create a Asset record and have the form post to the update action by passing '_method':'put' in scriptData and other means, but I can’t trick rails into going to the update action. As I mentioned we have a 2-step process now, which works for a single or multiple uploads. Second step for multiple uploads would be editing a batch of assets attributes (titles/descriptions for example), Flickr comes to mind as an example of this approach. If you add the ability for users to customize the names or descriptions of their uploads with Harmony, would love to see some of your implementation!

5. Dave

   Jul 25, 2009

   This has been tremendously helpful. However, I seem to have a slight issue that I can’t figure out. Below I have pasted my “scriptData” portion for uploadify as it appears in the source code on the rendered page. I assume that the “u” in the code must be url-encoding these strings, so “+” becomes “%2B” or “=” becomes “%3D.”

   
   'scriptData' : {
      '_DHDA_session' : 'BAh7CiIVdXNlcl9jcmVkZW50....',
      'authenticity_token' : "R4%2BOZiOjf8XoHDzkPM1rY7yKb%2B1QUnM6XUPfS7GU2r0%3D"
   }
   
   

   My problem is that when uploading a file, my log shows

   
   ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
     app/middleware/flash_session_cookie_middleware.rb:18:in `call'
   

   and the params show

   
   "authenticity_token"=>"R4 OZiOjf8XoHDzkPM1rY7yKb 1QUnM6XUPfS7GU2r0="
   

   Hmmm, why did the + signs turn into spaces? The = sign seemed to convert just fine. Any ideas?

   Dave

6. Smeevil

   Jul 25, 2009

   I seem to run into the exact same problem as Dave does…. been trying all kinds of things to get the + sign encoded/decoded correctly but without luck so far…

7. John Nunemaker

   Jul 25, 2009

   @Dave and @Smeevil – That is actually Rack::Utils.parse_query. I remember hitting that at some point and having issues, but then I did something differently and the problems went away.

   Can’t remember what. I can promise that my final solution is what I showed above and that it is in fact working for me. If anything hits me, I’ll let you know.

8. smeevil

   Jul 25, 2009

   @John Well the encoding is solved now using :
   

   =='authenticity_token'  : encodeURIComponent('#{u form_authenticity_token if protect_against_forgery?}'),

   But alas still getting the InvalidAuthenticityToken :/
   The post looks good though :

   Parameters: {"Filename"=>"test.png", “gallery_session”=>"66c523f937f33432a4e660906dfc0e14", “folder”=>"/smeevil/albums/7/photos/", “authenticity_token”=>"3R0ccSdAVZD3X5hWOTfzoaMvrHwRHMrS6WDy+BgWBk4=", “album_id”=>"7", “photos”=>{"content"=>#<File:/var/folders/9c/9cYOHQdXHyuCFvOglxcd7k+++TQ/-Tmp-/RackMultipart.7710.1>}, “Upload”=>"Submit Query", “userid”=>"1"}
   

   Still investigating , if I find something I’ll let you know :)

9. smeevil

   Jul 25, 2009

   Found it !
   Somehow when i added the session_key_name to the script variable it worked…

   ==‘script’ : ‘/photos/?#{session_key_name}=#{u cookies[session_key_name]}’,

10. Nathan Colgate

    Jul 25, 2009

    John, thanks for the fantastic write up. You published this tuesday. Friday uploadify 2.0.0 was released. And I needed this stuff… today. Couldn’t have been better.

    Here are a few things that I needed to get mine working (please note, I’m using Uploadify 2.0.0):

    • The addition of the ‘method’ parameter set to ‘get’. Otherwise the middleware was not getting anything in the env[‘QUERY_STRING’]
    • The use of smeevil’s encodeURIComponent around the authenticity_token. Otherwise the plus signs were getting stripped out and I was getting the very frustrating InvalidAuthenticityToken error.

    I’m not sure what the session_key_name thread means, other than adding it to the script parameter might be a way to get around using the method parameter.

    Anyway, my updated view:

    
    $(document).ready(function() {
      $('#fileInput').uploadify({
        'script' : assets_path,
        'method' : 'get',
        'fileDataName'  : 'asset[file]',
        'scriptData' : {
          '<%= session_key_name %>' : '<%= u cookies[session_key_name] %>',
          'authenticity_token' : encodeURIComponent('<%= u form_authenticity_token if protect_against_forgery? %>')
        }
      });
    });
    

    Thanks again.

11. Dave

    Jul 26, 2009

    Excellent! Yes, I forgot to mention that I, too, was using the new Uploadify 2.0. However, I did try the 1.6.2 release with no luck either. Also, I had tried using the encodeURIComponent as well, but without the “u” method – this didn’t work. But with the “u” – it does work. Can someone explain why you need the “u” there too? From what I can tell, the u simply url encodes the string. Isn’t that the same thing that encodeURIComponent does?

    Lastly, I did post to the uploadify forum about this problem. One of the developers replied saying that something has changed in how scriptData deals with variables – more info here
    http://www.uploadify.com/forum/viewtopic.php?f=7&t=1446

12. Jose

    Jul 27, 2009

    Does this work with polymorphic assets?

13. John Riney

    Jul 29, 2009

    Setting the method to GET for a file upload didn’t quite make sense to me. Rather, I used the Rack::Request object instead of env[‘QUERY_STRING’], which got me working. So call in the middleware now looks like:

      def call(env)
        if env['HTTP_USER_AGENT'] =~ /^(Adobe|Shockwave) Flash/
          
          req = Rack::Request.new(env)
          unless req.params[@session_key].nil?
            env['HTTP_COOKIE'] = "#{@session_key}=#{req.params[@session_key]}".freeze
          end
        end
    
        @app.call(env)
      end

    I also had to double-wrap the scriptData that’s passed to uploadify, like so:

    
    scriptData  : {
       '<%= session_key_name %>' : encodeURIComponent('<%= u cookies[session_key_name] %>'),
       'authenticity_token'  : encodeURIComponent('<%= u form_authenticity_token if protect_against_forgery? %>')
    }
    

    Hope that helps out a bit!

    —riney

14. james2m

    Jul 30, 2009

    I don’t get it, isn’t Uploadify a just a version of SWFUpload with the js converted to jQuery?

15. Tom

    Jul 31, 2009

    There’s been a healthy thread in the comments going on about Middleware and Flash based uploaders since December last year on The Web Fellas blog

    Looks like it has a slightly different variant on the middleware but is the version used in this swf upload and rails sample on github

    Finally, Jim Neath made a few blog posts around flash uploaders that are also worth a read.

16. Andy Atkinson

    Aug 05, 2009

    Spent several hours trying to get multiple asset records created with uploadify and paperclip. Always get an error in paperclip creating the second record. Put together a sample app that illustrates the problem with full details. Would anyone be able to lend a hand? Would love the help!

    uploadifytest on github

17. Michael Nikitochkin

    Aug 06, 2009

    env[‘QUERY_STRING’] is empty for me(rails 2.3.3) so I used next:

    
      def call(env)
        if env['HTTP_USER_AGENT'] =~ /^(Adobe|Shockwave) Flash/
          params = Rack::Request.new(env)
    
          unless params[@session_key].nil?
            env['HTTP_COOKIE'] = "#{@session_key}=#{params[@session_key]}".freeze
          end
        end
    

    @app.call(env)
    end

18. Andy Atkinson

    Aug 10, 2009

    Issue was with Rails 2.3.3! Rails 2.3.2 works great. Issue filed for Paperclip.

19. Jerome

    Aug 14, 2009

    Hello. I’ve been trying to follow this and other similar tutorials for Rails, paperclip, and Uploadify. It’s been tough, but I think I’m getting close. I managed to get past the authenticity woes, but now am getting other errors, such as:

    NoMethodError (undefined method ‘original_filename’
    or
    You have a nil object…

    my code is taken mostly from your example.

    In my controller:
    

    
      def create
        @image = Image.new(params[:image])
        @image.photo_content_type = MIME::Types.type_for(@image.original_filename).to_s
        respond_to do |format|
          if @image.save
            flash[:notice] = 'Asset was successfully created.'
            format.html { redirect_to(@image) }
            format.xml  { render :xml => @image, :status => :created, :location => @image }
          else
            format.html { render :action => "new" }
            format.xml  { render :xml => @image.errors, :status => :unprocessable_entity }
          end
        end
      end
    

    I don’t seem to have any issues with token authenticity, so I’ll leave that code out. But here’s the javascript:
    

    
    <%- session_key_name = ActionController::Base.session_options[:key] -%>
    
    $(document).ready(function() {	
    
      $(‘#upload_input’).uploadify({
    
    	  ‘uploader’: ‘/flash/uploadify.swf’,
    
    	  ‘cancelImg’: ‘/images/cancel.png’,
    
          ‘script’          : ‘/images’,
    
          ‘scriptData’      : {
    
            ‘<%= session_key_name >’ : ‘<= u cookies[session_key_name] >’,
    
            ‘authenticity_token’  : ‘<= u form_authenticity_token if protect_against_forgery? %>’
    
          }
    
      });
    
    });
    
    
    
    

    
    I’ve tried mixing code up from different, similar tutorials, but end up making it worse, or just getting myself confused.

    Rails is actually saving the image object because I have db records showing only the created_at and updated_at times. All other fields, the paperclip ones(i.e. photo_content_type, photo_file_name, etc.) are all NULL. Any help would be appreciated. Thanks.