Rails 3 and plupload - how can I do redirect after upload?

Question

When I upload an file by the plupload by the code below, so in the firebug console I see the message POST /uploads 200 OK 8192ms . The color of the text is red. When I take a look to the terminal output, there is Completed 200 OK in 7653ms .

var uploader = new plupload.Uploader({
    runtimes: 'gears,html5,flash,silverlight,browserplus',
    browse_button: 'pickfiles',    
    autostart : true,    
    max_file_size: '10mb',
    url: '/uploads',
    resize: { width: 320, height: 240, quality: 90 },
    flash_swf_url: '/Scripts/pl/plupload.flash.swf',
    silverlight_xap_url: '/Scripts/pl/plupload.silverlight.xap',
    filters: [
    { title: "Image files", extensions: "jpg,gif,png" },
    { title: "Zip files", extensions: "zip" }
]
});
uploader.bind('Init', function (up, params) {
    $('#filelist')[0].innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
});
uploader.bind('Error', function (up, err) {
    $('#filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );

});
uploader.bind('FilesAdded', function (up, files) {
    for (var i in files) {
        $('#filelist')[0].innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
    }
    //uploader.start();
});
$('#uploadfiles').click(function (e) {
    uploader.start();
    e.preventDefault();
});

uploader.bind('UploadProgress', function (up, file) {
    $('#' + file.id)[0].getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});

uploader.init();

In the Uploads controller the action create looks this:

  def create
    @upload = Upload.new(:upload => params[:file])

    if @upload.save
      head 200
      #redirect_to '/users'
    else
      render :action => "new"
    end
  end

How can I make a redirect to any page? As is possible to see, I tried to make a redirect after finish an upload to the page users , but unfortunately nothing happend. If is in the create action the line head 200 , so also nothing happend.

Could anyone help me, please, how can I make a redirect to any other page after finish upload? I tried to search at google, but I didn't find any way to do it...

And I would like to ask you yet - why is always in the Firebug console after uploaded file the line POST /uploads 200 OK without any log message?

Answer 1

I can simply do it with window.location javascript function. Plupload has a uploadcomplete Event, which get generated when all the files uploading is complete. FileUploaded event is generated after a single file upload. So uploadcomplete event is helpful if u wish to upload multiple file The uploader idea is taken from here and added upload complete event. Here is my uploader.

<script type="text/javascript">
 $(function(){
  var uploader = new plupload.Uploader({
   runtimes : "html5",
   browse_button : 'pickfiles',
   max_file_size : '100mb',
   url : "/documents",
   multipart: true,
   multipart_params: {
   "authenticity_token" : '<%= form_authenticity_token %>'
  }
});

 uploader.bind('FilesAdded', function(up, files) {
  $.each(files, function(i, file) {
  $('#filelist').append(
    '<div id="' + file.id + '">' +
    'File: ' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>'

    );

  });


   });

  uploader.bind('UploadProgress', function(up, file) {    

$('#' + file.id + " b").html(file.percent + "%");


  });

  uploader.bind('UploadComplete', function(up, files) {
  window.location = '/documents';
 });


  $('#uploadfiles').click(function(e) {
  uploader.start();
  e.preventDefault();
  });


  uploader.init();


  });


  </script>

After the upload is complete the uploader redirects to list all the uploaded documents.

Answer 2

Two options:

1) Plupload has a FileUploaded callback that you can use:

uploader.bind('FileUploaded', function(up, file, info) {
  // Redirect after successful upload
  window.location = 'http://mysite.com/users';
});

2) You can also just try letting Rails do the redirect by putting this code in your ApplicationController :

  # Allows redirecting for AJAX calls as well as normal calls
  def redirect_to(options = {}, response_status = {})
    if request.xhr?
      render(:update) {|page| page.redirect_to(options)}
    else
      super(options, response_status)
    end
  end

Answer 3

I know this is a little old, but I want to improve the responses. Based on what @gonchuki said, I did this to my view:

uploader.bind('FileUploaded', function(up, file, info) {
  window.location = info.response;
});

And in my controller I just render the url with simple text:

def create
  # do stuff here
  render :text => object_path(id: object)
end

Hope this help too :)

Answer 4

You cannot do a redirect on that way since uploading files with any upload runtime is an indirect action . HTML5 uses XHR, HTML4 uses a proxy iframe, and flash/silverlight use their builtin byte streaming APIs to perform the upload.

If you are just uploading one file at a time, your only option is to use the FileUploaded event. The third parameter gets populated with the server response from all runtimes. You would actually use it like this (edited copypasta from iWasRobbed):

uploader.bind('FileUploaded', function(up, file, info) {
  // Redirect after successful upload
  window.location = info.response;
});

the response will always be plain text given that it's the only thing plupload can standardize upon the several different runtimes, so your redirect URL must be in the body of the response. If you need more complex responses you can always send serialized JSON and parse it on the client side.