I almost feel ashamed to ask such a basic question, what with how i like to term my self a website genius when with friends this seems quite basic.
I'm trying to get visitors to my site to download an mp3 link=> "http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3". But the problem i'm facing is that it won't download unless one right clicks and selects "save link as" and i can't do anything about it since the file's not on my server. any help here?
You have two methods, one of which only works in Chrome.
Use the download attribute:
Though this is used in Firefox, it states:In Firefox 20 this attribute is only honored for links to resources with the same-origin. so it doesn't work.
Example:
<a href="http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3" download>Download Song</a>
Use your server as a proxy:
Example:
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment;filename=\"10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3\"");
readfile("http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3");
For this example to work, please enable allow_url_fopen.
In addition to this, I would recommend saving the song file on your server, so that new requests for this song can just be downloaded from your server again.
Related
I have a PDF file as a blob object. I want to serve to my users, and right now I'm doing:
html = '<iframe src="' + URL.createURL(blob) + '">';
That works fine for people that want to use their in-browser PDF tool.
But...some people have their browser set to automatically download PDFs. For those people, the name of the downloaded file is some random string based on the blob URL. That's a bad experience for them.
I know I can also do:
<a href="blobURL" download="some-filename.pdf">
But that's a bad experience for the people who want to use in-browser PDF readers, since it forces them to download the file.
Is there a way to make everybody have good file names and to allow everybody to read the PDF the way they want to (in their browser or in their OS's reader)?
Thanks
At least looking at Google Chrome, if the user disables the PDF Viewer (using the option "Download PDF files instead of automatically opening them in Chrome") then window.navigator.plugins will show neither "Chromium PDF Plugin" nor "Chromium PDF Viewer". If the option is left at the default setting, the viewer will show in the plugin list.
Using this method, one can utilize window.navigator.plugins to check if any of the elements' names are either of the aforementioned plugins. Then, depending upon that result, either display a <iframe> or a <a href="blobUrl" download="file.pdf">. For other browsers I imagine that different methods would have to be used. You can also check for a "Acrobat Reader" plugin, which some machines may have instead, or even just the word "PDF".
On a side note, it does look like it is possible to detect if the default Firefox PDF viewer is enabled by using http://www.pinlady.net/PluginDetect/PDFjs/ .
Try to append &filename=thename.pdf to the binary, metadata or http header:
Content-Disposition: attachment; filename="thename.pdf"
I have looked through the documentation of createObjectURL(blob), it will always return a unique and specific format of url. It is not possible to change the URL here.
The plugin thing is not consistent across browsers.
Now here is my radical idea
Find or create(if not available) a js library that can create and save PDF files to server from blob. (I looked through some of them like 'jsPDF','pdfkit' but none of them use blob)
Save the file to server with a valid name
use the above name in the iframe.
<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.
Let's say that I have some URL to an image on the web. Let's say the URL is http://www.gearheadwalls.com/wp-content/uploads/2013/07/Mercedes-Benz-S-Class-4.jpg
Now, when a user press the download button, the image should be downloaded.
I've tried this:
window.location.href = Link;
But sometimes it just opens the image on the browser and sometimes it is downloaded as I wanted.
How can I achieve this?
You can use the HTML5 download attribute on anchors :
<a href="http://www.gearheadwalls.com/wp-content/uploads/2013/07/Mercedes-Benz-S-Class-4.jpg" download="http://www.gearheadwalls.com/wp-content/uploads/2013/07/Mercedes-Benz-S-Class-4.jpg">
<img src="http://www.gearheadwalls.com/wp-content/uploads/2013/07/Mercedes-Benz-S-Class-4.jpg">
</a>
You need to pass appropriate headers in order to allow user to download the file. If you just provide the file link in the url the browsers interpret it differently. They may first try to open the file in the browser, if it fails the file will be prompt as force-download.
If you are using PHP, the headers in download script is something like:
header('Content-Type: ' . $mime_type);
header('Content-Disposition: attachment; file="'.$name.'"');
header("Content-Transfer-Encoding: binary");
header('Accept-Ranges: bytes');
header("Cache-control: private");
header('Pragma: private');
The full tutorial can be found here: www.phptutorialforbeginners.com/2013/04/file-download-script-in-php-php.html
You will have to set Content-Disposition header field, as suggested by http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html, if you want the image should not be handled natively by browser. If you use PHP, may be this link would help, http://w3schools.invisionzone.com/index.php?showtopic=39943
Only issue with this, you can't directly make apache serve you this file, as a normal static resource, or I don't know the way to do this Apache :)
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.
I want to show the Save as dialog box when a user clicks an HTML button.
I am using DOJO and JavaScript.
In IE document.exec comes to rescue but in Firefox one needs to make changes in filesystem to use NSI.
Any idea will be appreciated.
You can force the browser to download some data using a data url:
content = "This is the text for downloading";
window.location.href = "data:application/octet-stream,"+
encodeURIComponent(content);
The main problem with this is that the user will not be able to choose a filename and the generated filename is some random hash. If you don't mind using Flash, you could use Downloadify, this will give you more control over the Save dialog.
Have the HTML button href to a unknown document type. Say FileName.xxxblah.
This will automatically trigger the Save as Dialog.
It's not exactly what you're looking for, but the only reliable way I know of is to create a server side script on the server which will send the correct headers. In PHP this is how you'd do it:
header('Content-type: text/csv');
header('Content-Disposition: attachment; filename="mydocument.csv";' );
header('Content-length: '.(int)strlen($csvData));
print($csvData);
Content-type is the "mime type" of the document, and for compatibility with some browsers it's important this perfectly matches the extension of the filename.
Content-Disposition: attachment instructs the browser to download the page, even if it wouldn't normally do so for that mime-type, and you're able to provide the filename.
Content-length is the size of the download, this is optional but it must be provided if you want the user to see a progress bar for the download.
Some browsers will present a save as dialog, while others will simply save the file to the user's preferred download folder. You don't have much control over which will happen.