Ruby on Rails + Paperclip + PlUpload

Submitted by aaron on Mon, 08/09/2010 - 15:19

With a few simple changes you can get plupload to work with an existing paperclip based model/controller in your Ruby On Rails application.
 
Step 1) Modify the plupload initialization from the example on plupload's site - note the comments marked "RoR"
 

  <!-- Load Queue widget CSS and jQuery -->
  <style type="text/css">@import url(/plupload/examples/css/plupload.queue.css);</style>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("jquery", "1.3");
  </script>

  <!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
  <script type="text/javascript" src="/plupload/js/gears_init.js"></script>
  <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

  <!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
  <script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
  <script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>

  <script type="text/javascript">
    	
    // Convert divs to queue widgets when the DOM is ready
    $(function() {   
      //RoR - capture authenticity token
      var atoken = $("input[name=authenticity_token]").val();
      $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'html5,flash,silverlight,gears,browserplus',
        url : '/photos',
        max_file_size : '10mb',
        chunk_size : '1mb',
        unique_names : true,
        //RoR - make sure form is multipart
        multipart: true,
        //RoR - make sure to send authenticity token and any other parameters that are on the plain html form
        multipart_params : {"photo[photo_album_id]" : <%= @photo_album.id %>, authenticity_token : atoken},

        // Specify what files to browse for
        filters : [
          {title : "Image files", extensions : "jpg,gif,png"},
          {title : "Zip files", extensions : "zip"}
        ],

        // Flash settings
        flash_swf_url : '/plupload/js/plupload.flash.swf',

        // Silverlight settings
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
      });

      // Client side form validation
      $('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();
		
        // Validate number of uploaded files
        if (uploader.total.uploaded == 0) {
          // Files in queue upload them first
          if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('UploadProgress', function() {
              if (uploader.total.uploaded == uploader.files.length)
                $('form').submit();
            });
				
            uploader.start();
          } else
            alert('You must at least upload one file.');

          e.preventDefault();
        }
      });
    });
  </script>

 
 
Step 2) Modify the controller action
 
Because I could not find a way to modify the name that the upload script sets for the file parameter, I modified my controller action to rename it.  Note, the actual paperclip field in my photo model is called "data".
 

def create
    #for plupload rename "file" to expected "photo[data]"
    if(params[:file])
      params[:photo][:data] = params[:file]
    end

    ...

 
 
 
 
That's it!

Copyright © 2012, Aaron Blondeau

Drupal theme by Kiwi Themes.