How do you actually download a picture when you click on it? Is there some kind of a javascript code to do just that? Here is how i show the image with pure HTML.
<img src="myPic.png" border="0">
Assuming by "download" you mean "Cause the user's browser to throw up the 'save or open' dialogue" — you can't.
You could link to another URL offering the same file but with the Content-Disposition header set to attachment. The specifics of how you would provide such a resource at that URL would depend on the server side capabilities on offer to you.
Most people right-click on the image and choose "Save image as..."
The alternate is to link to use a server-side script that sets a "Content-type" and "Content-disposition" header. In PHP, that would be something like this example from the docs:
header('Content-Type: image/png'); // or 'image/jpg' or 'image/gif'
header('Content-Disposition: attachment; filename="filename.png"');
readfile('original.png');
UPDATE: Since you say the image is generated by a PHP script in the first place, there are a few options:
Put the URL (sig.php?...) as the parameter to readfile. This will mean double processing for anyone who clicks to download.
Cache the output from your image generation script to the filesystem, then pass that file to readfile.
Edit the image generation script to accept an extra parameter like mode=download and then where you are about to output the image, if the parameter is present, set those two headers above.
I trick this out a bit - I zip the picture and put it somewhere. Then, instead of using a fancy script or server-side stuff, I make the picture's link the location of the .zip file. The user get's warned/asked if they want to download this zip and voila...
But this is usually in an area where the user is someone who would want the image...
Do you want to open the picture in a new window/tab? Or do you want to download it to the users computer? If you want the user to save the image, then you need to set the content-type of the file they receive:
<?php
$file = $_GET['file'];
header("Content-Type: application/octet-stream; ");
header("Content-Transfer-Encoding: binary");
header('Content-Disposition: attachment; filename="'.basename($file).'"');
readfile($file);
?>
Remember to check the input so people can't download source files.
Related
I am offering a pdf document in the form of a download from my website via a landing page.
I want to hide the URL/link that displays in the address bar and when i hover over the download button on the web page so that the link cant be shared.
What is the best way to do this? Please explain carefully.
Thanks
Ok, you cannot do that with plain HTML. You can use all kind of tricks but they can be a problem to the user experience, you are to use a server side language.
What you can do is create a php page, name it the way you want (let's say download.php), and link to that one. The page should be something like this:
// Path to the file
$path = '/home/folder/yourfile.pdf';
// This is based on file type of $path, but not always needed
$mm_type = "application/octet-stream";
//Set headers
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Type: " . $mm_type);
header("Content-Length: " .(string)(filesize($path)) );
header('Content-Disposition: attachment; filename="'.basename($path).'"');
header("Content-Transfer-Encoding: binary\n");
// Outputs the content of the file
readfile($path);
exit();
This way you just link to your download.php page and it downloads/opens the PDF, like so:
Download
Edited based on BenjaminC suggestions
The other chance you have is to connect this to a database. The database has a table named downloads_table and inside you have 2 fields:
secret: char(32)
downloaded: int(1) dafault 0
Then you create an md5 string
$secret = md5(rand(1000, 9999999));
Place it inside the secret field, create the link:
Download
The user receives/sees a link, when pressed you are to edit the first line of the above code to check in the db if downloaded field = to 0 than procede to download, otherwise the person sees an error page.
This is so that it can be downloaded only once.
(Edit)
If in the future, this gets useful for anyone, the functionality can be seen in this fiddle: https://jsfiddle.net/aznjr87g/
It downloads 2.1.3 jquery.min.js from google.
(Edit end)
This can be achieved using Html5 's Download attribute.
Download PDF
If you hover your mouse over that, it simply shows yoursite.com/#
Place this somewhere in the body of the webpage:
And place this somewhere in the webpage:
<script>
function download() {
document.getElementById("download").src = "/path/to/download";
}
<script>
Then, on the element of the button (In the example of a div) do this in the tag:
<div onclick="download()"> </div>
However if it's a link you will want to do:
An element needs a href to work properly.
HTML5 introduced a nice feature for marking <a> links as download endpoints, by simply adding download attribute to the <a> tag (see description).
Is it possible to do the same for HTML forms?
Here is a simple use case for example: I have a form that requests the user for some details, and after the user submits the form the server should return a file according to these details.
This is not possible.
According to the specification is the "download" attribute only specified for a and area.
http://www.w3.org/html/wg/drafts/html/master/links.html#downloading-resources
No, form doesn't have a download attribute, so it is not possible to have that exact behavior with a form.
You can set the output file name through a post though, by setting the Content-Disposition HTTP header:
Content-Disposition: attachment; filename="yourPicture.png"
Yes after submitting data you can return file in form of pdf or else.
By using header function
<?php
//create pdf with details
.....
.
.
// We'll be outputting a PDF
header('Content-type: application/pdf');
// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');
?>
But this is not possible using download attribute
In my website I stream users mp4 content. I also allow users to download.
However in Chrome it seems to automatically play the file in an internal player instead of downloading the file.
How do I force the browser to download the file instead.
Regards and thanks
Craig
You have to use the HTTP header "Content-Disposition" and 'Content-Type: application/force-download' which will force browser to download the content instead of displaying it there.
Depending upon the server side language you are having the implementation differs. In case of
PHP:
header('Content-Disposition: attachment; filename="'.$nameOfFile.'"');
will do the job for you.
Ofcourse to simplify and generalize this for all your files, you may need to write a method which will route a link to downloadable content.
The link you can show in the html will be like:
Click here to Download Hello.mp4
And in the server side, you need a script which is being called on /downloadFile (depending on your routing), get the file by id and send it to user as an attachment.
<?php
$fileId = $_POST['id'];
// so for url http://yoursite.com/downloadFile?id=1234 will download file
// /pathToVideoFolder/1234.mp4
$filePath = "/pathToVideoFolder/".$fileId."mp4";
$fileName = $fileId."mp4"; //or a name from database like getFilenameForID($id)
//Assume that $filename and $filePath are correclty set.
header('Content-Description: File Transfer');
header('Content-Disposition: attachment; filename="'.$filename.'"');
header('Content-Type: application/force-download');
readfile($filePath);
Here 'Content-Type: application/force-download' will force the browser to show the download option no matter what's the default setting is for a mime-type.
No matter what your server side technology is, the headers to look out for are:
'Content-Description: File Transfer'
'Content-Type: application/force-download'
'Content-Disposition: attachment; filename="myfile.mp4"
Sounds like you are using a direct href to the mp4. If you are using any server side languages (i.e.asp.net, php, etc) language on your website you can force a download. In asp or .net you can use HttpHandlers with "content-disposition","attachment; filename=fname.ext"
or return File() ActionResult in MVC. Let me know if you can use any server side code and I can provide some code.
Alternatively you can try the html5 download attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fa#attr-download
i.e. <a href="http://www.w3schools.com/images/myw3schoolsimage.jpg" download="downloadfilename">
Or, try javascript/jQuery. Here is a plugin: http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/
Setting the Content-Disposition header should fix it.
Content-Disposition: attachment; filename=whatever.mp4;
Either in the server settings or in the preprocessing of the page.
if you want a cross browser solution
you need a server-side code to download the file
example:
I am working on jsp technology, if you can use jsp in your website you can try the following code in the file download.jsp:
<%# page import="java.io.*, java.lang.*, java.util.*" %>
<%
String filename=request.getParameter("filename");
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition",
"attachment;filename="+filename);
%>
<%
/*
File file = new File(filepath+filename );*/
String path = getServletContext().getRealPath("/mp4/"+filename);
File file = new File(path);
FileInputStream fileIn = new FileInputStream(file);
ServletOutputStream out1 = response.getOutputStream();
byte[] outputByte = new byte[4096];
//copy binary contect to output stream
while(fileIn.read(outputByte, 0, 4096) != -1)
{
out1.write(outputByte, 0, 4096);
}
fileIn.close();
out1.flush();
out1.close();
%>
you can put the code above in a file: download.jsp
then in your page links you will use it like:
song1
with my best wishes to you
You can get it done in a couple of ways. I'm not sure you use IIS or apache and which server side language you are using, but the techniques are similar for all.
You can add the MIME type application/octect-stream to the extension .mp4 in your IIS or apache, sothat all files with extension .mp4 will be shown with a download prompt. This is the most easy and sure fire way of showing the "download" prompt.
Plz see the example below.
http://www.codingstaff.com/learning-center/other/how-to-add-mime-types-to-your-server
In the above example, instead of setting video/mp4 fpr .mp4 extensions, change it to application/octect-stream
Also, the same can be done via server side code as well, (PHP code). The code will be similar with ASP.NET also,please google for "force file download"
$file_url = 'http://www.myremoteserver.com/file.mp4';
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment; filename=\"" . basename($file_url) . "\"");
readfile($file_url);
Why not simply use download attribute? Today is the simplest way.
<a href="/images/myw3schoolsimage.jpg" download>
See more here.
I have this pdf file:
SA Pias - Margaça Branco.pdf
I use this to access it:
href="SA Pias - Marga%E7a Branco.pdf"
It opens OK in the browser, but when the user is going to save it, those "strange" characters appears.
Is there any way to appear the real name (SA Pias - Margaça Branco.pdf) when the user is going to save the pdf?
Could you use PHP ?
If yes,
You only need to change the link to something like:
href="file.php?strName=Branco"
Then on the file.php
You will have to add:
header('Content-Disposition: attachment; filename="SA Pias - Margaça Branco.pdf"');
Is there a way to have a button/link and when you click on it, it will take the current page location and download an HTML version of it? It will be an iframe too, and the link should just download the iframe's content. Thanks!
The following JavaScript will take the current document and provide it as a download link. Tested in Chrome, not sure about others. Keep in mind that IE has limits for DataURI size. Furthermore, you'll lose your external images/CSS/etc, unless you inject the base tag into the top of the head tag (or find some other way to roll in resources):
// create the link to trigger download
// you could alternatively fetch an existing tag and update it
var a = document.createElement('a');
// send as type application/octet-stream to force download, not in browser
a.href =
"data:application/octet-stream;base64," +
btoa("<html>"+ document.getElementsByTagName('html')[0].outerHTML +
"</html>");
a.innerText = "Download this page";
// put the link wherever you want
document.body.appendChild(a);
EDIT: also doesn't provide a filename, or a .htm at the end of the download link... hmph. Those things can only really be provided by the Content-Disposition header, and that requires sending a request off to the server, so... not a fantastic user experience, but the easiest way to get the exact page state as the user sees it.
All you need is a simple script that takes the file name as a param and generates a zip. Here is an example in PHP.