CMS Development

Kennan_wmk
Contributor | Partner
Contributor | Partner

Can't make a file download when a page loads.

SOLVE

My situation: 
I have a Thank You page that comes up when someone fills out a form in the interest of getting a file download. In order to save the user some clicks and streamline the process, I would like this Thank You page to start the download once the page loads (after a small delay so the user can read "your download will start shortly..." before it starts).

I have this code in my body:

<script type="text/javascript">
$(document).ready(function () {
setTimeout(function() {$("#dl").click()}, 2500);
});
</script>

and I know it is running this script because I tested with console logs and they all showed up, including when I wrapped them in a setTimeout just like I did above. 

The element that the click is targeting:
<a id="dl" href="the url of my file to download" rel=" noopener" download="file name given to download">click here</a>

I'm not getting any console errors whatsoever, but the download never actually triggers on its own. If I manually click on this anchor element, the download works exactly as it should, but it seems like the jquery .click() just isn't working and I can't figure out why.

Thanks in advance!

0 Upvotes
1 Accepted solution
Kennan_wmk
Solution
Contributor | Partner
Contributor | Partner

Can't make a file download when a page loads.

SOLVE

Solved the problem. 

Here's the code that is needed to make this happen:

<iframe src="file url goes here" id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) { document.getElementById('my_iframe').src = url;
};
</script>

 The only thing you need to change in this code is to set the src attribute of the iframe to be whatever url your file lives at.

Make sure to put this code in the body of your page's html. I did this right in the hubspot editor by adding a rich text area to my page and putting the code inside the source code of the rich text area. You don't put the code right into the rich text section like you're adding text or you'll just see the code on your page and it won't work. Instead, in the rich text editor, click Advanced -> Source Code to pull up a window that shows your rich text content in code form. Simply paste the code right at the bottom of this, make sure the src of the iframe is your file's url, click Save Changes, and click Apply to make the changes go into effect on the page.

How it Works:
The idea here is to use the iframe to "display" the file on your page (I say "display" because you are hiding the iframe from view so even though the iframe is there and displaying your file, it won't show up on the page). You then use the function to download whatever the iframe is showing.

Haven't been able to get this to delay with setTimeout() yet, but it definitely does the job of automatically downloading the file when the page is opened.

View solution in original post

0 Upvotes
Kennan_wmk
Solution
Contributor | Partner
Contributor | Partner

Can't make a file download when a page loads.

SOLVE

Solved the problem. 

Here's the code that is needed to make this happen:

<iframe src="file url goes here" id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) { document.getElementById('my_iframe').src = url;
};
</script>

 The only thing you need to change in this code is to set the src attribute of the iframe to be whatever url your file lives at.

Make sure to put this code in the body of your page's html. I did this right in the hubspot editor by adding a rich text area to my page and putting the code inside the source code of the rich text area. You don't put the code right into the rich text section like you're adding text or you'll just see the code on your page and it won't work. Instead, in the rich text editor, click Advanced -> Source Code to pull up a window that shows your rich text content in code form. Simply paste the code right at the bottom of this, make sure the src of the iframe is your file's url, click Save Changes, and click Apply to make the changes go into effect on the page.

How it Works:
The idea here is to use the iframe to "display" the file on your page (I say "display" because you are hiding the iframe from view so even though the iframe is there and displaying your file, it won't show up on the page). You then use the function to download whatever the iframe is showing.

Haven't been able to get this to delay with setTimeout() yet, but it definitely does the job of automatically downloading the file when the page is opened.

0 Upvotes