Download a File With a Tap

Recently, I've been using smart phones and tablets more than usual. Primarily, that is because I'm designing web page applications that require a better design than just "functional".

Smartphone browsers are limited in things one would assume to always be available with browsers on desktop and laptop computers. Right-click to download an image from a web page, for example. While it's possible to do so with smartphone browsers, some users may be unwilling to go through the rigamarole and others may have no clue how to do it or even that it can be done.

Today's article lets you put a download icon next to (or over) individual images. (Or other types of files — ebooks, videos, … .) When the icon is tapped, the image downloads.

There will be a couple example images to download for getting a feel for how it works.

Here is the first live example.

Tap the download icon on the right (or immediately below) the image.

The image then downloads to your computer or your smartphone (assuming your smartphone has downloading ability). After tapping the icon, and depending on your browser preference settings, you may be asked if you want to continue and, perhaps, also what file name you want for the download.

Before discussing the HTML for initiating the download, let's install the PHP script that will do the downloading for you. Here is the source code.

<?php
/*
Download This
Version 1.0
April 8, 2022
Will Bontrager Software LLC
https://www.willmaster.com/
*/
// Between the lines containing BOUNDARY, specify locations of files that may be downloaded. 
// Asterisk ("*") characters represent zero or more unspecified characters. 
// One file location per line. 
// Blank lines are ignored.
$OK=<<<BOUNDARY
/images/special/*.png
/images/special/*.jpg
/images/special/*.jpeg
BOUNDARY;
if( empty($_GET['f']) ) { echo 'Inappropriate access'; exit; }
$_GET['f'] = preg_replace('/^'.preg_quote($_SERVER['DOCUMENT_ROOT'],'/').'/','',trim($_GET['f']));
$okay = false;
foreach( preg_split('/[\r\n]+/',$OK) as $line )
{
   $s = trim($line);
   if( ! $s ) { continue; }
   $ta = explode('*',$s);
   $q = array();
   foreach( $ta as $chunk ) { $q[] = preg_quote($chunk,'/'); }
   $s = implode('.*',$q);
   if( preg_match('/^'.$s.'$/',$_GET['f']) )
   {
      $okay = true;
      break;
   }
}
if( !$okay ) { echo 'Inappropriate access.'; exit; }
$_GET['f'] = "{$_SERVER['DOCUMENT_ROOT']}{$_GET['f']}";
if( ! file_exists($_GET['f']) ) { echo 'Inappropriate Access'; exit; }
header('Expires: 0');
header('Pragma: public');
header('Cache-Control: must-revalidate');
header('Content-Transfer-Encoding: binary');
header('Content-Length: '.filesize($_GET['f']));
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.basename($_GET['f']).'"');
readfile($_GET['f']);
exit;
?>

Notes —

For security, you must specify which file may be downloaded from your domain. Generally, you would not want people to download files you had not intended to give away. Especially, you wouldn't want people to be able to download files containing confidential information they should not have.

Therefore, you must specify the locations of the files that are allowed to be downloaded.

An asterisk may be used to allow zero or more unspecified characters at that point in file locations. Below are examples:

You specify the file locations between the lines containing BOUNDARY in the above source code. Specify one file location per line. Blank lines are ignored.

$OK=<<<BOUNDARY
/images/special/*.png
/images/special/*.jpg
/images/special/*.jpeg
BOUNDARY;

The above allows downloads of any files in the /images/special/ directory that end with file name .png, .jpg, or .jpeg.

When done adding your authorized files, name the PHP script downloadthis.php or other appropriate *.php file name. Upload downloadthis.php to the server for your domain. Make a note of its URL to use in the HTML for initiating the download.

(Note: The authorized files list can be changed in the future as your requirements change.)

The downloadthis.php script can be used to download any file on your server that is specified in the script itself. The file to download can be an image (perhaps a larger or alternate image than one shown on the web page), an ebook, a text file, a video, a spreadsheet, even the source code of a web page.

In this article, we'll assume the download will be an image.

So, let's make a download link URL.

http://example.com/php/downloadthis.php?f=/images/special/image.jpg

First off, replace http://example.com/php/downloadthis.php with the URL of downloadthis.php on your server.

Now, replace /images/special/image.jpg with the location of the file to download.

You now have a download link URL. Here is a way to use it.

<a href="http://example.com/php/downloadthis.php?f=/images/special/image.jpg">
<img 
   src="http://example.com/download-image.png" 
   style="width:30px; cursor:pointer;" 
   alt="icon">
</a>

In the above source code, you'll see the download link applied to an image. Generally, it would be a download icon but it may be any image or even just text.

If you wish to download the download icon used in this article, click here (or download using the icon further below).

Here is a download icon for downloading the icon being used in this article (tap the icon within the round border).

 

Here is a template for constructing a download link with a circle around the download icon, as you see above.

<span style="border:1px solid black; padding:1.2em .5em .2em .5em; border-radius:50% 50%">
   <a href="http://example.com/php/downloadthis.php?f=/images/special/download-image.png">
   <img 
      src="http://example.com/images/special/download-image.png" 
      style="width:30px; cursor:pointer;" 
      alt="icon">
   </a>
</span>

Before closing, let's do one more example. This one has the download icon on top of the image, near it's bottom right corner. Tap the icon to download the image.

And here is a template for doing something similar on your web page.

<div style="position:relative; display:table;">

   <img src="http://example.com/images/special/image.jpg" style="max-width:100%;" alt="colorful image">
   <div style="cursor:pointer; position:absolute; right:15px; bottom:15px; width:30px;">

      <a href="http://example.com/php/downloadthis.php?f=/images/special/image.jpg">
      <img src="http://example.com/download-image.png" style="max-width:100%;" alt="icon">
      </a>

   </div><!-- style="cursor:pointer; ..." -->

</div><!-- style="position:relative; ..." -->

Notes —

To position the download icon on top of the image, a div with CSS position:absolute; is used to allow exact positioning over the div. The position:absolute; div is inside another div with position:relative;

The code between those two divs is code you are already familiar with from earlier in this article.

As noted in the article, the download link can be used for downloading any file authorized within the script itself. The download-handling PHP script is told the location of the target file and then accomplishes the download.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager