Create a download link from a Blob URL

Question

In a Google chrome extension I am working on, a file is downloaded from a server with an XMLHttpRequest. This file contains some binary data which are stored in an ArrayBuffer object. In order to provide the possibility to download this file I am using the createObjectURL API.

function publish(data) {
  if (!window.BlobBuilder && window.WebKitBlobBuilder) {
    window.BlobBuilder = window.WebKitBlobBuilder;
  }
  var builder = new BlobBuilder();
  builder.append(data);
  var blob = builder.getBlob();
  var url = window.webkitURL.createObjectURL(blob);
  $("#output").append($("<a/>").attr({href: url}).append("Download"));

}

It is working fine; except that the filename is an opaque UUID like 9a8f6a0f-dd0c-4715-85dc-7379db9ce142. Is there any way to force this filename to something more user-friendly?

BlobBuilder is outdated. Use the Blob constructor.

markasoftware
– markasoftware

2013-03-07 04:37:33 +00:00
Commented Mar 7, 2013 at 4:37 — markasoftware
– markasoftware, Commented Mar 7, 2013 at 4:37

rmanna · Accepted Answer · 2012-06-11 23:22:39Z

12

you can force an arbitrary filename by setting the "download" attribute of your anchor

see: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

answered Jun 11, 2012 at 23:22

rmanna

1,20215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kijewski · Accepted Answer · 2012-05-25 21:26:12Z

7

I have never tried it before, but it should be possible to create a new File object (which allows you to specify a file name) and write your blob to it. Something along the lines of:

function publish(data, filename) {

    if (!window.BlobBuilder && window.WebKitBlobBuilder) {
        window.BlobBuilder = window.WebKitBlobBuilder;
    }

    fs.root.getFile(filename, {
        create: true
    }, function (fileEntry) {

        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function (fileWriter) {

            fileWriter.onwriteend = function (e) {
                console.log('Write completed.');
            };

            fileWriter.onerror = function (e) {
                console.log('Write failed: ' + e.toString());
            };

            var builder = new BlobBuilder();
            builder.append(data);
            var blob = builder.getBlob();
            fileWriter.write(blob);

        }, errorHandler);

    }, errorHandler);
}

I think this could work for you.

edited May 25, 2012 at 21:26

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

answered May 20, 2011 at 18:55

sergio

69k11 gold badges105 silver badges123 bronze badges

1 Comment

Jcs Over a year ago

Thank you, our solution works. Actually I already looked at this API but the toURL() method of the FileEntry interface didn't seem to work. After some googleing I figured out that this method has been renamed toURI() on Chrome.

Collectives™ on Stack Overflow

Create a download link from a Blob URL

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related