Ruby on Rails + Paperclip + PlUpload
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.