title: Open/save client-side data in a client-side file in Cordova/PhoneGap
body: <p>I know I could potentially use the <a href="https://www.npmjs.com/package/cordova-plugin-file" rel="nofollow">Cordova File plugin</a>, but that seems to have multiple, platform-specific quirks (such as different directory structures) due to its low-level nature.</p>
  
  <p>Today I found <a href="https://stackoverflow.com/a/28647235/897968">this answer</a> that shows how to open a desktop browser's Save Dialog for the user to select where they want to save blob data, but it was <a href="/questions/tagged/dart" class="post-tag" title="show questions tagged &#39;dart&#39;" rel="tag"><img src="//i.stack.imgur.com/G1dzB.png" height="16" width="18" alt="" class="sponsor-tag-img">dart</a> code so I converted the idea to plain JavaScript:</p>
  
  <pre><code>function onSaveButtonClick() {
      var blob = new Blob(['abcd'], {type: 'text/plain'}),
          blobUrl = window.URL.createObjectURL(blob),
          a = document.createElement('a');
  
      document.getElementsByTagName('body')[0].appendChild(a);
      a.href = blobUrl;
      a.download = "file.name";
      a.click();
      a.innerHTML = blobUrl;
      window.setTimeout(function() {
          window.URL.revokeObjectURL(blobUrl);
      }, 1000);
  }
  </code></pre>
  
  <p><a href="https://s.codepen.io/friendfx/debug/obKdbZ" rel="nofollow">CodePen here</a></p>
  
  <p>(Also note that the <code>download</code> attribute of the <code>&lt;a&gt;</code> is <a href="https://dev.windows.com/en-us/microsoft-edge/platform/status/adownloadattribute" rel="nofollow">not supported by IE, but Edge</a> and in addition to that, IE seems to block the <code>a.click()</code> call.)</p>
  
  <p>In the code above, setting the <code>innerHTML</code> is only for debugging purposes and for production use, you may want to set <code>a.style.display = 'none'</code> to hide the anchor altogether. I am also aware that the <code>revokeObjectURL</code> call in a timeout is a bit of a code smell, but it seems to work in desktop Chrome and Firefox.</p>
  
  <p>Now the question is: <strong>How can I achieve the same in a Cordova app</strong>? I mean, letting the user choose the file save location via a stock Save As dialog so I don't have to add platform-specific code to my app? Running this code in a Cordova app on Android just displays the anchor but doesn't ask the user to save the file - even clicking the link (before or after the timeout) manually doesn't show it.</p>
  
  <h2>Update:</h2>
  
  <p>There is a related question here:</p>
  
  <p><a href="https://stackoverflow.com/questions/13754797/how-to-make-phonegaps-cordova-file-api-work-like-file-api-in-normal-browser">How to make Phonegap's (Cordova) File API work like File API in normal browser</a></p>
  
  <p>The only answer requires the user to install a separate (though free) app and is therefore a no-go as I'd like my app to be self-contained.</p>