How to show image from FTP server in web page [duplicate] - html

I have a folder in my ftp server which contains several images. I'm trying to access and show these images in a webpage like
<img src="ftp://my_ftp_ip_address/Images/imagename.jpg"/>
But it asks for an FTP username and password. How can I achieve this? Also is it possible to do the same using JSP?

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

You are telling the browser to access the images using the ftp protocol, this is why it is trying to login.
Change ftp:// to http:// (or https:// if using ssl) to access the images.
You can offcourse also add the username and password to the image, but this way everyone can look at your code and login to your ftp server... not really secure ;)

You can try to modify your src attribute like this:
<img src="ftp://username:password#my_ftp_ip_address/Images/imagename.jpg"/>

Related

Download attribute opens file instead of downloading

I want to test downloading a local file using the <a> tag in HTML. The attached code doesn't seem to download the file, instead, it opens it.
<p>Interested? Download <a href="download_files/ChannelLogo.png" download>here</a></p>
Your code is correct, however, the download attribute only works when you are viewing the code from a server, due to the same-origin policy of most browsers.
Are you previewing the file by double-clicking the file or directly opening it up in a browser? If the URL while previewing starts with something similar to file://FILEPATH_HERE or /Users/FILEPATH_HERE, you are opening the file rather than serving the file. If so, you should run your code from within a localhost setup to test. That may involve running a server locally, or using an editor extension to spin up a project-based server. Once your URL starts with http:// or https:// the download will work as intended.
Alternatively, you could upload the project somewhere on the web.
It depends on where the file is located and how files are being served.
Either way, whether it is a plain static website with local files or being served by a server, you might need to check the href again to make sure it is correct.
Could be something small like /download_files/ChannelLogo.png instead of download_files/ChannelLogo.png.
Edit after question update:
Yes answer by Riley is right: it will only download if you are using a server. You could use a server like Node.js to run and test what you would like to do.
Otherwise you could look into Electron if you would like to work with the filesystem more directly, all depending on what it is you would like to do with your program.

Opening a file from a hyperlink

Is there a way to provide a hyperlink to a file on a file server but rather than downloading it, have it open in an application? For example a .doc file on the server, but rather than downloading the file it would then open in word so the user could edit the file directly instead of downloading a copy?
I have tried using file:///// but that seems to just download the file.
There are a number of misconceptions in your question:
It is up to the browser how a particular type of file is handled
The user does not get to do anything directly on the server; if anything, the server would provide a copy of the file, and would accept a modified version for replacement. This would require co-ordination between the two.
file:// is used to identify a file on the local computer
You can force a response to download with the Content-Disposition header, but that requires serverside doings, and you still can't force an open - that is up to the end-user and their browser, and you can't change that.
If you're developing both sides of the application (the webserver side and a client-side application), you can use application specific URIs, and register those with the operating system on the client side. This is what applications like Spotify do - they link to a URI like spotify://song.info.here, and if Spotify is installed, the browser hands off to the application.
No. You can`t do that. The user always will be prompted to either save or open the file

launch network location from browser

I am working on a webpage to provide download link to a searched file from the input form from user thru webpage.
I can use the html <a> tag as in <a href="file://ip/path/filename> link</a>
But when the file is in a network require login, i cannot do it.
Following is not working.
i had tried link
the file i need to link is locate at different network location based on user input to the browser form. then the backend python will search the file location.
can anybody give me a help ?
thank you.
Unfortunately, you are trying to do something which protocols and browsers do not support.
The username:password in URLs are designed to be consumed by a Web server. When you insert them in file URIs, there is nothing that will consume them; there's no HTTP server on the other end. Hence, the browser actually strips those before it extracts the file path from the request, and passes the file request to the OS.
You need to either make sure that the end-users are preauthenticated to all the network shares you are going to access, or avoid file URIs and set rudimentary web servers at your file targets.

problems with file directory ftp

i'm new in using hosting, i have a question about a FTP, why if i upload something (for example a image) to my server i cannot see it from the browser using the directory for example (http://www.mywebsite.com/public_html/images/backgrounds/background.png) if i use that address i get a fil with a "?" sign instead of the image. the only way to see the image is changing http by ftp for example,(ftp://ftp.mywebsite.com/public_html/images/backgrounds/background.png)
please how to find the files with http instead of ftp, to be able to use it in my web page using html
thank you
Typically, the publichtml folder is the root of your domain, which is to say that http://www.mywebsite.com/ points to your/relative/path/to/publichtml/
Using your example of putting a file at /publichtml/images/backgrounds/background.png would mean it should be accessible at http://www.mywebsite.com/images/backgrounds/background.png
Similarly, if you put filename.html in the /publichtml/ folder of your server, you should be able to access it at http://www.mywebsite.com/filename.html - If you put it in a subfolder of /publichtml/, say, at publichtml/example/, it should be accessible at http://www.mywebsite.com/example/filename.html
This can very from one server to another, but in most situations, this is common practice.
Edit: broken formatting.

How do I "install" specific web files on a proxy server?

This is for a in house system, that is required to be set-up this way.
I need specific web files, for example, all images to be manually pre-installed on a proxy server and never downloaded from the web server.
When the browser request the page, the only thing sent from the web server to the proxy should be the plain html page.
I would then like the images the html page uses, to be grabbed from the the proxy every time, for the complete render to the browser.
Is there a name for this set up? I have seen about caching but I do not even want the images downladed once. In addition, how would the html page know to use the images from the proxy?
How would I set up such a thing? I do not have a proxy server set-up yet so I do not know what platform I will be using, but suggestions are appreciated.
Thank You.
Well, I think that you could, for example, use Privoxy and tell it to redirect some queries for images to a local server or even let it replace the img src=" attribute inline using regexes.