When a user clicks the fineuploader button, how can I redirect them instead of showing the file selection dialog?

Question

We are using .net and fineuploader. If the users session has timed out and they click the fineuploader button, we need to be able to redirect them to a login page instead of showing them the file selection dialog.

We have been able to sort-of do it in the "submit" event of fineuploader but the user still sees the file selection dialog before they do our redirect.

$("#fine-uploader").fineUploader().on("submit", function (event, id, name) 
{
  if (noSession){
    cancelUploads();
    window.onbeforeunload = function () { return; }
    location.href = "/login";
  }
}

I did not see any events that fire before the file selection dialog, unless I missed it ( http://docs.fineuploader.com/api/events.html ).

Is there a way to do something before the file selection dialog is shown?

Answer 1

you can use prevent default to stop the submit action and run your check. Use an else statement to finish the submit if they are logged in.

 $("#fine-uploader").fineUploader().on("submit", function (event, id, name) { event.preventDefault(); if (noSession){ cancelUploads(); window.onbeforeunload = function () { return; } location.href = "/login"; } else{ return true; } } 

https://api.jquery.com/event.preventdefault/

Answer 2

The solution is probably as simple as attaching a click handler to the underlying file input element, preventing the browser's default action on click (which normally shows the file chooser), and then redirect the user to the page of your choice:

document.querySelector('input[type="file"]')
   .addEventListener('click', function(event) {
      event.preventDefault()
      location.href = "/login"
   })

Add this event handler when you want to redirect, and remove it when you don't. Or, you can add it after the uploader has been created, and add some logic to the click handler function that only prevents the default action and redirects if the user must re-login.

Warning: I have not tested this cross-browser (only Chrome).