I have a folder containing a large number of pdf files. They are named with a code of 3 digits (XXX.pdf). In that same folder, I have a index.html file, which as its name suggests, is an index for navigating in the folder and opening a specific pdf.
As an example, when I search a specific pdf file but I don't know what's the name of the pdf. I only know its title or authors.
Without that index, I have no solution to find it.
With the index, the pdf are classified according to authors or titles so I can search within the index and click on the link to open the file. The index contain this line for each pdf file:
<STRONG>TITLE001</STRONG><br /> Author001
So, this is the first configuration. I can give the entire folder to a colleague and he can open the index to search for a file as soon as he doesn't change the folder organization because the href link is relative.
Now, I have a second configuration in which I uploaded that folder on a server on a private network. I changed the index.html with the following line:
<STRONG>TITLE001</STRONG><br />Author001
In that way if someone search a specific pdf file, he can download the index and when he click on the like in that index, it will download the correct pdf from the server.
BUT, I would like to have both configuration working:
If my colleague uses a lot that folder, he will maybe prefer to download the entire folder and the index will not work because its not a relative address anymore.
If my colleague uses it occasionally, he will just download the index and it will work.
Is there any solution to merge both solution and to have a conditional href attribute ?
Allowing to use both configurations. Something like:
if "001.pdf" doesn't exist
<STRONG>TITLE001</STRONG><br />Author001
else
<STRONG>TITLE001</STRONG><br />Author001
Can someone help me with that ?
Thanks a lot !
Doubt you will find a way to do that in HTML, how about something with Js ? Do you use JQuery or something ?
Something like that could do it then :
$.ajax({
type: 'HEAD',
url: 'http://personal_cloud/001.pdf',
success: function() {
// here when then file does exist
},
error: function() {
// here when then file does not exist
}
});
I have a URL www.foo.com/bar/hello/world Can I use href= in such as way:
LinkText
In other words, because of the versioning repository I use for work, only the sublink /hello/world of the final URL will the same when I push the site live.
For reference, see the docs
However, in href, you can either use an absolute URL, such as https://www.foo.com/bar.html or, relative, something like /bar.html, where / refers to the webserver root (but not webserver's system root), or, you can use bar.html which points to a file in the same directory level.
Basically you want to have a /hello/world link, it will point to www.foo.com/hello/world.
If you want it www.foo.com/hello/world to point at www.foo.com/bar/hello/world, you can either rewrite the URL on the server, or, redirect the users to www.foo.com/bar/hello/world
For URL rewriting, see your appropriate webserver docs
Only if the source code is located in 'http://www.foo.com/bar' and then it needs to be going to a valid file extension to execute an action:
LinksText
Following are 2 (MSDS,Shell-CCL) folders in my application
MSDS-->WebContent-->cclFooter.jsp
Shell-CCL-->WebContent-->jsps-->cclTNCDetails.jsp
Now i am currently in cclFooter.jsp
I am trying to access cclTNCDetails.jsp in Shell-CCL folder
I have tried the following but none of them worked. Please explain how to do
<a herf="javascript:openLinkFooter('<%= contextpath1%>/../Shell-CCL/jsps/cclTNCDetails.jsp');">Exa</a>
where the context path takes me to root/MSDS folder.
Exa
But none of them helped. Pls tell me how to navigate to the given file
Try this:
<a herf="javascript:openLinkFooter('/Shell-CCL/WebContent/jsps/cclTNCDetails.jsp');">Exa</a>
I am not sure, what about the WebContent here.
I've experienced some unexpected behavior of Chrome since the newest version:
While in Firefox this Code is working Perfectly fine:
<a
id="playlist"
class="button"
download="Name.xspf"
href="data:application/octet-stream;base64,PD94ANDSOON"
style="display: inline;">
Download Me
</a>
It isn't working in Chrome (Simply downloading a file named "Download"), but has worked pretty fine before. What do I have to change that it is working again?
After some research I have finally found your problem.
<a>'s download attribute:
If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
Source
HTTP-Header Content-Disposition
Reading the comments, I had the same issue as #buffer-overflow and found this in the issue:
I'm guessing that the web page and the download are on different origins. We no longer honor the download attribute suggested filename for cross origin requests. Clicking on the link still initiates a download. But the the filename is only derived from factors solely dependent on the server (e.g. Content-Disposition header in the response and the URL).
So no chance I could make it work ... :(
I had this problem with wordpress, the problem is that wordpress generates the full path of the file, and in the a tag you have to remove the full domain name and add a relative path
Example, instead of:
<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >
You have to do this:
<a href="/wp-content/uploads/file.mp4" download="file.mp4">
This will make it work
This is the current behaviour in Chrome as of 16 Aug, 2021
If you are calling an api like this:
http://localhost:9000/api/v1/service/email/attachment/dummy.pdf
Chrome will try to parse the last value of the path param and ignore any value passed to attachment attribute of a link if Content-Disposition is not set or is set to inline from the server, in which case the pdf file will have the name dummy.pdf
If Content-Disposition is set to attachment, then chrome will save the file with the filename value from Content-Disposition header.
That is if the server were to respond like this:
res.setHeader(
"Content-disposition",
"attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");
The file would be saved as server-dummy.pdf regardless of the presence of download attribute.
I have a simple solution regarding this issue. You just need to put your html file into a server like Apache using xampp control and so on. Because the download attribute is properly working through a server.
<a download href="data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>
Are you looking at the files via a web server or your local filesystem - Does the browser's URL bar start with http:// or file:///?
I just ran some tests in Chrome, and while it will download the file, it doesn't respect the value of the download attribute when you're using the local file.
If you start hosting it on a web server, this will start working. If you're just doing this for yourself on your computer, check out WAMP for Windows or MAMP for macOS to get started with Apache.
I recommend using the file-saver NPM Package to implement or force download.
// 1.
npm i file-saver // install via npm or
yarn add file-saver // install via yarn
// 2.
import { saveAs } from 'file-saver'
// 3.
saveAs('https://httpbin.org/image', 'image.jpg')
References
https://www.npmjs.com/package/file-saver
https://www.npmjs.com/package/file-saver#saving-urls // direct url to Saving URLs
https://www.javascripting.com/view/filesaver-js
It won't work without a server. download attribute will do the work only when using a server (local/remote) like tomcat/xampp/wampserver...
<a href="videos/sample.mp4" download>Download Video</a>
<a href="images/sample.jpg" download>Download Image</a>
Not just only for videos or images.
In case anyone is having problems with this when the address of the file is different from this one, you could try to:
Locally create a Blob from downloading locally the original file.
Creating a URL object based on the local Blob.
It would look like this:
const outsideRes = await fetch(outsideUrl);
const blob = await outsideRes.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "marketing-payout-report.csv";
link.click();
This can be resolved by adding target="_blank" attribute to the href.
Like this:
Save sprites.svg as
<a target="_blank" download="somefilename.svg"
href="https://cdn.sstatic.net/Img/unified/sprites.svg"
>somefilename.svg</a>
The file has to be in some zipped format!
Go To Chrome Click on “Settings” and you'll see a new page pop up in your Chrome browser window. Scroll down to Advanced Settings, find the Downloads group, and clear your Auto Open options. Next time you download an item, it will be saved instead of opened automatically.
I've generated an image tag like below:
<td>
<img src='#item.SourceAddress' alt="#item.Description"/>
</td>
and the result is somrthing like this:
<td>
<img src='C:\Users\leo\Workspace\Team Foundation Server\Sources\HRS\HRS\App_Data\user\Photos\test.jpg' alt="desc"/>
</td>
The problem is I only see blank space and no image at all(in firefox I only see alt text). the path is correct. I copied the img tag itself into another html file and I see the image crystal clear.
somrthing that might help: I opened the source with firefox and when I clicked on source of image I got following error:
Firefox doesn't know how to open this address, because the protocol
(c) isn't associated with any program.
and sorry for terrible english by the way.
Edit: I Edited the title. It is make more sence now!
This may be due to you providing a local path name (i.e. a directory in C:) rather than a relative path via Razr. If you start debug in Firefox then the console output sometimes eludes to this.
You could try something similar to:
<img src="#Url.Content(Item.SourceAddress)" alt="desc"/>
And check that SourceAddress is in the format of:
~/MyImages/Photos/test.jpg
Also worth checking all the obvious things like double quotes over single quotes etc.
Finally found out what is the problem!
First of all I used App_Data Folder to store files. this folder is special purpose and is used to store some special database files and IIS wont give direct access to this folder. and I had to make another folder like Image and store files there.
Second problem is I gave the path directly from Root (C:\...). The Web Browser doesen't have access to the Server File System Directly (Due to some security reasons). Because of this I had to gave the path relative address. The absolut path should be used by Server Code only and not in html source.
I managed to convert absolute path to relative like below:
`public static class HttpServerUtilityExtensions
{
public static string RelativePath( this HttpServerUtilityBase utility, string path, HttpRequestBase context )
{
return path.Replace( context.ServerVariables[ "APPL_PHYSICAL_PATH" ], "/" ).Replace( #"\", "/" );
}
}`
and:
``