Problems saving in iOS Safari

[gawry]

Edit by @eligrey: Please tell Apple how this bug is affecting you in https://bugs.webkit.org/show_bug.cgi?id=102914 if you want this fixed.

Edit by @jimmywarting
The safari bug #102914 has been marked as fixed now

according to the commit position, download attribute is fixed in WebKit v602.1.27.
The latest beta build (Safari Technology Preview) is based on WebKit v602.1.25, and of course doesn't contain this patch, so there's no simple way to test.

In the meantime, if you want to support Safari 7, you'll probably want to use Downloadify (uses Flash, not HTML5).

---

Issues we have had with Safari

• Blob is not supported
  
  This has been solved with Blob.js using BlobBuilder as fallback and then base64 data uri if that are not supported either
• URL.createObjectUrl
  Has been covered by both FileSaver.js and blob.js
  Blob.js overrule createObjectUrl with it's own base64 url constructor only if it's a "fake blob" (i.e not a File or Blob representation) it will use window.URL, fallback to window.webkitURL or use it's own base64 function to create those "fake blobs" data-uri
• The "can't open blob url" issue (partly supported) - screenshot

            The page you opened redirected you to a page that isn't supported by safari
Safari can't open the page becuse Safari can't be redirected to address that begin with "blob:".

• This is mostly cased by unsupported mime type, Safari do support opening blob url, but only if it's a mimetype that safari can understand like simple plain/text or a common image like image/png.
  • This will result in a new tab from which the user can just hit ⌘+S to save it
• ATM FileSaver.js looks at the mimetype to see if it is application/octet-stream (wish is commonly used to force saving files from the server)
  If it's then it read the blob as base64 using FileReader to open a data:attachment/file" + base64 url in order to save it.
  • It's not possible to create a blob with attachment/file type directly and open it, then you will get errors like this: Failed to load resource: Frame load interrupted it has to be base64 for some reason...
  • the resulting filename will be "unknown" when doing this
• The blank page error partial supported - (formuly known as "can't open blob url", see above)
  
  This can easily be reproduced by doing:

window.onclick = function(){
    var blob = new Blob(["Hi"], {type: 'application/octet-stream'});
    var url = URL.createObjectURL(url);
    window.open(url);
}

If you replace window.open with location.href = you will get the Failed to load resource: Frame load interrupted and be unable to save the file that is not the case for all mimetype, mimetypes that Safari can display can be opened this way

A little side note here is that window.open only works on trusted events meaning:

• It will only be able to open the url when user interacts with the website like a onclick event (more about isTrusted event here - almost pointless becuse browser support)

I have also found out that the trusted event persist for 1000 ms, so you could do:

window.onclick = function(){
    setTimeout(function(){
        var blob = new Blob(["Hi"], {type: 'application/octet-stream'});
        var url = URL.createObjectURL(url);
        window.open(url);
    }, 950); // Any longer then 1sec will make the window.open blocked again
}

So the conclusion here about safari is

1. download attribute in safari is not supported
2. It will try other means to save the blob by opening a new url
3. If the mimetype can be rendered by safari it will be able to display it in a new tab
4. If the mimetype is application/octet-stream:
   
   4.1 Create a base64 link with FileReader api
   
   4.2 try to open a new tab using window.open + base64 url
   
   4.3 if it was more then 1 sec before the user interaction happened it will use the current page instead
   but that is likely going to fail because (see first example using location.href) Failed to load resource: Frame load interrupted This may still work if the mimetype is not application/octet-stream and the saveAs was not called synchronous
5. Safari don't have anything like msSaveAs()
6. safest way to force the file to be saved is to have a data:attachment/file" + base64 ready and open that link using window.open() when the user interacts with the website (or at least to it under 1 second)
7. when saving it as a attachment filename will be "unknown"

[noway]

Your Blob.js uses native blob constructor in Google Chrome, no?
This is defined by this line:

if (typeof Blob !== "function")

[ggozad]

I can verify that Filesaver does not work with 6.0.2. Safari does have a native Blob constructor.
When Blob.js is not included, a new window opens with a blob: url which safari cannot open.
If Blob.js is included, a data: url opens. However the data seems to be the base64 representation of toString of the datea used to construct the blob. In my case where I construct from an array of bytes, I get [object Uint8Array].

Both Chrome, as well as Firefox (opening in a new window as blob) work as advertised.

[bendavis78]

Does anyone know of a workaround for this?

[marktheunissen]

This doesn't work on Safari. I suggest updating your REAME.md file so that people are aware of the regression.

[eligrey]

As I do not have a Mac, I really have no idea what exactly is causing the issue. It's up to you Mac users to fix this or donate a Mac/MacBook to me.

[eligrey]

Apparently just mentioning an issue in a commit closes the issue. I didn't mean to do that.

[marktheunissen]

Thanks for updating that. Mountain Lion does run in VirtualBox, if you're interested.

http://www.macbreaker.com/2013/01/iatkos-ml2-mountain-lion-virtualbox.html

[eligrey]

I used to run OSX in VirtualBox and updates to VB or OSX broke compatibility every so often, so I'd rather not. The lack of hw acceleration is also pretty important.

If you are not a developer you can pay someone who is and owns a Mac to fix this bug if donating a MacBook to me is too much for you. Frankly, seeing as FileSaver.js is a tool for developers most of you are probably developers and you should have no trouble debugging the issue at hand.

[Keyamoon]

I tried to reproduce and fix this issue but everything works fine for me in Safari 6 on OS X.

[eligrey]

@gawry @noway421 @ggozad @bendavis78 @Buttyx @marktheunissen Are you using Blob.js? Is URL, DOMURL, or webkitURL defined in Safari 6? If not, then I can guess that there is no issue and that everyone here is just neglecting to include Blob.js. The Blob API is not solely the Blob constructor, but also the URL.createObjectURL utility. If a browser does not support both of these things, then it needs Blob.js.

[marktheunissen]

@eligrey I'm using Safari 6, and doing testing on the demo page: http://eligrey.com/demos/FileSaver.js/

When clicking the 'Save' button, a new tab opens with the text in it and the url "data:text/plain..." in the address bar.

[eligrey]

@marktheunissen Thanks. Is URL, DOMURL, or webkitURL defined? If none of those are defined then it seems to be working properly.

[marktheunissen]