Member Avatar for Beggersewen

Is there a way to make a link download an image instead of opening in on the browser?

  • 3 Contributors
  • 6 Replies
  • 291 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by harishjan29

Dani AI

Generated

Short answer: there are two practical approaches. The HTML5 download attribute (what discovered and reposted) is the easiest for same-origin static files, but it has same-origin and browser-compat limitations. For predictable, cross‑browser behavior use a server-side response header (what suggested) — set Content-Disposition: attachment and the browser will treat the resource as a download. (developer.mozilla.org)

If you control the server, the most reliable method is to return the file with the Content-Disposition header and an appropriate Content-Type/Content-Length. Example (PHP):

<?php
$file = '/path/to/image.jpg';
if (is_file($file)) {
  header('Content-Type: image/jpeg');
  header('Content-Disposition: attachment; filename="image.jpg"');
  header('Content-Length: ' . filesize($file));
  readfile($file);
  exit;
}
?>

Include filename* or a fallback if you need non-ASCII names; also validate input to avoid path‑traversal. (developer.mozilla.org)

For Node/Express you can use the helper that sets the header for you:

const path = require('path');
app.get('/download', (req, res) => {
  const file = path.join(__dirname, 'files', 'image.jpg');
  res.download(file, 'picture.jpg', err => { if (err) console.error(err); });
});

If you serve static files from Apache or Nginx, add the header at the server level (example .htaccess / Header set or add_header) so downloads are forced without touching app code. (expressjs.com)

If you must fetch a cross‑origin resource from the client, fetch it with CORS, convert to a Blob and trigger a download programmatically (creates a same-origin blob URL):

fetch(url, { mode: 'cors' })
  .then(r => r.blob())
  .then(blob => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'image.jpg';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(a.href);
  });

Test across browsers (mobile Safari, older browsers) and prefer server-side Content-Disposition for the most consistent user experience. (developer.mozilla.org)

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

Yes, you can link to a page instead of the image file itself, then using server side code, code your response headers so that the image is downloaded as an attachment.

Member Avatar for Beggersewen

Can it be done using just html?

Member Avatar for JorgeM

No, html is just markup. You have to either control this via server side code as I described above, or change the behavior on the web server regarding how it handles requests for .jpg|.png|.gif files.

Member Avatar for Beggersewen

Hey found this online. This seems to work just fine. Thanks!

<a href="link to file" download>Anchor Text</a>
Member Avatar for JorgeM

Hmmm. Wasn't aware of this new HTM5 attribute. Take a look here at its current support. It's not widely supported by all browsers at the moment.

http://caniuse.com/download

Member Avatar for harishjan29

<a href="path of ur link" download>Click to Download</a>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.