Why the download link is opening the image - javascript

The code has to download a file but it opens the file .What I am doing wrong ?
<html>
<body>
<p>Click on the Image to download the image:<p>
<a href="/website/image1.jpg" download>
<img src="/website/image1.jpg" alt="Image" width="104" height="142">
</a>
</body>
</html>
The above code opens the file and doesn't download.

This attribute only works for same-origin URLs.
If/when 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. research link
So simple solution regarding this issue. You just need to put your html file into a server.

Try adding
<!DOCTYPE html>
to the top of your file, for letting your browser know that you are using HTML5.

The download attribute is not totally supported by browsers, take a look at https://caniuse.com/#feat=download.
To be sure that browser will offer user to save file instead of opening it inside the browser window you should serve image from the server with content-type set to application/octet-stream.
The proper way to set header depends on backend technology stack you use.
Probably the easiest way to do it is to check the request at web server layer and then add header. For example, the config for nginx could be something like that:
location ~* .\?download$ {
add_header Content-Type application/octet-stream;
}
This should open image.jpg in browser as usual, but image.jpg?download should offer user to save it.
The syntax of config file should be checked, I'm not very sure about it.

The code looks fine to me.
But, please remind that download attribute its not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).
Edit: Maybe it's because of the declaration of an HTML document missing.

Related

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.

Downloading text file with Javascript

I have been trying to download a text file with javascript. I'm using this code:
HTML:
<a id="save_file_local" download="data.local">Save file</a>
Javascript:
save_file_local.href="data:text/plain,"+encodeURIComponent(response);
save_file_local.click();
Well, it works perfect with all extensions I have used.. but only with ".local" extension, I get a file with this name: data.download
I really need to download the ".local" file, so to change of extension is not a solution for me.
It works perfectly with Internet Explorer 10, but not with Chrome or Mozilla.
I have been searching without luck... so Thanks for your help!
From an alternate question:
<a href="path/to/file" download>Click here to download</a>
Thought no way to do this completely cross browser apparently.
This depends on your browser and on the Server.
If a Server sends the "Content-type: text/plain" the most browsers will display it. Its nothing you can change with javascript.
As evu suggested, you could use the HTML5 download attribute, although it isn't widely or consistently supported yet. Chrome give priority to the download attribute, but Firefox gives priority to the http header Content-Disposition. However, if it's content you generated in JavaScript, then the download attribute should work.
If you've got access to the server, setting Content-Disposition: attachment; in your http header would be a much better solution.

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.

Force download through js or query

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

Categories

Resources