Call a URL on button click

[Jack_Tauson_Sr]

So, I wrote a Java servlet to get a zip file from the server which works fine when I use a web browser to test it.

My URL looks like the following :

https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK

This successfully downloads the files.

I’ll be dynamically passing the filename and user variables but for the time being and testing, I’ve hard coded these variables.

I am wondering how should I call this URL when a user clicks on a button. My setup is as follows.

I’ve button in my HTML code as shown below:

<button id="fileButton" onclick="checkFile()">Download Files</button>

<script>
function checkFile(){

}

</script>

Is following a correct way to do it?

<button id="fileButton" onclick="checkFile(); location.href= https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK ">Download Files</button>

So even if above approach is correct, it is very likely that the file won’t be available for download as soon as user hits download button.

I might have to keep running the above URL again and again, maybe using setInterval() method of javascript which could only be possible to do inside a function.

[Steffan153]

The location.href thing should work.

@Jack_Tauson_Sr

it is very likely that the file won’t be available for download as soon as user hits download button

Do you have something to make the download link later, or what? Have you tried the current approach yet? Like this:

<button id="fileButton" onclick="location.href = 'https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK';">Download Files</button>

[Jack_Tauson_Sr]

@Steffan153

Have you tried the current approach yet?

Yes, the location.href approach works, I just tested it. However, I loose the ability to call this URL again as soon as the button is clicked. Hence, I was trying to follow this approach because I might be able to put the below function inside setInterval() method and keep on calling it until I get the file Or maybe I should go for the link approach that you mentioned.

function checkFile(){
    $.ajax({
        url: 'https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK',
        success: function (data) {
            // do whatever you need to do on success
        },
        error: function () {
            // do whatever you need to do on error
        }
    });
}

But this doesn’t send the zip file to the browser. Do you know why?

@Steffan153

Do you have something to make the download link later, or what?

Could you please elaborate on this, I may want to do something like this once I am done with the above thing.

[Steffan153]

@Jack_Tauson_Sr

But this doesn’t send the zip file to the browser. Do you know why?

When fetching a zip file with AJAX, you’re only getting the data programatically, not downloading it. This won’t work for this.

@Jack_Tauson_Sr

However, I loose the ability to call this URL again as soon as the button is clicked.

Try this one:

<button id="fileButton" onclick="download()">Download Files</button>

JavaScript:

function download() {
  let a = document.createElement('a');
  a.href = 'https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

[m3g4p0p]

Hi @Jack_Tauson_Sr, why not use a download link in the first place?

<a 
  href="https://myserver.com/Download/FileServlet?filename=users_files_1560866090.zip&user=JACK"
  download="myfiles.zip"
>Download Files</a>

As long as the href has the same origin, the user will then be prompted to save the file (or they can take the action they choose).

[Jack_Tauson_Sr]

Hey @m3g4p0p,

Thanks for your input. Actually, the file won’t be available immediately as soon as hits Download button OR link (in your case), and hence I was thinking of using a button and call a function which I could place it inside setInterval() method of javascript so that it can keep calling the URL again and again until it finds the file. Am I heading in right direction?

Can the file won't be available immediately issue be addressed by your approach?

I haven’t tried Steffan’s approach as of yet but planning to test that as soon as I get a chance.

[Steffan153]

My approach just creates a link and then clicks it, it’s almost the equivalent of @m3g4p0p’s answer. If it won’t be available just then, then the best practice would be to send some request to your server to make it available and then download it.

[m3g4p0p]

@Jack_Tauson_Sr

I was thinking of using a button and call a function which I could place it inside setInterval() method of javascript so that it can keep calling the URL again and again until it finds the file.

In that case I would rather send a push notification once the download is ready; you could also wait for the complete message from your app and replace the button with the actual download link then. Or you could simply send an email with the download link.

Polling the server would be possible too, but this is rather inefficient and there are more suitable options available.

[Jack_Tauson_Sr]

@m3g4p0p

you could also wait for the complete message from your app and replace the button with the actual download link then.

Yeah, this is also a good idea. But, in order for me to know whether the download has finished or not, I would still have to query a database table where I would be able to see the status of the request. In my table, once the download is finished, the status in one of the column changes to COMPLETE. So, perhaps, I could keep on querying it again and again and as soon as I see COMPLETE, I can replace the button with a link? But again, querying the database would be inefficient solution, right? If yes, then any other better alternative?

@m3g4p0p

Or you could simply send an email with the download link.

Emailing is not an option for me at this moment. This will require server configuration and I won’t be able to do this for this project at this point of time and hence looking for other alternatives.

[Jack_Tauson_Sr]

@m3g4p0p

In that case I would rather send a push notification once the download is ready

This will also require querying backend(database) again and again to know whether the request has been completed or not, right?

[m3g4p0p]

@Jack_Tauson_Sr

This will also require querying backend(database) again and again to know whether the request has been completed or not, right?

No, that’s the point: you’d actively send a push message from the backend to the client when the files are ready for download. There’s no need for polling or additional database queries then, the client just gets a notification with the actual download link (and might then update the button / link if the page is still open).

Here’s a very good google codelab to quickly get you started with push notifications:

Add push notifications to a web app  |  Google Codelabs

And here’s a more in-depth introduction:

Notifications  |  web.dev

[Jack_Tauson_Sr]

Thanks @m3g4p0p . I’m unable to install webserver for chrome because of following issue:

They have mentioned in the documentation that I could use other web server as well instead of Chrome.

Is -

1. Tomcat going to work for the same?

2. I’ve XAMPP installed with Apache on my local machine, I might need to put their project in htdocs folder if I decide to use it under Apache?

If everything is too much tied with Chrome, do you think there’s another documentation which I could use to get the gist of push notifications?

[m3g4p0p]

@Jack_Tauson_Sr

Tomcat going to work for the same?

Yes any server will do, but tomcat or XAMPP would probably be overkill for this tutorial where you just need to serve static files. I’d suggest something like serve – in the project folder:

npm install serve -D
npx serve ./app

Or globally:

npm install serve -g
serve ./app

(… or ask your admin to whitelist that chrome app for you.)