I´m trying to use the 'download' attribute of a href to rename a file without extension, but it doesn't work.
<a href="/fileWithoutExtension" download="newName.pdf">
I tried with IE, Chrome and FF.
Any thoughts?
Thanks,
The download attribute only works in Chrome 14+ and Firefox 20+ so this May explain why you are not getting this to work. I suggest you do not use it as it is not yet widely used. Prefer some other alternatives.
You can check that your attribute is supported with this javascript code, taken from here : http://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
If you want to change the filename then just use a server-sided PHP script:
<?php
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="newFile.pdf"');
echo file_get_contents("your_original_file");
?>
and make your link like this
Related
I am using a download attribute in my link:
<a style="color:white" download="myimage" href="images/myimage.jpg">Download image</a>
It is working very well in almost all browsers. This means, if I click on the link the image is automatically downloaded. I tested it in safari 10.1.2 on my mac and it is working fine.
But on my friends mac who is working with safari 10.0.3 it is not working. He is saying that the image is only opening in a new window but not downloading.
Why is this happening and what can I do to make it work anywhere?
According to https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html, it was added in Safari 10.1:
HTML5 Download Attribute
The download attribute for anchor elements
indicates that the link target is a download link that downloads a
file, instead of a navigational link. When you click a a link with the
download attribute, the target is downloaded as a file. Optionally,
the value of the download attribute provides the suggested name of the
file.
It doesn't seem to be available in iOS Safari 11.1 though from my own testing, which has me a bit confused. I'd expect them to be equal in standards support, based on their similar version numbering.
try this code:
var element = document.createElement('a');
var clearUrl = base64.replace(/^data:image\/\w+;base64,/, '');
// element.setAttribute('href', 'data:attachment/image' + base64);
element.setAttribute('href', 'data:application/octet-stream;base64,' + encodeURIComponent(clearUrl));
element.setAttribute('download', 'filename.jpg');
document.body.appendChild(element);
element.click();
document.body.removeChild(element)
This is work for me in safari version 10.0.3
Please take a look at https://www.w3schools.com/TagS/tag_a.asp
Scroll down to attributes, and you will see that the DOWNLOAD attribute is only supported by HTML5, which, as it seems, your friend's version of Safari does not support. I recommend updating the program.
Alternatively, you can right-click on the image, then click Save As..., then download it that way.
#Jarla
I've an image that I want to download on IE. After looking at Google and several stackoverflow questions I found that the best solution for the other common browsers is the HTML5 download attribute:
<a href="/barImage.jpg" target="_blank" download>Foo</a>
But this attribute is not currently supported on IE. And it just opens a new tab with the image on IE (Because it's a known file extension)
Is there any way to force the download of an image file just using html and without zipping it or any other method of this kind?
Please don't indicate javascript libraries.
I think you will not get far without JS.
Microsoft supports this tag from the Edge browser. Do you really need it for older versions?
I just read something else. You can try to fill the download attributes with a filename, so:
... download="sample.png" ...
I found this Codesnippet (force browser to download image files on click):
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'sample.jpg';
document.body.appendChild(link);
link.click();
But I´m not sure, if this is correct...
Is there any fallback available for download attribute of Anchor tag to deal with IE ?
caniuse.com says it's not supported in any version if Internet Explorer.
Solution without JavaScript is preferable.
As of now, the download attribute is only supported in Chrome and Firefox. You could detect whether the attribute is supported using JavaScript.
var a = document.createElement('a');
if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
If you are dealing with text files then you could take a look at Downloadify, which is a javascript + Flash library that enables the creation and download of text files without server interaction. Check out this Demo that uses Downloadify.
I am trying to offer a download option of videos on my site.
I have direct links (which have .mp4/.webm ending) available for download (they are not hosted on my server if that matters).
This is what I tried:
<a href="http://stream.flowplayer.org/bauhaus/624x260.webm" download>Download</a>
It only works on chrome, in FireFox it will just open the video on the browser itself.
You need a wrapper script which sets the Content-Type Content-Disposition headers appropriately, and outputs the file you want to serve.
In PHP this would be done like this:
Filename: 624x260.php
<?php
// We'll be outputting a webm video
header('Content-type: video/webm');
// It will be called downloaded.webm
header('Content-Disposition: attachment; filename="download.webm"');
readfile('624x260.webm');
?>
You would then link to the PHP file instead, as follows:
Download
if you happen to have an apache server where you can edit the .htaccess file, add this line.
AddType application/octet-stream .webm
If you wish to not do this, you could do this through php as well.
PHP Code:
<?php
$file = $_GET['file'];
header ("Content-type: octet/stream");
header ("Content-disposition: attachment; filename=".$file.";");
header("Content-Length: ".filesize($file));
readfile($file);
exit;
?>
HTML Code:
Download the mp3
HTML5 adds the download attribute, which you have there in your example, but is empty. Add a value to the download attribute and hey presto.
ie change download to download="624x260.webm" in your a tag.
http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
For non-HTML5 compliant browsers, the most straightforward way would be to accompany the links with a direction to 'right click to download'. This would cover the majority of cases and browsers.
An overview of a couple of techniques here, I realise you can't zip the files.
http://webdesign.about.com/od/beginningtutorials/ht/download_link.htm
There are multitude more involved ways to do this, including modifying the web server config, but not everyone has the access / know-how to do that.
Note: The download attribute is supported in Chrome 14+ and Firefox 20+.
As an alternative for other browsers, you can use jQuery plugin from here
http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/4
OR
http://jqueryfiledownload.apphb.com/
You can make it downloadable like
Download
$(document).on("click", "a.download", function () {
$.fileDownload($(this).prop('href'))
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
return false;
});
I have the following line to display an image:
$output .= '<div><img src="C:/backup/images/000001_full.jpg"></div>';
($output is then put into an html file as a local backup). When I view the page with IE, the image is displayed fine, but not with firefox.
Any idea why?
Thanks,
Dave
I think you want:
$output .= '<div><img src="file://c:/backup/images/000001_full.jpg"></div>';
You need to close your img tag. So,
$output .= '<div><img src="C:/backup/images/000001_full.jpg" /></div>';
IE likes to play it kind of loose with HTML specs, but Firefox pays more attention to the standards.
Maybe because your src is not valid urlfor Firefox.
Have you tried file://c:/backup/images/000001_full.jpg ?
Why are you using a link to the file system location?
The image should be part of the site, and should be linked to as a relative URL such as \images\000001_full.jpg.
use relative path. i am also not sure but Something like $output .= '<div><img src="../images/000001_full.jpg"/></div>'
I reproduced this problem. The image displays in IE (and Chrome), but not in Firefox. The reason is because local files can't be accessed directly. Prefix the src tag with file:/// and it will work just fine as in:
$output .= '<div><img src="file:///C:/backup/images/000001_full.jpg"></div>';
It is not straight forward in Chrome and firefox.
Modern browsers due to security reasons do not allow you to show image from file system.
Steps:
1. set variable where your input type file is defined
HTML : <input type="file" id="image-input"/>
var fileInput = document.getElementById('image-input');
Get temporary file URI:
var uri = window.URL.createObjectURL(fileInput.files[0]);
Pass this Uri to the image src from Javascript. Problem solved.
Follow this link for help:
http://www.philliphaydon.com/2014/04/loading-an-image-or-video-from-a-file-input-control/