I am trying to allow users to download a file. I took this example here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download
When I click their w3 photo I get a jpg download in Chrome.
However, when I copy their html onto my local machine into a plain static html file, I open the html file in Chrome, then I attempt to download that file, and then Chrome just opens up the photo in a different window without downloading anything. Anyone know what's the problem?
My code (which is almost the exact same):
<!DOCTYPE html>
<html>
<body>
<h1>The a download attribute</h1>
<p>Click on the image to download it:<p>
<a href="images/myw3schoolsimage.jpg" download>
<img src="images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
<p><b>Note:</b> The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).</p>
</body>
</html>
I downloaded the w3 image locally onto my computer so it should'n't be a cross site origin issue
You would be better served studying almost anywhere but w3schools.
But more to your problem, are you running a webserver locally, or depending on file:/// links?
incognito mode will not impact your testing in any way.
A quick glance at google results for ‘download from file:/// link fails’ will show that there are an host of issues surrounding local file downloads and the file:/// links, especially on chrome.
This is not surprising - chrome is a browser not a web server.
Where the semantics of such ‘downloads’ are inconsistently defined for browsers, the semantics of true downloads are well defined, and their behavior consistent in a true service context.
To further both your understanding of these tools and the goals of your project, I strongly encourage you to download and install a webserver for your platform and learn the basics of it’s configuration and deployment.
You will not regret having done so.
Related
I am looking for suggestions on how to reference a local image file in HTML. The HTML code will only ever be used locally and never be published on a network of any type. I find that this code
<img src="file://l:/Test FFHP data/1042545.tif">
works well in Internet Explorer and Edge. It does not work at all with Chrome or FireFox.
Please give me some direction. I am hoping my users will be able to use their preferred browser.
I am making a web application using ASP.NET and I noticed that only Internet Explorer loads images properly that are on my home computer (../Desktop/WebsiteImages/xxxx.jpg), whereas the images won't load on Chrome or Firefox. If I want the images to display on Google Chrome or Firefox, I have to upload the images on a web hosting site such as imgur instead of having them all on a file on my computer. Is this a known bug?
If I want the images to display on Google Chrome or Firefox, I have to
upload the images on a web hosting site such as imgur instead of
having them all on a file on my computer. Is this a known bug?
It is not a bug.
Web Server will never serve a file which is located outside of a web application (unless you create an image handler by yourself).
If you are new to web application, easiest way is to place images inside ~/images/ folder inside your ASP.Net application.
Then you can call the image like this -
<img src="#Url.Content("~/Images/MyImage.jpg")" alt="My Image"/>
showing local file like file:// is not allowed in Chrome and Firefox for security reasons by default, but this answer shows you how to change those settings. it's not recommended to use local filepath for your image
I'm testing a locally run web app and am trying to use anchor tags to link to log file output on my C: drive. The href value that's generated for the anchor is in the standard URI format "file:///C:/outbox/myLog.txt". But, when I try to click the anchor, the link doesn't go anywhere, I have to right-click and copy the link into the address bar or to a new tab. I'm not sure why copying the link works whereas the link itself isn't clickable. Any help is appreciated.
Is this the case on different browsers? What is your browser / OS? We've seen this as a fault on Windows XP on both IE and Firefox browsers and may be nothing to do with your code
From my understanding, you can't link to file:/// from an HTML doc for security reasons. You might want to try this chrome extension.
This is HTML link to google:
Google
And it work fine
This is a link to my local file:
Local
And its not working, why?
If this is some sort of security issue, so how can I work around it? It's just for my own testing.
This sort of link to a local file will work in some browsers as long as the HTML is also called from a local file. If not, it's a security vulnerability. It won't work at all in webkit based browsers.
See <A>nchor Link to Local File? (<a href='file:///{path}'>DEAD LINK</a> not working in FireFox but in IE)
And Cross-browser link to file on local system
Due to Mozilla’s security model(as well as other modern browsers too), file://-links to local files on your computer or files on a network share do not work on (non-local) web pages; a click on such a link just does nothing. Links to local files could be useful on intranet sites like wikis.
There's an extension named LocalLink(http://locallink.mozdev.org/) for FireFox (and Thunderbird), that adds a new entry “Open Link in Local Context” to the link’s context menu. After you have installed the extension from https://addons.mozilla.org/firefox/addon/281 , you can open file://-links by right click on the link and select “Open Link in Local Context > Current Window”.
I've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.