2025-09-06

Force iOS Safari (and other browsers) to download media file

💡 How to Force File Downloads in Safari Using JavaScript (JS-Only Solution)

Safari has a mind of its own when it comes to downloading media files. Even if your server correctly sets Content-Disposition: attachment and Content-Type: application/octet-stream, Safari might still display files like PDFs, MP4s, or images instead of downloading them.

If you’re a frontend developer looking for a JS-only workaround that actually works, this post is for you.

🧠 Why Safari Ignores Content-Disposition

Safari uses its own internal logic to decide whether to show or download a file. If it recognizes the MIME type (like video/mp4, application/pdf, image/jpeg), it often overrides your server headers and opens the file inline.

That’s frustrating — especially when all you want is a reliable download button.

✅ The Reliable JavaScript Solution

By using the Fetch API to grab the file as a Blob, and then simulating a click on a dynamically created <a> element with a download attribute, you can bypass Safari’s preview behavior entirely.

🧪 Code Example

<button id="download-btn">Download File</button>

<script>
  function forceDownload(url, filename) {
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.blob();
      })
      .then((blob) => {
        const blobUrl = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = blobUrl;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl);
      })
      .catch((error) => {
        console.error("Download failed:", error);
        alert("Download failed.");
      });
  }

  document.getElementById("download-btn").addEventListener("click", () => {
    // Adjust the URL and filename as needed
    forceDownload("/download/video.mp4", "my_video.mp4");
  });
</script>