Note that there are some explanatory texts on larger screens.

plurals
  1. PODoes forcing file download with php headers affect my bandwidth?
    primarykey
    data
    text
    <p>I was looking for a front-end js solution to this problem/concept of forcing file downloads in the browser. Basically, I want to make the browser download a file via some js event. I know in HTML5 we have the download property but its only supported in Chrome and the end-user still has to actually click on the link and I can't trigger it. But the lack of browser support is more problematic for my needs.</p> <p>So, I thought that I would use PHP and "Content-Disposition: attachment" which is working great but now that it's server side code I wonder if it will affect my bandwidth. The files downloaded are external and do not live on my servers.</p> <p>Also, while "download.php?file=http://domain.com/image.jpg" downloads the file for me, I can't figure out how to initiate a download via an ajax request to "download.php?file=http://domain.com/image.jpg"</p> <p>Any ideas?</p> <p>Here is a part of the php code:</p> <pre><code>header("Content-Disposition: attachment; filename=\"".basename($filename)."\";" ); header("Content-Transfer-Encoding: binary"); readfile("$filename"); </code></pre> <p>Ok, well one way to initiate a download on the front-end is to apply a X-Frame-Options header to download.php and then open the image in an iframe, as in add this to download.php:</p> <pre><code>header('X-Frame-Options: DENY'); </code></pre> <p>And then do this with JS/jquery:</p> <pre><code>$("body").append(&lt;iframe src="download.php?file=http://domain.com/image.jpg"&gt;&lt;/iframe&gt;); </code></pre> <p>But I am still using download.php and will get a bandwidth cost so it's not ideal. Any other ideas? I just want to display a bunch of images on the page and allow the user to click one button to download them all. Images are not hosted by me and I don't want to take the bandwidth hit.</p> <p>In terms of the download HTML5 attribute and not being able to trigger it, the jquery click or trigger click fails but this code did allow me to trigger the download programmatically:</p> <pre><code>var clickEvent = document.createEvent("MouseEvent"); clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); $("a")[0].dispatchEvent(clickEvent); </code></pre> <p>But, this download attribute is only supported in Chrome, so I am getting closer but not there yet. Anyone?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload