在 IOS (Iphone/Ipad) 移动浏览器上自动下载存储在 S3 中的图像

Question

Hope you guys are doing fine.

We are developing a functionality where customers can click on the download button and download an image. Image is stored in S3 and a public URL is generated which is kept behind the button.

Something like

<a href="S3Url">Download</a>

Current exp: When customer clicks on the download button

• For desktop - windows / IOS (Mac) - auto download is happening
• When we are trying on android mobile browser - auto-download is happening
• When we are trying on IOS mobile browser (iPhone/Ipad), the file is just opening, no auto-download.
• When we are trying on the mobile browser using a chrome toggle device on MAC(which technically acts as a mobile browser) - auto-download is happening.

So need assistance on

• Whether it's possible to auto-download the image in iPhone/Ipad browser using the S3 public link? If yes how can we achieve it?

Note:

• Code written is in JavaScript to trigger the download.

Sample:
var downloadElement = document.createElement('a');
downloadElement.href = S3Url;
downloadElement.click();

• Browsers tried are chrome, firefox, and safari. Experience is the same across browsers.

Answer 1

You can try adding the download attribute to your links. This allows it work correctly for me using Safari.

Something like this, perhaps:

var downloadElement = document.createElement('a');
downloadElement.href = S3Url;
downloadElement.download = "filename.jpg";
downloadElement.click();

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download