1

Background Information

  • I am working on a NodeJS w/ Express project.
  • There are publicly visible buttons that should allow file downloads, and these buttons have protected routes which redirect the user to a login page if they are not logged in.
  • I am storing some information related to file downloads in a cookie, and that is working. Essentially it is need_to_download_file2 == true

The Problem

Once the user authenticates, I want to redirect them to the home page and then start a file download for the file they originally clicked on. As of now, everything is working, but the file download does not start after the redirect, the user must click download again to initiate it.

Main Approach:

  • I am attempting to call window.open('/download/file2') in the index.html page's onLoad() event. However, the network tab shows the request as being cancelled. This is all that is contained in the onLoad() event.
// onLoad
function hidePreloader () {
  document.getElementById('preloader').style.display = 'none'
  document.getElementById('contentDiv').style.display = 'block'

  window.open('localhost:3000/download/file2','_self');
}

I would really appreciate any help, and can provide more information if needed!

Thanks in advance.

ClicheCoffeeMug
  • 170
  • 2
  • 12

2 Answers2

3

If I recall properly, all client upload files must be picked by the user themselves. A server is not allowed to specify a file to upload on its own (security problem with that as a server could randomly target any file on your hard drive). Instead, the user has to manually select the file to upload.

What you could do (for a better user experience) is check to see if the user appears to be authenticated on the client side via Javascript. If not, then use Ajax to log them in (without changing/losing the current page). Then, after they've authenticated via Ajax, the original upload file is still specified in the current page and it can then be started without the user having to pick the file again.

Your server will still check for proper auth when the upload request arrives, but if the user follows this path, they should be authenticated already.

FYI, window.open() is often blocked by the popup blocker functionality in a browser if not the direct result of a user click (and even then it's still sometimes problematic). It would be more reliable to not rely on popup windows. Often times, you can simulate the same experience with a popup built into the page, not as a separate window.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • This is for the client to download files from our server, not upload. Don't know if that would make a difference – ClicheCoffeeMug Dec 17 '19 at 17:38
  • 1
    @ClicheCoffeeMug - I think the same concept applies. Use Ajax to login and then you don't lose the state in the current web page. – jfriend00 Dec 17 '19 at 17:53
  • Gotcha. We're using Auth0 currently to handle authentication and are redirecting to the subdomain auth0 provides. This implementation isn't planned as permanent, so when it changes, I will definitely look into this. For the interim I may just hide the links behind an "Authenticated Landing Page" so that the user doesn't need to be re-directed for login to as a workaround for now. – ClicheCoffeeMug Dec 17 '19 at 17:57
  • Well, it wasn't quite the answer I was wanting, but it's the workaround solution that I'm going with for the time being so I'm marking it as answered and will re-visit this if I ever decide to display links publicly but require auth to open them. Thanks again – ClicheCoffeeMug Dec 17 '19 at 18:24
  • Well, if it's just checkboxes or something like that in the page, you can preserve that several number of different ways so they are again selected after the auth redirects. You will have to decide which method of preservation to use (such query parameters in the URL that you preserve through the redirect and then recheck the boxes based on those query parameters either in server-side rendering when the page is rerendered or in client-side JS when the page is loaded). – jfriend00 Dec 17 '19 at 19:21
  • Currently, there are several buttons (Bootstrap) displayed on the page that are `a` elements with an `href` tag that point to the download routes I have setup in Node/Express. I am storing a cookie that I can check against to see if I should download the links **after** I redirect, but I can't do `res.download()` and `res.redirect('/')` in the same request. That is why I was trying to do something akin to the `res.download()` in the `onLoad` event – ClicheCoffeeMug Dec 17 '19 at 19:39
  • I'm not following what the UI looks like or how it works, but you don't have to do the `res.redirect()`. You can just do a `res.download()` if you already know what file you should be sending them. – jfriend00 Dec 17 '19 at 19:40
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204441/discussion-between-clichecoffeemug-and-jfriend00). – ClicheCoffeeMug Dec 17 '19 at 20:01
1

Add trigger and fire it which will call the same method , which is called by button. It's easy to implement in JQuery but in pure javascript How to trigger event in JavaScript? may help you. In node.js/express for frontend you can install jqyery module by npm i jquery .

Amit Sinha
  • 88
  • 8