6

I'm developing a client side music player and am looking for a way to save playlists complete with the mp3 data.

localStorage The 5mb limit for localStorage rules that option out. I'm wondering what other options there are.

DataURIs I've read about dataURIs e.g. Is there any way to specify a suggested filename when using data: URI? and Cross-browser Save As .txt but not suggesting a default filename and particularly lack of IE support are dealbreakers.

IndexedDB HTML5 indexedDB and persistence lifetime suggests that IndexedDB is not an option for persistent storage.

Are there options I am missing? I hope so!

Thanks, Andrew

Community
  • 1
  • 1
user1977132
  • 487
  • 2
  • 18
  • 1
    So client-side only, no server involved? Then I don’t see why you would want to download/save the mp3 data as well, since it should be already on the client, right? And a 5 MB limit for playlists files only should be no real problem either. – CBroe Jan 22 '14 at 11:11
  • Open the file in a new browser tab with modified headers, something like `Content-Disposition: attachment; filename="playlist.txt"`. I believe this will always force the save as popup in browsers. – slash197 Jan 22 '14 at 11:13
  • The title and the question itself are asking different things. The question itself adds even more confusion, what is it exactly that you want? – gpgekko Jan 22 '14 at 11:15
  • Yes, client-side only. The mp3 data will be on the client, but I don't want users to have to select or drag and drop the individual mp3 files every time they load the player. If the file path to the individual mp3s could be saved and then loaded programatically then that would be fine but I didn't think that was possible. Am I wrong? – user1977132 Jan 22 '14 at 11:19
  • The title focusses on the UI I would like to achieve, which is a Save Playlist – user1977132 Jan 22 '14 at 11:22
  • 2
    @gpgekko it is quite clear to me: OP wants to let the user save a file using a pre-set filename. See [this](http://stackoverflow.com/a/9464202/1256925) and [this](http://stackoverflow.com/a/6943481/1256925) answer. OP just wants it for every browser, not just those that support the `download` attribute. – Joeytje50 Jan 22 '14 at 11:22
  • Sadly you aren't allowed to access local files by pathname. Only through `` and such. – MarijnS95 Jan 22 '14 at 11:22

2 Answers2

4

I now have a solution which works in IE, Chrome and Firefox, inspired by this: Javascript set file in download

The IE10+ solution uses msSaveBlob and the code is:

if (navigator.msSaveBlob) {
    var blob_object = new Blob([store_string], {type: mime_type});
    return navigator.msSaveBlob(blob_object, filename);

    }

For Chrome/Firefox it uses the download attribute:

else if ('download' in a) {
    blob_object = new Blob ([store_string], {type: mime_type});
    a.href = URL.createObjectURL(blob_object);
    a.setAttribute("download", filename);
    a.innerHTML = "downloading...";
    d.body.appendChild(a);
    setTimeout(function() {
        a.click();
        d.body.removeChild(a);
    }, 66);
    return true;    
}

I haven't yet investigated Safari, Opera or any mobile browsers...

Community
  • 1
  • 1
user1977132
  • 487
  • 2
  • 18
2

No - a cross-browser SaveAs solution is not possible.

Chrome, IE, & FF all support one (or multiple) ways to programmatically trigger the download (and saveAs dialog) of a file. Safari does not support this functionality.

Jeff Kynaston
  • 21
  • 1