3

I have a blob which I've stored in Azure blob storage (using the development emulator).

Its all saved and I can see it in the server explorer in the blob store (file.mp3 if that matters).

I'm then linking to it in my site but when I click the link I'm getting a 206 (partial content) back (and obviously no file). If I right click save as everything is happy and the file downloads.

enter image description here

I'm sure this is something pretty noobish that I'm missing but I cant see it.

undefined
  • 33,537
  • 22
  • 129
  • 198

1 Answers1

2

That is because, browser does not download media file as whole, browser requests Range for which Blob Storage correctly responds with one byte and with headers. This is called HTTP streaming, where parts of file will be downloaded in ranges and will be played progressively. In this form of streaming you can skip parts of file and go to end to play the end part of media without downloading whole file.

Imagine you are watching a big movie, and that movie is of 100 MB. And you want to watch last One minute of it, you can move player's tracker forward on timeline and browser will only download last few megabytes as per the timeline structure in Media file. Usually MP4 & similar media containers support file byte position tracking.

Browsers & most media players try to stream the media file if possible.

You can try following download attribute, Reference: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

<a href="http://www.google.com/.../logo2w.png" download="MyGoogleLogo">download me</a>

You can try following code, from this answer, Reference: Chrome extension: How to save a file on disk

var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');


/**
 * Converts the Data Image URI to a Blob.
 *
 * @param {string} dataURI base64 data image URI.
 * @param {string} mimetype the image mimetype.
 */
var dataURIToBlob = function(dataURI, mimetype) {
  var BASE64_MARKER = ';base64,';
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  var bb = new this.BlobBuilder();
  bb.append(uInt8Array.buffer);
  return bb.getBlob(mimetype);
};
Community
  • 1
  • 1
Akash Kava
  • 39,066
  • 20
  • 121
  • 167
  • Is there a way to tell it to download the whole file, I want to have a save link for an audio file so people can play it later. Also i understand how this works if a player is reading this file, but why doesn't a browser actually download the file (it doesn't play it either), surely chrome understands streaming? – undefined Sep 04 '13 at 09:18
  • Browsers always stream first if possible based on extension, since extension is mp3, browser will automatically load it in its own player. However you can use FileAPI along with XMLHttpRequest to save file on disk, but thats too much of javascript and also will not work in older IE versions. – Akash Kava Sep 04 '13 at 10:23
  • I have updated answers with possible solutions. You will have to work around them to make it working correctly. – Akash Kava Sep 04 '13 at 10:29
  • The download tagging worked nicely in IE10 + chrome which is nice. Thanks :) – undefined Sep 04 '13 at 22:25