Downloading local data via HTML5 anchor `download` attribute not working

AeonSake commented 1 year ago

Currently, Firefox on iOS seems to not support saving data as file via the anchor download attribute. Serializing a Blob or inlining a data URL directly does not trigger a file download but sets the browser into an infinite loading state without ever finishing. If the data type is set to a preview-able type (e.g., application/json), the content is loaded as new page instead of being downloaded.

Steps to reproduce

Any HTML5 anchor element with a download attribute and the href attribute set to a data url. In the example, octet/stream is used to force a download rather than a content preview. Use application/json to reproduce the undesired content preview issue instead.

const data = {
  bool: true,
  str: 'test_string',
  val: 123.56,
  obj: {
    prop1: 'val1',
    prop2: [1, 2, 3]
  },
  arr: [1, 2, 3]
};

function download() {
  const blob = new Blob([JSON.stringify(data)], {type: 'octet/stream'});
  const url = URL.createObjectURL(blob);

  const el = document.createElement('a');
  document.body.appendChild(el);
  el.href = url;
  el.download = 'test.json';
  el.click();

  URL.revokeObjectURL(url);
  document.body.removeChild(el);
}

Example on JSFiddle: https://jsfiddle.net/uymk5xr0/2/

Expected behavior

Browser triggers a file download with the content given in the data URL. The data is saved as file with the given name in the download attribute and is listed in the download history.

Actual behavior

Browser starts a loading sequence briefly showing a loading bar but never finishes (refresh button is replaced with the cancel button). Loading process cannot be aborted until a new page is opened or the page is reloaded. No actual file is created.

Device & build information

Device: iPhone 13
iOS build version: 16.3.1 (20D67)
Firefox build version: 110.0 (27761)

┆Issue is synchronized with this Jira Task

estarner-sugarcrm commented 1 year ago

@AeonSake Any update or work around for this issue?

jeffreyazevedo commented 9 months ago

I'm running into this issue as well, seems to still be broken. @AeonSake did you by chance ever figure out a workaround here?

AeonSake commented 9 months ago

Haven't found a workaround for this issue, at least none that wouldn't impact UX on other browsers as well. It's unfortunate but I've given up on (fully) supporting iOS Firefox due to this issue.

osc707 commented 9 months ago

I am currently working on a fairly large project for Adobe (Express) and we are facing this issue.

We programmatically download an MP4 for a user, when they choose to export. Instead of downloading the file, it's opened in a separate player/tab for the user to view.

Our desired result would be like the other browsers, where the user gets prompted to save the file or it's downloaded.