Rails 3.1 paperclip uploadify issue

Question

I have setup the application for paperclip and uploadify. Paperclip works fine. But for multiple file upload, uploadify doesn't work i.e. it doesn't change <input type="file" and moreover when in the file select form, it doesn't allow to select more than one file.

I have followed given-below steps

1. downloaded uploadify and extracted under assets/ i.e. assets/uploadify
   a. uploadify.swf and cancel.png in assets/images
   b. jquery.uploadify.v2.1.4.js, jquery.uploadify.v2.1.4.min.js, and swfobject.js

   assets/javascripts
   c. uploadify.css into assets/stylesheets
   d. created middleware directory.

2. added the following scripts to upload

   $(document).ready(function() {
     <% key = Rails.application.config.session_options[:key] %>
     var uploadify_script_data = {};
     var csrf_param = $('meta[name=csrf-param]').attr('content');
     var csrf_token = $('meta[name=csrf-token]').attr('content');
     uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
     uploadify_script_data['<%= key %>'] = '<%= cookies[key] %>';
   
     $('.uploadify').uploadify({
       uploader        : '/assets/uploadify.swf',
       script          : '/assets/uploadify',
       cancelImg       : '/images/cancel.png',
       auto            : true,
       multi           : true,
       removeCompleted : true,
       scriptData      : uploadify_script_data,
       onComplete      : function(event, ID, fileObj, doc, data) {
       }
     });
   });
   </script>
   

3. List item

4. also, modified session_store.rb, application.js,

5. finally, added class to input type=file ", class = 'uploadify'"

Please suggest where have I gone wrong.

Thanks John

Answer 1

This worked for me

$(document).ready(function() {
  <% key = Rails.application.config.session_options[:key] %>
    var uploadify_script_data = {};

    // Fetch the CSRF meta tag data
    var csrf_param = $('meta[name=csrf-param]').attr('content');
    var csrf_token = $('meta[name=csrf-token]').attr('content');
    var session_param = '#{key}'
    var session_key = '#{cookies[key]}'

    // Now associate the data in the config, encoding the data safely
    uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
    uploadify_script_data[session_param] = encodeURI(encodeURIComponent(session_key));

    $('.uploadify').uploadify({
      uploader        : '/assets/uploadify.swf',
      script          : '/assets/uploadify',
      cancelImg       : '/images/cancel.png',
      auto            : true,
      multi           : true,
      removeCompleted : true,
      scriptData      : uploadify_script_data,
      onComplete      : function(event, ID, fileObj, doc, data) {
      }
    });
  });
</script>

I believe it's a problem with encodeURI and plus signs in the csrf-token. I read this somewhere but not sure where now.... Worth a try though