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

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.

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>

List item
also, modified session_store.rb, application.js,
finally, added class to input type=file ", class = 'uploadify'"

Please suggest where have I gone wrong.

Thanks John

Stephen Provis Stephen Provis · Accepted Answer · 2012-01-27T20:32:53

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

Rails 3.1 paperclip uploadify issue

1 Answers