i want to create wallpapers page for my website. and i want people can download by clicking on download button directly rather than image view in browser and user right click on that and then save as image. is there any solution with java script?
You need to force the content type of the image being sent by the server. There isn't a way to do this client-side.
Content-Type: application/octet-stream
Content-Disposition: attachment;filename=myimage.png
You can force a download via a PHP (or other server-side language) script like this:
$file = $_GET['file'];
header('Content-Description: File Transfer');
header("Content-type: application/octet-stream");//notice this content-type, it will force a download since browsers think that's what they should do with .exe files
header("Content-disposition: attachment; filename= ".$file."");
readfile($file);
Then in your JavaScript code you can direct users to this script with the GET variable file being populated by the JavaScript.
$('a.download_link').on('click', function (event) {
event.preventDefault();//prevent the normal click action from occuring
window.location = '/path/to/server-side.php?file=' + encodeURIComponent(this.href);
});
This will add a click event handler to any links that have the .download_link class to direct the browser to the PHP script above to force a download.
Just use a hidden iframe that you set the source attribute on when you click the button.
HTML
<input class="download" href="http://site.com/imageHandler.ashx" value="Download"/>
Javascript
$("input.download").click(function() { $("iframeID").attr("src", $(this).attr("href")); });
You also need to set the content-type using the custom image handler (whichever server-side language you are using)
Related
I have <a> and inside its href attribute, I've got a Video URL from a 3rd-party api, when clicking on that <a> the browser opens a New Tab and Play the video instead of Downloading it!
PROBLEM: What I need to achieve is to download the video directly after clicking on that <a> instead of playing it in a New Tab and force the user to Right Click then choose Save Video As option to download it manually... Just click on Download and the browser starts to download that video!
NOTE: I am building a JavaScript App, so I need a solution in JavaScript not PHP, it has to be working on all browsers as well...
EDIT: I tried the download attribute and it doesn't work, because it's Same-Origin Only!
UPDATE: The only solution I found was a +7 years old, it manipulates with the .htaccess file, you can check it at this CSS Tricks Article, it has a common issue, I can't have 2 links: Watch Video and Download Video using this solution... Many developers mentioned this bug there, but no one fixed it yet!
Since the endpoint supports CORS, you can use my file download lib to save the content instead of showing it.
download("http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4");
Online Demo: http://pagedemos.com/v84rawmzntzt/output/
you need to set headers such as Content-Disposition from the server as follows
Content-Description: File Transfer
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="filename.jpg"
to allow previewing and download you might append these headers depending on query parameter for example if the url has ?download, append these headers to tell the browser to download the file instead of viewing it.
You can't change the header of the 3rd party server.
You don't want to implement a server that could proxying the request and update the header.
The only solution I can see is download and handling the content in browser js with request or axiosthen propose it to user (but you have to keep it in memory which might not fit for large video)
As it is a Video URL from a 3rd-party api, you can resolve the problem in two ways:
Contact the api-provider, ask them to add the header "Content-Type: application/octet-stream".
Proxy the 3rd-party api, and add the header "Content-Type: application/octet-stream" in the proxy.
Yes, the key is to set content-type header in http response.
My best guess would be redirecting user to a separate page to force browser download the file instead of viewing it (image, video, pdf)
PHP Example using readfile function create a download.php file
<?php
$file = 'monkey.gif';
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.basename($file).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
}
?>
Hope that helps.
Source
I have to create a online time-table for the school. The part what is troubling me at the moment is not to be able to download a file by clicking on the filename.
I try to download a file by clicking on a button or a link with html/php maybe javascript but for javascript I should somehow combine php and javascript because javascript has no readfile-function.
Some of my attempts:
Download
This just shows the content of the file in the web browser but I am not able to download it. The content of my testmove.txt is testmove123, so I just see the text testmove123 in my browser.
Another example:
Javascript:
function download(file)
{
window.location=file;
}
+html:
<input type="button" value="Download" onClick="download('dateiupload/testmove.txt')" >
Makes the same.
Another example:
Javascript:
function download(path)
{
var ifrm = document.getElementById("frame");
ifrm.src = path;
}
+html:
<iframe id="frame" style="display:none"></iframe>
download
By clicking on "Download" the javascript function starts but nothing else happens and I see the same site.
Another example (with php):
Javascript:
function download(path)
{
var ifrm = document.getElementById(frame);
ifrm.src = "download.php?path="+path;
}
+html (same as above):
<iframe id="frame" style="display:none"></iframe>
download
+php (the reason my its more or less working):
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=".$_GET['path']);
readfile($_GET['path']);
This solution doesn't wait for a click from me and starts the download by starting the site.
A working solution I thought about would be to link to another site where the download automatically starts but its absolutely not how it have to be. I use $_POST variables on the site and I lose them when I leave the site and I can't come back after the download.
It must start the download by clicking on the filename.
You can download straight from the anchor tag by using the 'download' attribute.
<a href="dateiupload/testmove.txt" download>Download</a>
The filename of the downloaded file will be testmove.txt by default.
You can change the filename like this.
Download
More Details at w3Schools
You were correct to use those headers - as you can see, the file is being downloaded. The only problem now is to have it download when you want it to.
For a very simple solution, I would suggest setting up a download.php file that will be the page you download all files from. You would setup a GET parameter for this file and the URL would look something like this:
http://your-cool-site.com/download.php?filename=textmove.txt
Now inside download.php, you'll read that GET parameter which will be a filename, and then pass it eventually to the readfile function. This is the stage that you should think about enforcing some level of security as passing a path directly to the function could give people access to files that they shouldn't be looking at! Think about limiting the actual downloadable files to a limited selection of files or paths you know to be "safe" for people to download.
You'll also need to use the file name in the headers (and possibly even the size of the file to support displaying progress of the download).
Once you have this download.php file ready, you can place links to it from other pages in a very similar way that you have now:
Download File
Clicking on this link will make the request to download.php and when it gets the appropriate headers, the download will start.
I has a requirement like when user clicks on a download button instead of showing the content in browser, i want to save it to the localdisk(perticular location) of the user desktop. Is it possible to do??
If yes,Please help me with possibilities..
Thanks in advance
No a website can't decide where it can save something. Everything goes to download folder by default. You have to be using some sort of plugin with permissions or make like browser addon/extension.
If you want to prompt download then you could set send headers in php:
Content-Disposition: attachment; filename="fname.ext"
and
Content-Type: application/force-download
Or you could set attribute download to link in html
<a href="file.abc" download>Click Me</a>
Utility of HTTP header "Content-Type: application/force-download" for mobile?
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
http://www.php.net/manual/en/function.header.php
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
You shall just point the file name like this to download.
But you cannot decide the path by your code.
Download the File
Note : Do not try this in jsfiddle or in codepen because they will rename the link with their custom so that the file will be displayed within their output. So, try it in your web server or in your localhost.
How can I force the save file download dialog box when I click an <a> tag?. There is a PDF file available on a remote server and when a user clicks that link we want to download that PDF file to their local system.
Thanks
Normally when you link a file that file will always display inside of the browser because the browser loads it and automatically determines the content type based on the file extension. So when you click on a link like a jpg image pdf etc the browser knows it's an image/file and will display that file. You can of course always use the browser short cut menu and use the Save Target As option to save the file to disk.
If you want to do this automatically when a link is clicked from the server side, you have to send the file back yourself rather and add a couple of custom headers to the output. The way to do this is to use Response.TransmitFile() to explicitly send the file from your ASP.NET application and then add the Content Type and Content-Disposition headers.
So You neded to use headers liek below:
header('Content-Disposition: attachment; filename="filename.pdf"');
Here is an exapmle might help you :
http://www.west-wind.com/weblog/posts/2007/May/21/Downloading-a-File-with-a-Save-As-Dialog-in-ASPNET
change your header values..
Ex
header('Content-Disposition: attachment; filename="downloaded.pdf"')
path = "path/to/file.pdf";
$filename = "file.pdf";
header('Content-Transfer-Encoding: binary'); // For Gecko browsers mainly
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($path)) . ' GMT');
header('Accept-Ranges: bytes'); // For download resume
header('Content-Length: ' . filesize($path)); // File size
header('Content-Encoding: none');
header('Content-Type: application/pdf'); // Change this mime type if the file is not PDF
header('Content-Disposition: attachment; filename=' . $filename); // Make the browser display the Save As dialog
What he is looking for is not a open save dialogue while downloading something from the host.
He is looking to open a file from the client's file system. You must use the input type file, to do so. But you will not get much privileges to manipulate that using javascript.
And there is no way to prompt a window's save dialogue through standard html.
We need ActiveX or Flash to do it.
is there any way i could detect opening of download file dialog box on web pages like hyperlink click event occurs and download file dialog box appears.... ??
and can i edit the filename in it ...... like attaching some website name along with filename .... so when the user download any file it automatically rename in to website-filename.pdf etc pro-grammatically
can we use input tag for it ?? or have to make customcontrols for it ??
thanks if any help provided
take care.
regards,
newbiefreak
You can just make a hyperlink with its href to a regular file, your browser will prompt to download it.
As for renaming the file, all you could do is create a special page which sends the file contents and correct headers, and specifying another name. You'll have to send the content-disposition header, as such:
Content-disposition: attachment; filename=yourfilename.extension
You can send a Content-disposition header to force a file downlaod box and specify a default filename.
http://support.microsoft.com/kb/260519
In regards to editing the filename:
HTML5 introduces a new attribute for a tags: download.
Using it forces browsers that support the attribute to prompt for a file download, rather than navigating to or attempting to open the linked file.
Also, whatever you value you assign to download will replace the file's actual name.
Source and demo: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download