How to implement redirect after upload with Rails 3 and Plupload?

Question

How to implement redirect after upload with Rails 3 and Plupload?

Every time I use plupload to upload a file using the code below, I notice in the Firebug console that there is a message in red indicating POST /uploads 200 OK 8192ms. Upon further inspection of the terminal output, I see 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 create action looks like this:

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

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

I'm trying to figure out how to redirect to another page after finishing an upload. Even though I attempted to redirect to the users page in the create action with head 200, nothing happens.

If anyone could provide guidance on how to achieve this redirection after an upload completes, I would greatly appreciate it. I've searched online but haven't found a solution yet...

Lastly, why does the Firebug console always show POST /uploads 200 OK without any accompanying log message after uploading a file?

javascript http-redirect ruby-on-rails-3.1 plupload

Answer 1

Answer №1

To easily achieve this task, I utilized the window.location javascript function. Plupload offers an uploadcomplete Event that triggers once all the file uploads are finished. Additionally, the FileUploaded event is triggered after each individual file upload. Therefore, the uploadcomplete event proves to be beneficial when you intend to upload multiple files concurrently. The concept of the uploader was inspired by a reference found here, with the inclusion of the upload complete event. Below is my implementation of the 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>

Upon completion of the upload process, the uploader automatically redirects to display all the uploaded documents.

Answer 2

To easily achieve this task, I utilized the window.location javascript function. Plupload offers an uploadcomplete Event that triggers once all the file uploads are finished. Additionally, the FileUploaded event is triggered after each individual file upload. Therefore, the uploadcomplete event proves to be beneficial when you intend to upload multiple files concurrently. The concept of the uploader was inspired by a reference found here, with the inclusion of the upload complete event. Below is my implementation of the 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>

Upon completion of the upload process, the uploader automatically redirects to display all the uploaded documents.

Answer 3

Answer №2

Here are a couple of options to handle redirecting:

1) Utilize Plupload's FileUploaded callback function for redirecting after successful upload:

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

2) Alternatively, you can rely on Rails to handle the redirect by adding this code snippet to your ApplicationController:

# Implement redirect functionality for AJAX and non-AJAX requests
def redirect_to(options = {}, response_status = {})
  if request.xhr?
    render(:update) {|page| page.redirect_to(options)}
  else
    super(options, response_status)
  end
end

Answer 4

Here are a couple of options to handle redirecting:

1) Utilize Plupload's FileUploaded callback function for redirecting after successful upload:

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

2) Alternatively, you can rely on Rails to handle the redirect by adding this code snippet to your ApplicationController:

# Implement redirect functionality for AJAX and non-AJAX requests
def redirect_to(options = {}, response_status = {})
  if request.xhr?
    render(:update) {|page| page.redirect_to(options)}
  else
    super(options, response_status)
  end
end

Answer 5

Answer №3

Redirecting in the way you described is not possible when uploading files with any upload runtime because it is considered an indirect action. HTML5 utilizes XHR, HTML4 uses a proxy iframe, and flash/silverlight have their own byte streaming APIs for file uploads.

If you are only uploading one file at a time, your best option is to utilize the FileUploaded event. The third parameter will contain the server response from all runtimes. Here is an example of how you could use it (based on information provided by iWasRobbed):

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

The response will be plain text as plupload can only standardize this across different runtimes. Therefore, your redirect URL should be included in the body of the response. If you require more complex responses, you can send serialized JSON and parse it on the client side.

Answer 6

Redirecting in the way you described is not possible when uploading files with any upload runtime because it is considered an indirect action. HTML5 utilizes XHR, HTML4 uses a proxy iframe, and flash/silverlight have their own byte streaming APIs for file uploads.

If you are only uploading one file at a time, your best option is to utilize the FileUploaded event. The third parameter will contain the server response from all runtimes. Here is an example of how you could use it (based on information provided by iWasRobbed):

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

The response will be plain text as plupload can only standardize this across different runtimes. Therefore, your redirect URL should be included in the body of the response. If you require more complex responses, you can send serialized JSON and parse it on the client side.

Answer 7

Answer №4

Although this information may be a bit dated, I am looking to enhance the responses provided. Building off of @gonchuki's suggestion, I made some adjustments to my view:

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

In my controller, I simply render the URL with plain text:

def create
  # implement functionality here
  render :text => object_path(id: object)

I hope this also proves helpful :)

Answer 8

Although this information may be a bit dated, I am looking to enhance the responses provided. Building off of @gonchuki's suggestion, I made some adjustments to my view:

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

In my controller, I simply render the URL with plain text:

def create
  # implement functionality here
  render :text => object_path(id: object)

I hope this also proves helpful :)

How to implement redirect after upload with Rails 3 and Plupload?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retain the previously selected option in a PHP combobox even when changing pages

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2

Why is my return statement in JavaScript Nextjs mapping values twice?

How can I achieve a similar functionality to array_unique() using jQuery?

I attempted to write an AngularJS code, however, it seems to be malfunctioning

Styling pagination using CSS and jQuery

Tips for setting up a webpacked vue.js application with an express/koa backend!

Create a jQuery script that generates clickable links when a user is mentioned in the

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Changing the dimensions of a div according to the container's size

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Problem with Layering in Javascript Canvas Game using Kinetic JS

Upon refreshing the page, Vuex encounters an issue where it is unable to read

Using PHP/JavaScript to activate a button once the timer reaches 00:00

What is the method used by Disqus to adjust the size of its iframe according to the content it contains?

Issues with reading d3.js visualization data from a JSON file

Utilizing jQuery to attach events to dynamically generated elements

Unexpected TypeError occurred when trying to Fetch data from an Express Server hosted on Window object

Scheduling a cron job to run at a particular date and time