How to display images from FTP server on HTML page?

Question

I try to build an image gallery for display images from FTP server. FTP server requires password authentication. I am scan files successful, but image don't display on page and by clicking on reference page ask user name and password.

$content = '';
$ftp_server = "255.122.111.111";
$ftp_user = "user_name";
$ftp_pass = "password";

$conn_id = ftp_connect($ftp_server) or die("Couldn't connect to $ftp_server"); 

if (@ftp_login($conn_id, $ftp_user, $ftp_pass)) {
    $content .= "<br />Connected as $ftp_user@$ftp_server\n";
} else {
    $content .= "<br />Couldn't connect as $ftp_user\n";
}

$files = ftp_nlist($conn_id, $dir);
foreach($files as $file_name)
{
    $content.=  '
         <div>
            <a href="ftp://'.$ftp_server.'/'.$file_name.'">
            <img src="ftp://'.$ftp_server.'/'.$file_name.'"    width="150" height="150">
           </a>
         </div>';
}

What I need to do that images are have been displayed on page?

The images need to be hosted somewhere the user has access to (e. g. a CDN) or when you retrieve them from the ftp server you need to store them in your web server and make them available by linking to them. What you are trying to do in this code (I. E. Serve the images directly from the ftp server to the end user) is not possible (that I'm aware of) — Alpaus, Jan 20 '16 at 07:57
Correct. Because the authorization headers aren't being sent along with the request for the page. Instead you should copy the files down to your local machine and then display them where necessary. You can hold them in TMP for the session if it's not a ton, or you can save them to disk. — Ohgodwhy, Jan 20 '16 at 07:59

score 1 · Answer 1 · edited Jan 08 '23 at 10:12

You could prepare a script (e.g. getimage.php) that, upon request…

gets the image file from the FTP server into a (binary) string variable, like in your script, then
prepares the image header correctly, like in the snippet below,
(also see this link from stackoverflow)
prints the (binary) image string.

In the HTML code insert the usual tags.

Follows a snippet of the getimage.php script. The image type is extracted manually:

// Get the image contents from FTP server into $binary
// $binary contains image text now
// Then ....

header('Content-type: ' . image_file_type_from_binary($binary));
echo $binary;

function image_file_type_from_binary($binary) {
  if (
    !preg_match(
        '/\A(?:(\xff\xd8\xff)|(GIF8[79]a)|(\x89PNG\x0d\x0a)|(BM)|(\x49\x49(?:\x2a\x00|\x00\x4a))|(FORM.{4}ILBM))/',
        $binary, $hits
    )
  ) {
    return 'application/octet-stream';
  }
  $type = array (
    1 => 'image/jpeg',
    2 => 'image/gif',
    3 => 'image/png',
    4 => 'image/x-windows-bmp',
    5 => 'image/tiff',
    6 => 'image/x-ilbm',
  );
  return $type[count($hits) - 1];
}

Martin Prikryl · Answer 2 · 2019-04-18T16:48:26.340

The FTP connection opened on the webserver cannot anyhow help the webbrowser to authenticate to the FTP server.

The correct solution is to route the image through your webserver, hiding away not only the credential, but also the original source of the image.

Create a script (PHP or any other you use) that acts as the image source (you will use it in the <img src=...> attribute. The script will "produce" the image by downloading it from FTP server.

The most trivial way to implement such a script (say image.php) is:

<?

header('Content-Type: image/jpeg');

echo file_get_contents('ftp://username:password@ftp.example.com/path/image.jpg');

And then you use it in the HTML like:

<a src="image.php" />

(assuming the image.php is in the same folder as your HTML page)

The script uses FTP URL wrappers. If that's not allowed on your web server, you have to go the harder way with FTP functions. See PHP: How do I read a file from FTP server into a variable?

Though for a really correct solution, you should provide some HTTP headers related to the file, like Content-Length, Content-Type and Content-Disposition. For this, see Download file via PHP script from FTP server to browser with Content-Length header without storing the file on the web server.

How to display images from FTP server on HTML page?

2 Answers2

Linked