How do you make an MP3 link download instead of play "in-browser"?
I tried changing the target to blank, but that just opened the player in a new window.
You can't do this by modifying the link. You will have to have the HTTP server that serves the file send a Content-Type of "application/octet-stream". Presumably it is sending the type "audio/mpeg", which is hinting to the browser that it is MP3 content. Without the capacity to alter this header, you can't achieve this.
If your server supports PHP, create a PHP script called "getfile.php" (or similar) that takes a parameter of a file ID or file name. Set the content-type and content-disposition headers within the script to force a download prompt.
See: http://webdesign.about.com/od/php/ht/force_download.htm
Lots of solutions here. Here's the basic idea:
Use Javascript to make a (ajax) request to the server
When the request is received, run a script
This script redirects your browser temporarily to a new page
The new page has a few headers telling your browser to expect a file attachment, and what kind of attachment it is
The "save as" dialog pops up and your original page is still onscreen
I could be wrong, but I've seen people with the same problem before just with other file types, they used the code below:
<FilesMatch "\.(?i:mp3)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Hope this works for you!
For quite some time (Chrome 14+, Firefox 20+, Edge 44+) it is possible to use the download attribute on same-origin links to force download behavior even when the server doesn't supply a Content-Disposition header on the link target.
Without access to the server generating the HTTP responses, the browser gets to decide what to do with different types of responses. usually the only files a browser will download are things like .zip files which it cannot display.
Related
Update: I have concluded that this is a firefox issue. Chrome, Chromium Edge and Safari all work well with my solution. I have created a bug on the firefox bugtracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1658877
I have a front-end that can download a file in 2 ways:
Click button 1 to open the file in the browser
Click button 2 to download the file to the hard drive
The way this works in the front-end is by using the <a download="FILENAME.EXTENSION"> tag and attribute for forcefully downloading the file, and to use <a> (without download) to make it open in the browser.
This works because the API never returns a content-disposition header (We use ASP.NET Core's File() method without the fileName parameter, which doesnt add a content-disposition header in this case) so the download attribute ensures it is downloaded.
Please read the background information before continuing
To try the fix the mentioned background information's issue, I changed our API to always return the following header for a file:
content-disposition: inline; filename=FILENAME.EXTENSION.
My idea is that the browser should open the file in the browser. if this is not possible, it will open a download pop-up and use the filename bit of the content-disposition header to give it a correct name. If it can open the file in the browser but the user pressed the download button, the <a download> should have higher priority and download.
The problem is that when using the <a download> way of downloading, that it STILL tries to open the file in the browser. I can understand why, but I would rather that it would respect the download attribute. I am using Firefox and the front-end and back-end run on the same domain!
Any clues?
For some background info:
We use ASP.NET Core 2.0. And if you use the built-in BaseController.File() method WITH the fileName parameter, it FORCES the attachment bit in a content-disposition header which makes it always download the file. We do not want that, so we used the variant of File() without specifiying a filename, which would not add a content-disposition header; this worked fine...
UNTIL we had to support MS word and MS excel files. When trying to use option 1, the user gets a pop-up like this:
As you can see, the filename is missing because the browser is not sending it in the content-disposition header. And I can't use the download attribute to specify it, because I pressed option 1 which means the file should be opened in the browser. If the file would be a PNG, it would then be forced to download.
At this point, I tried using inline;filename="FILENAME.EXTENSION as my content-disposition header, but this takes priority over the <a download> bit, defeating the purpose.
I can come up with 2 workarounds:
MS Word and MS Excel files must have a attachment bit in their content-disposition header so I can specify the filename and they download to disk, even if you tried opening it directly in browser.
But this isn't pretty; if some user would not have image/pdf support and downloaded an image or PDF file, my issue would still exist because the filename would be download again...
Have a download queryparam with the value 0 or 1 that specifies if the file should be downloaded with a INLINE or ATTACHMENT content-disposition header.
this might, compared to my current situation, be prettier, perhaps. but it is more work, and I wish that <a download> could just work.
I have a problem with external css. When I have creating my project using html and css the css is working fine but when for some reasons I have change this
#LoadModule rewrite_module modules/mod_rewrite.so
in httpd.conf file in apache
to this
LoadModule rewrite_module modules/mod_rewrite.so
my all the css are not working properly and one more thing is that when I have checked the console
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/E-commerce/styles/style.css".
anybody tell me that this is the main reason or not
A Simple description to whats happening during the process is that browser Send HTTP Request and receive a response to that request from the server to two contains headers.in this case your server is making stylesheet come with wrong content-type try first to inspect element using dev tools in browser and investigate the response from server .
i believe if you create new htaccess with the following content :
AddType text/css .css
this will tell server to send it as stylesheet
Many times when your css file is large so your browser stores it in cache and hence not every time it renders your css file when updated in editor and reloaded the site.
To rectify this simply press Ctrl+F5.
This will clear the browser cache for that tab(that website) and reload the page forcing the browser to render the updated css.
This should work without touching your .htaccess file.
EDIT: For Mac if you are using safari, the sortcut is Command+Alt+E
In Mac if you are using Chrome, Ctrl+F5 will not work, so refer to this site: https://clear-my-cache.com/en/apple-mac-os/google-chrome.html
Use ctrl + F5 to clear browser caches on window.
This should work.
When clicking a PDF link in Firefox and Chrome, the file will sometimes be opened for in-browser viewing and sometimes prompt a "Save as" dialog.
If I wanted to force the link to always prompt a download I could use the download HTML5 attribute.
However, I want to do the opposite. I.e., force the links to always be viewed in the browser.
Sort of an inverse download attribute. Is there such a thing? :)
I'd prefer to not modify response headers when serving PDF documents - I want to be able to specify in markup what the browser behavior should be.
Thanks!
You can achieve that by setting the appropriate header (for instance, in case of PDF, the header will be Content-type: application/pdf;
With this header, the browser will know the mime-type of the file and display it if it is compatible with it.
Here you can see the headers for a PDF.
As a hint, what I like to do is to use some sort of controller (in case you are using a backend language) that handles the download. Hence, to download myNewProject.pdf I do
<a href='download.php?file=myNewProject.pdf&viewInBrowser=1'>Download!</a>
Then I can set the appropriate headers depending on the file type, or if I want to force download or view it in the browser...
I'm using Firefox in XP. I went to the OPTIONS under Tools and found Portable Document Format. Click on it and it will allow you to change the way PDF files are handled.
open the file in a Microsoft Word and save as html.
Is there a cross-browser way of forcing something like:
Click to Listen or Download
...to open in the operating system, and not in a browser plug-in (i.e. Quicktime)? I want the example link above to always show the OS dialog window: "Open With... Save As...".
Is this maybe possible with Javascript, or with the ActiveXObject for Windows OS at least?
You can do this by adding the HTTP header
Content-Disposition: attachment
when qwerty.mp3 is requested. Can't tell you exactly how without knowing what HTTP server you are using.
Details in RFC2183
There is no 100% foolproof will-always-work way to do this, since the browser can always decide how to handle this in the end.
However, most sites that want to force a download, toy with the headers: send the mp3 file with Content-disposition: attachment or Content-type: application/octet-stream. This will suggest to the browser to offer to store the file as an attachment, and not show it internally.
I have not used it. But perhaps this is what is best for you.
http://www.w3schools.com/html5/html5_audio.asp
Again haven't tried it. And this is HTML5. Let us know what you find out.
I have an anchor tag that is used to request the download of a file.
Like this:
Download
The file may be modified on the server very often, so I want to make sure the browser does not cache the file.
However, testers found out that, although it seems to always download the file when you click on the link, when you right-click on the link and choose "Save As...", the browser seems to choose to use the cached file instead. This was tested with IE9.
How can I force the browser (especially IE9) to always download the file in every case?
I'll add as an answer. Try adding a random number to the query part of the href:
?param=[random]
As per my own comment for one of the answers:
According to wikipedia I can set the response header parameter: Cache-Control: no-cache
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Effects_of_selected_HTTP_header_fields
After receiving a response with this header, the browser will not cache this data anymore.