Downloading files in JavaScript on mobile Chrome on iOS

Question

I have a JavaScript program that converts a canvas to an image and downloads it as a jpg file. It works on desktop Chrome and Safari and iOS Safari, but on iOS Chrome the filename is not used and the downloaded file is simply called "document". If I rename it to "document.jpg" manually I can see that the data is fine.

How do I get iOS Chrome to save the file using a given name?

Here is the Javascript code I have written:

    var dataURL = capture.toDataURL('image/jpeg', 0.8);
    // console.log(dataURL);
    var link = document.createElement("a");
    link.href = dataURL;
    link.download = "elfie.jpg";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

Note that I set the mime type in the toDataURL command and the downloaded filename in the link.download command. As I say, iOS Chome seems to ignore the filename and just calls the it "document".

Thanks for your help.

Answer 1

As of Q1 2022, I believe this is currently impossible.

See my answer here for details.

The short version is: writing files to disk on mobile browsers sucks very badly for almost all major browsers on the major mobile platforms.

---

Note: I would have preferred to handle this by voting to close this question as a duplicate of the question I linked, but my answer there has not been accepted, so StackOverflow won't let me do that.