Download data url file

Question

I m playing with the idea of making a completely JavaScript-based zip unzip utility that anyone can access from a browser  They can just drag their zip directly into the browser and it ll let them download all the files within  They can also create new zip files by dragging individual files in   I know it d be better to do it serverside  but this project is just for a bit of fun   Dragging files into the browser should be easy enough if I take advantage of the various methods available   Gmail style   Encoding decoding should hopefully be fine  I ve seen some as3 zip libraries so I m sure I should be fine with that   My issue is downloading the files at the end   window location    data jpg image base64  9j 4AAQSkZJR         this works fine in firefox but not in chrome    I can embed the files as images just fine in chrome using  lt img src  data jpg image ba      gt   but the files won t necessarily be images  They could be any format   Can anyone think of another solution or some kind of workaround

User · Answer

Here is a pure JavaScript solution I tested working in Firefox and Chrome but not in Internet Explorer:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

Cross-browser solutions found up until now:

downloadify -> Requires Flash

databounce -> Tested in IE 10 and 11, and doesn't work for me. Requires a servlet and some customization. (Incorrectly detects navigator. I had to set IE in compatibility mode to test, default charset in servlet, JavaScript options object with correct servlet path for absolute paths...) For non-IE browsers, it opens the file in the same window.

download.js -> http://danml.com/download.html Another library similar but not tested. Claims to be pure JavaScript, not requiring servlet nor Flash, but doesn't work on IE <= 9.

User · Answer

For anyone having issues in IE   Please upvote the answer here by Yetti  saving canvas locally in IE  dataURItoBlob   function dataURI        var binary   atob dataURI split      1        var array           for var i   0  i  lt  binary length  i              array push binary charCodeAt i              return new Blob  new Uint8Array array     type   image png        var blob   dataURItoBlob uri   window navigator msSaveOrOpenBlob blob   my-image png

User · Answer

Ideas    Try a  lt a href  data       target   blank  gt   Untested  Use downloadify instead of data URLs  would work for IE as well

User · Answer

x000D   x000D  function download dataurl  filename    x000D    var a   document createElement  a    x000D    a href   dataurl  x000D    a setAttribute  download   filename   x000D    a click    x000D    x000D   x000D  download  data text html HelloWorld     helloWorld txt    x000D   x000D   x000D    or    x000D   x000D  function download url  filename    x000D  fetch url  then function t    x000D      return t blob   then  b   gt   x000D          var a   document createElement  a    x000D          a href   URL createObjectURL b   x000D          a setAttribute  download   filename   x000D          a click    x000D        x000D         x000D      x000D    x000D   x000D  download  https   get geojs io v1 ip geo json   geoip json   x000D  download  data text html HelloWorld     helloWorld txt    x000D   x000D   x000D

User · Answer

Want to share my experience and help someone stuck on the downloads not working in Firefox and updated answer to 2014  The below snippet will work in both firefox and chrome and it will accept a filename        Construct the  lt a gt  element   var link   document createElement  a      link download   thefilename       Construct the uri   var uri    data text csv charset utf-8 base64     someb64data   link href   uri    document body appendChild link     link click         Cleanup the DOM   document body removeChild link

User · Answer

This can be solved 100  entirely with HTML alone   Just set the href attribute to  quot data  mimetypeheader   url  quot    For instance     lt a     href  quot data video mp4 http   www example com video mp4 quot      target  quot  blank quot      download  quot video mp4 quot   gt Download Video lt  a gt   Working example  JSFiddle Demo  Because we use a Data URL  we are allowed to set the mimetype which indicates the type of data to download  Documentation   Data URLs are composed of four parts  a prefix  data    a MIME type indicating the type of data  an optional base64 token if non-textual  and the data itself   Source  MDN Web Docs  Data URLs    Components    lt a     gt    The link tag  href  quot data video mp4 http   www example com video mp4 quot    Here we are setting the link to the a data  with a header preconfigured to video mp4   This is followed by the header mimetype   I E   for a  txt file  it would would be text plain   And then a comma separates it from the link we want to download  target  quot  blank quot    This indicates a new tab should be opened  it s not essential  but it helps guide the browser to the desired behavior  download  This is the name of the file you re downloading

User · Answer

There are several solutions but they depend on HTML5 and haven t been implemented completely in some browsers yet  Examples below were tested in Chrome and Firefox  partly works     Canvas example with save to file support  Just set your document location href to the data URI  Anchor download example  It uses  lt a href  your-data-uri  download  filename txt  gt  to specify file name

User · Answer

Your problem essentially boils down to  not all browsers will support this    You could try a workaround and serve the unzipped files from a Flash object  but then you d lose the JS-only purity  anyway  I m not sure whether you currently can  drag files into browser  without some sort of Flash workaround - is that a HTML5 feature maybe

User · Answer

If you also want to give a suggested name to the file  instead of the default  download   you can use the following in Chrome  Firefox and some IE versions   function downloadURI uri  name      var link   document createElement  a      link download   name    link href   uri    document body appendChild link     link click      document body removeChild link     delete link      And the following example shows it s use   downloadURI  data text html HelloWorld     helloWorld txt

User · Answer

Combining answers from  owencm and  Chazt3n  this function will allow download of text from IE11  Firefox  and Chrome    Sorry  I don t have access to Safari or Opera  but please add a comment if you try and it works    initiate user download   function file name  mime type  text           Anything but IE works here     if  undefined     window navigator msSaveOrOpenBlob            var e   document createElement  a            var href    data     mime type     charset utf-8     encodeURIComponent text           e setAttribute  href   href           e setAttribute  download   file name           document body appendChild e           e click            document body removeChild e                IE-specific code     else           var charCodeArr   new Array text length           for  var i   0  i  lt  text length    i                var charCode   text charCodeAt i               charCodeArr i    charCode                    var blob   new Blob  new Uint8Array charCodeArr     type  mime type            window navigator msSaveOrOpenBlob blob  file name               Example  initiate user download  data csv    text csv    Sample Data Here n1 2 3 n

[javascript] Download data url file

Examples related to javascript

Examples related to data-uri