Retrieve Image from Ftp to Webpage

Retrieve image from FTP to webpage

With the latest versions of web browsers (Chrome 59, Firefox 61), you cannot even use ftp:// URL to retrieve an image. And it was never a good solution anyway.

---

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

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

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

<?

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

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

(you need to URL-encode the credentials, if they contain reserved symbols – you can use urlencode).

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.

---

In practice, you will likely have more images, so you will not have the file name hard-coded in the script, but the script will take the name as a parameter.

See List and download clicked file from FTP

Show image directly from FTP on ASP.NET page

I think the approach you should take is

1. Create a handler, say FetchImage.ashx
2. The code in this file should fetch the image from FTP using username and password (see below for sample)
3. Set the response content type to PNG / JPEG based on your image
4. Send your image

Sample Code of FetchImage.ashx.cs

var webClient = new WebClient();
byte[] imageBytes = webClient.DownloadData("ftp://server/image.png");

context.Response.Buffer = true;
context.Response.Charset = "";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.ContentType = "image/png";
context.Response.AddHeader("content-disposition", "attachment;filename=Image.png");
context.Response.BinaryWrite(imageBytes);

Calling this file

<img src="FetchImage.ashx" />

Improvements to this code would be to send the filename to FetchImage.ashx and serve the same. In this sample I am just showing you how this could be done

Getting pictures from an ftp server(locally) to display on website

In addition to Max's answer I wanted to add a third solution that works with both private and public ftp servers (and anything else really).

What you need to do is use your application as a proxy for the ftp.

• Add a page, f.ex. "getimage.aspx" which accept arguments, f.ex. id's of the image
• From the page, when called, response with header setting (mime-type etc.) (hold)
• Connect to ftp server, log in if needed and stream the file requested.
• Forward the content of that stream to your page's stream (response stream) and close.

Then you can do this (line breaks to make it more readable):

ImageUrl = '<%# 
    String.Format(@"/getimage.aspx?boatid={0}&imageid={1}&extension={2}", 
                  Eval("BoatId"), 
                  Eval("Image.ImageId"), 
                  Eval("Image.Extension")) %>'

For FTP you can use the built-in capabilities in .net or use a third-party extension such as Rebex-FTP which makes streaming files from ftp a walk in the park.

Using a page to retrieve pictures this way makes it capable of obtaining images from various sources, not just ftp, at the same time keeping it transparent for the user.

---

Related Topics