Develop Reference

Detect file download event of a file link in JavaScript [duplicate]

Say I have:
a webpage with an iframe: <iframe src="" style="display:none;"></iframe>
an URL pointing to a PDF document: http://www.example.com
some javascript that will do iframe.src = pdfurl
a button that will trigger such javascript
if the browser is going to display the PDF inline, the button will
say "view pdf" and when clicked will make the iframe visible
otherwise it will say "download pdf"
I found a way to detect whether the pdf has been loaded in the iframe: reading iframe.contentDocument.contentType after onload has fired, but
this won't allow me to display the correct button
onload does not fire if the file is being downloaded
Thanks :)

To tell the client's browser to download a response as a file, set the Content-Disposition HTTP header to 'attachment' in your response. This is no guarantee, but it's the proper method of telling the browser how to handle the content.

In modern Browsers, JavaScripts global Navigator object has a plugins property, filled with an array of Plugins, if you can find a Plugin for Mimetype application/pdf, you can safely assume that the browser will display pdf files inline, as long as the server does not explicit send content-disposition: attachment headers, of course.

§ 8.9.1.6 PDF viewing support
window.navigator.pdfViewerEnabled
Returns true if the user agent supports inline viewing of PDF files when
navigating to them, or false otherwise. In the latter case, PDF files
will be handled by external software.
MDN web docs article.
Browser compatibility table

You could send a HEAD request to that resource and check what Content-Type and Content-Disposition values are being sent back. Based on these information you could determine whether a browser would display or download that resource.

How do I download a file (instead of opening it) with JavaScript? [duplicate]

Is it possible to force a download through JS or Javascript i-e the web page should not open the file in new tab in the browser but to pop up to let the user to choose eith "save as" or open with ???

With the advent of HTML5 you could just use the new property download in the anchor tag.
The code will look something like
<a download="name_of_downloaded_file" href="path/to/the/download/file"> Clicking on this link will force download the file</a>
It works on firefox and chrome latest version. Should I mention that I didn't check it in IE? :P
Edited the download attribute after comment from sstur
https://caniuse.com/#feat=download

dynamic create link and click it with download attribute for force download as file:
var anchor = document.createElement('a');
anchor.href = this.props.download_url;
anchor.target = '_blank';
anchor.download = this.props.file_name;
anchor.click();
Take a notice that i didn't even added it to DOM, so it's fast.
P.S download attribute won't work with IE. But it will just open link in new tab.
http://caniuse.com/#feat=download

You can not force that behavior from JavaScript, the HTTP Headers need to be set on the server side:
Content-disposition=attachment; filename=some.file.name
The way you can solve the problem is to let your AJAX method redirect the user to the URL of the PDF:
location.replace('path/to.pdf');
(The above HTTP headers must be set for the PDF)
Update
At the time of this answer, it wasn't possible. Now it is, scroll down to see the other answer saying so.

No this is not possible with JQuery/JavaScript only.
You will need a server side script which returns you the file with a Content-Type (HTTP Header) which will force the browser to download your requested file. An possible value for Content-Type would be application/force-download.

No, it is not possible and thanks God it isn't. Otherwise I leave you to the imagination of what kind of files could be stored on your computer when you visit a web site without you knowing it.
As #Paul D. White pointed out in the comments section if you want to open the file inline (inside the browser) with the default program associated with it you could have the server send the Content-Disposition HTTP header. For example:
Content-Disposition: inline; filename=foo.pdf

html5 <a download> force "save as" dialogue

<html>
<body>
<a href="https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download> download</a>
</body>
</html>
Hello! Any suggestions to force save-as dialogue for image w/o .htaccess?

This is a browser (chrome ? ) feature.
Your users may configure it as they wish.
Neither you nor even FileSaver.js can do anything about it...

Adapted from the post:
force browser to download image files on click
Since the html5 'download' attribute will still only work for compliant browsers.
(As per #RichardParnaby-King's answer)
You can try:
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
(Thanks to #DrowsySaturn's answer)
It's also worth mentioning that since it's JS, some older browsers won't support this.
Since browsers each have their own way of handling links, generally browsers will aim to display an image if specified by a URL on an tag and not automatically download them. This is aimed to be rectified with the download attribute in HTML5 but obviously some browsers wouldn't have yet implemented (and some may never).
PS: Try search for your question first to prevent duplicates!

The most reliable approach is to force it on the server side.
For your convenience, the browser will automatically handle particular content in specific ways. In particular, the browser will automatically handle an image by displaying it inline, which is what you are trying to avoid.
How does the browser know that it’s an image, as opposed to some other content. The server sends a header to say so. In the case of png image, the server sends something like this:
Content-Type: image/png.
The trick is to get the server to also send a preferred method of handling the content. In your case you need a header like this:
Content-disposition: attachment; filename=…
This will tell the browser to download it.
A simple PHP script to do this would be something like this:
// assuming png
$filename=#_GET['filename'];
$data=file_get_contents($filename);
header("Content-disposition: attachment; filename=$filename");
header('Content-type: image/png');
print $data;

Solved by #Kaiido's comment:
This is a browser (chrome ? ) feature. Your user may configure it as
he wishes. i.stack.imgur.com/BvOD8.png And even FileSaver.js can't do
anything about it...
Most chrome-based browsers (Opera in my case) has this option enabled by default.

Is It Possibly to Access Firefox Save As Command Using JS?

I'm trying to figure out how to call the File Save As Command in Firefox
(the one you get when you right click an image and save it) to save an image using JS (or if there is something else I can use, I would be grateful if you pointed me in that direction). I am looking for an example of how to open the Save As menu and pre-fill the file name field ... I've been searching furiously and have come up with zip. In my search I saw that you cannot directly save a file to disk, but is it impossible to call the save as function? Any suggestions would be greatly appreciated!
Edit:
I'm not looking to make this code available to everyone, and the java script is client side, I'm just writing a small script to make saving photos a little easier in terms of naming them.
-Will

No you can't do this, and really you are trying to find a solution in a way that does not embrace the internet and the way people interact with content. What you are trying to do is call on Operating System operation from Javascript. If there were anyway this would be possible, I don't think it is at all, it would be a very poor solution. Think about all the different Operating Systems Firefox is being used on. If you found a solution for Windows 7, what about an Apple Mac running Firefox?
What you should consider is that a User decides whether to Save something to their computer, not the programmer of the application. Provide a link to the file, most users know how to right click a link and select Save As. Add help tip explaining what to do as well.
To give a File a specific name or even start an automatic download when a User clicks or takes some kind of action, you can create a response from your server that is a PDF,Excel,Jpeg,Doc,Docx or many other files types. The server can load the file in memory and sent it as a response with the proper header information in the response.
For example to set a specific name for the file when the user downloads you can set your Response header with something like:
header('Content-Disposition: attachment; filename="downloaded.pdf"');

You can use the anchor element's download attribute to specify that a link is to be downloaded. Note that this is not implemented in all browsers, Chrome, Firefox, and Opera currently support it
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
HTMLAnchorElement.download
Is a DOMString indicating that the linked
resource is intended to be downloaded rather than displayed in the
browser. The value represent the proposed name of the file. If the
name is not a valid filename of the underlying OS, browser will adapt
it. The value is a URL with a scheme like http:, file:, data: or even
blob: (created with URL.createObjectURL).
Demo
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
var link = document.getElementById("link");
//Set href to the data url that you want downloaded
link.href = "http://placehold.it/350x350";
//set download to the default filename you want to use
link.download = "image.png";
<canvas id="canvas" width="150" height="150"></canvas>
Click to download
You can also specify a regular url to a file, but note that if the server sends a filename header: Content-Disposition ... filename... that it will overwrite whatever you have in the download attribute.

Downloading a music file instead of playing it in the browser

I'm trying to make a downloader on my website which starts downloading the selected files but the problem is it is a music file which just opens up in a new window and starts playing it.
The script is (don't worry about the id part it is for the next part):
function downloadsong(id){
var url = ("/music/downloadablesongs/linkin-park/Minutes-to-Midnight/wake.mp3");
window.open(url,'Download')
}

If you can configure the server that hosts the files, you should be able to manipulate the HTTP headers to include a "Content-Disposition" header. This will prompt the user agent (browser) to save the file, rather than allow it to automatically detect/interpret the content.
The basic format is:
Content-Disposition: attachment; filename=$file_name.ext

It depends on the user's browser. Usually, plugins or built-in browser capabilities take over and play it instead of letting the browser download.
What you can do is to have the file carry no extension (ie. remove .mp3). That way, it won't be picked-up by plugins. The down side is additional work for the user, by having to add the extension manually.

Other way is simply use the download attribute. I think is the simplest way.
<a href="/music/downloadablesongs/linkin-park/Minutes-to-Midnight/wake.mp3" download>
See more here.