How to code HTML download button where filename version will change

[larry29936]

I'm creating a webpage where the user will be able to download an .iso file. The version of the iso will change. For example: xxxx.1.iso will become xxxx.2.iso when the iso is updated. How do I code the download button so that I don't need to re-code the button when the version changes. If I were to create a download subdirectory, and the .iso file was kept there do you think this would work if the only file in the download subdirectory is the .iso file.

  <?php
    $files = array_slice(scandir('/download/'), 2); 
    ?>         
    <div class="navbar-custom">
       <a class="btn-solid-lg page-scroll" href="/Download/" download=$files>Download the App</a>
    </div>

If you know of a better way to code this, I'd appreciate the input.

Thanks in advance,

[larry29936]

I've tried the following method but it immediately downloads index.html and the site never loads in the browser.

            <?php
                    $files = array();
                    foreach (glob("/download/*.iso") as $file) {
                      $files[1] = $file;
                    }
                    $file2 = "window.location.href = 'https://foxclone.com/download/' + '$file'" 
                 ?>

                <div class="navbar-custom">
                    <button onclick="$file2" >Download the App</button>

[grant.baker]

Larry, it looks like you have a few things going on there. First, I'm assuming your download folder is in the same folder that your download script is in. You don't need the "/" before download. That makes the function step back up the tree one folder. Second, you need to make sure you aren't mixing your php and javascript. You are mixing them in lines 6 and 10. The php concatenate character is ., while javascript's is +. In line 10, you need the php tags. As it stands, the html reads <button onclick="$file2" >.... You need to echo the php variable with <?php echo $file2;?>. Lastly, you really don't need to use foreach here. glob() will return an array of filepaths to the files that match the search paramaters. You also don't need download/ in the url, because it's included in the filepath returned with glob(). I would replace lines 2-6 with

$files = glob('download/*.iso');
$file2 = "window.location.href = 'https://foxclone.com/'".$files[0];

Again, that's assuming you only have one .iso file in the directory. If you haven't checked it out already, you can find the glob() php manual entry here.

Hope that helps you out!

[larry29936]

Grant, thanks for getting back to me with the detailed explanation of my mistakes and how to correct them. If I'm reading you correctly, the block of code should look like this:

                 <?php
                    $files = array();
                    $files = glob('download/*.iso');
                    $file2 = "window.location.href = 'https://foxclone.com/'".$files[0];
                  ?> 

                <div class="navbar-custom">
                   <button onclick=<?php echo $file2;?>Download the App</button> 
                </div>

I uploaded a new index.html with the code block as above and it didn't work. My download folder is located in my public_html folder and the iso is in there so it should.

I'm fairly new to web development and learning as I go.

Thanks again,
Larry

[Biiim]

Hey Larry,

I'm not that familiar with the glob function but as Grant Baker said here:

Lastly, you really don't need to use foreach here. glob() will return an array of filepaths to the files that match the search paramaters. You also don't need download/ in the url, because it's included in the filepath returned with glob().

glob() returns an array of the filepaths so

$files = glob('download/*.iso');

echo "<div class='navbar-custom'>";
foreach($files as $key=>$value){
    echo "<button onclick=\"window.location.href = 'https://foxclone.com/{$value}'\">{$value}</button>";
}
echo "</div>";

That will make a button to each iso file in that directory. The $key will be an index of the $files array so you can use the $key in some way to refer to specific versions. $value is the filepath for the download. For instance you could get the length of the $files array and display the latest version at the top. note that array indexes start at 0. So an array with length 5, the last index will be 4 ([0,1,2,3,4])

[larry29936]

Biiim, your suggested code doesn't work here. It just displays a couple of the "echo" lines from the code. Thanks for the suggestion though.

[grant.baker]

Larry, your updated code looks good, except you still need quotation marks around the button onclick, and you need the closing > for the button. So it should look like this: <button onclick=“<?php echo $file2;?>“> I can’t tell you how many times I’ve troubleshot pages just to find I’d either misspelled or mis-capitalized a variable, or left out some punctuation somewhere! Lol

I’ve also found that it helps me a lot to user either print_r($myarray) or var_dump($myarray) to figure out what my functions are returning. $myarray is whatever array you are wanting to find info on. It works a lot like echo does for a non-array variable.

As biiim was saying, glob() returns an array. The way you plan to use it now, with only one .iso file in the folder, you know that it returns only 1 result so you can use it the way I suggested and just access it with $files[0]. If you ever wanted to expand to multiple file versions or something, you could use a foreach function like what biiim suggested to build a button for each file.

Happy coding!

[larry29936]

@grant.baker - I've already made the changes you suggested and I'm now running against a local Apache server. I'm getting an error on that "button onclick line. The error I'm getting is: Uncaught SyntaxError: Unexpected token '<' . I'm not getting any php errors. This is starting to drive me crazy.

[grant.baker]

That’s a php syntax error. Did you accidentally delete the closing php tag before the button that you had in there originally? It sounds like that got removed and it’s trying to parse the button html as php.

[Biiim]

Can you post the current code you are working with?

I can look and see where the problem is for you or someone else can jump in.

It is PHP, HTML, CSS & Javascript all together.

If there is a parse error in the PHP, (anything between the <?php ?> tags the page will just not load at all and will give an error or be completely blank.

when the PHP is fine you will get the webpage and if there is something wrong with the HTML it won't look right - you can do inspect element on the web browser to see what the HTML code looks like or view source to see everything - you can find out what the PHP script has output so you can find what to change.

CSS is more of an appearance language you find it inside <style> tags or class= style= and css files, it sets sizes and colours and things like this so errors in CSS makes things look weird or ugly. It also can set positions of things so you can get errors that way from CSS, like a menu is supposed to be hidden but the CSS errored and now the menu is on the page all the time.

The 4th language is javascript which is the code inside the "onclick" attribute on the button, this is different and javascript errors show up on the browsers console (ctrl + shift + j on chrome) (ctrl + shift + k on firefox). Any javascript errors will show up here, you may not want to get into this yet I just mention it so you can start getting familiar with it, if you want to see you can put onclick="console.log('Hello Larry');" on a HTML element and when you click it you can see the message in the console.

The actual javascript code is window.location.href = 'https://foxclone.com/download/version.iso' so the HTML should look like: <button onclick="window.location.href = 'https://foxclone.com/download/version.iso'">my button</button> this tells the current browser window to navigate to the URL https://foxclone.com/download/version.iso - which a browser should default to download the file

Because it is coming through PHP it gets 1 step more complicated with the quotes as you have to escape the quotes in the PHP string: echo "<button onclick=\"window.location.href = 'https://foxclone.com/download/version.iso';\">Download Version 1</button>";
\" tells php to put " as part of the string, where otherwise it would end the string, so you can put " " around the onclick in HTML.

so the PHP could be fine but it may be missing a quote, or the wrong quote and it makes the HTML error or the javascript error

Hopefully that helps you understand it better but post what you are working with so we can help otherwise it is a bit of a mystery for us as there could be so many things it could be.

[grant.baker]

Larry, I spotted another error in your code that I missed in my earlier reply. Also, I was incorrect in stating that it was a php error. It is actually a javascript error, my apologies. On line 4, you are closing the javascript quote early. Remove the single quote after .com/, and add it behind $files[0], so that line should be $file2 = "window.location.href = 'https://foxclone.com/".$files[0]."'". If it still isn't working after that, please repost what you have so we can get a better idea of what suggestions to make.

[larry29936]

Grant, it appears that the php isn't functioning because after making the changes in your last post, when I click the button it loads my index.html, which makes sense if the variable from the php is null. Here's my current code:

    <?php
       $files = array();
       $files = glob('download/*.iso');
       $file2 = "window.location.href = 'https://foxclone.com/".$files[0]."'";
    ?> 

    <a href "<?php echo "/{$file2};"?>" <img src="images/button_get-the-app.png" alt="" width="104" height="40"></a>

[grant.baker]

Ok, with your current code, I see a couple issues. You changed from a button to a linked image that looks like a button, which itself isn't an issue. To the user, the effect is basically the same, but from the html and javascript side, they act differently. Mainly, the href portion of the tag is interpreted by the browser as a link to follow - the same as if you had typed it in the bar yourself. So even though you have a piece of javascript in there, it thinks that it's a link to follow. You don't use the JS if you're using a link, you just set href as the file location and it will download. With that in mind, you'll need to change line 4. You want the result of $file2 to be exactly what you'd type into the browser to go to the file you're looking for. So, using the link as you are here, line 4 should read $file2 = "https://foxclone.com/".$files[0];. If you decide you want to move back to a button, then your current line 4 is what you'll want.

Second, you need to move the php statement separator (;) outside the quotes in line 7, so it's ...}";?> instead of ...};"?>. As it stands, your script is adding ; to the end of the link.

I recommended using print_r($files) and/or var_dump($files) earlier, and I will encourage you again to become familiar with them. The way I would use it here, is to put it at the very end of your first php block, so it's the last statement before the closing tag. var_dump() displays more information than print_r(), and sometimes you don't need it all, especially with a large array. I recommend trying them both with this script to get familiar with them. This will be helpful when you are trying to figure out where the problem with the page is.

[larry29936]

I assume var_dump($files) or print_r($files) needs a semi-colon after it seeing as it's inside the php tags. I put var_dump($files); just before the closing php tag but got no results. The code is in index.html and is running on a local apache server which I configured to run php in a html file. Do you think I should move the download section to a separate download.php file and just call it from the menu in index.html? The reason I ask is that if I just rename index.html to index.php, as soon as I try to load it in the browser it downloads itself and never loads the webpage.

BTW - I added AddType application/x-httpd-php .html to apache2.conf. Yes, I did re-start the server after changing the config to enable php in an html file.

[grant.baker]

I have very little experience setting up servers, so I'm afraid I won't be much help on that front. It's odd that it downloads index.php instead of loading as a webpage. Sounds like maybe there's something misconfigured. A quick google search led me to this StackOverflow question, which may be of some help to you if it won't load any php file as a webpage. Is there a reason you're running the php in html files and not php files though? In my opinion, it would be better to run everything through php files if you're going to be using a lot of php.

var_dump($files); should return something like this: array(1) { [0]=> string(17) "download/file.iso" }

[larry29936]

Grant, 90% or more of the code is html and js. The only php used is in a contact (email) form and trying to do this download stuff. I've been at this all day. Tomorrow I'm going to purge this machine and start from scratch after backing up my data

[Biiim]

Here is what I have on my server in my httpd.conf file:

LoadModule php7_module "c:/php/php7apache2_4.dll"
PHPINIDIR /php/

Then further down:

<IfModule mime_module>
    AddType application/x-httpd-php .php
    AddHandler application/x-httpd-php .php
</IfModule>

My versions are Apache/2.4.27 (Win64) PHP/7.1.7.

The settings usually come commented out in the httpd.conf file but you might need to change the PHP module name, I remember I have had to do that a few times when setting them up.

[larry29936]

Biiim, I don't have an httpd.conf anywhere on my computer. I do have a lighttpd.conf file. I'm running on a linux box, not windows. Thanks for your input but I've now completed this project and have time to investigate the differences between apache on windows vs. linux.

[larry29936]

Thanks to everyone who assisted me in this project. Everything is now functioning and I'm happy.

[Dani]

httpd.conf is the config file for the Apache web server. lighthttpd.conf is the config file for the Lighthttpd web server. Apache can run on both Windows and Linux. Lighthttpd can run natively on Linux or on Windows as part of Cygwin (*nix emulator for Windows).