Html5's File API - BLOB usages?

Question

I have a file input : (jsbin) ``` <input type="file" accept="image/*" id="input" multiple onchange='handleFiles(this)' /> ``` Which, when file selected, shows small images of the selected image: I can do it in two ways : using FileReader: ``` function handleFiles(t) //t=this { var fileList = t.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var img = document.createElement("img"); img.style... = ... document.getElementById('body').appendChild(img); var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } // ... } ``` using ObjectURL / BLOB : ``` function handleFiles(t) { var fileList = t.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var img = document.createElement("img"); img.src = window.URL.createObjectURL(file); img.onload = function (e) { window.URL.revokeObjectURL(this.src); } document.getElementById('body').appendChild(img)…

Accepted Answer

The length of a `blob:` URL is always below a reasonable limit.

Data URLs can be arbitrary large. Consequently, when a data URL is too long, some browsers (IE, cough) will not display the image any more. So, if you want to display very large files, using `blob:` (or `filesystem:` URLs) might make more sense than data-URLs.

Also, you can directly recover data from a `blob:` URL (provided that the blob has not been revoked yet, e.g. because the document was unloaded, and the same origin policy is not violated) using `XMLHttpRequest`. For example, the following code gets the content of a blob URL as text:

```
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// set x.responseType = 'blob' if you want to get a Blob object:
// x.responseType = 'blob';
x.onload = function() {
    alert(x.responseText);
};
x.open('get', blobUrl);
x.send();
```

If you want to submit the contents of a File to a server using `XMLHttpRequest`, it doesn't really make sense to use a `blob:` or `data:` URL. Just submit the `File` object directly using the `FormData` object. If you lost the original `File` reference, and you only have a `blob:` URL, then you can use the previous snippet to get a `Blob` object again for use in `FormData`.

Given a `data:`-URL, it is far from easy to recover the original data. Firefox and Opera 12- allow use of a `data:`-URL in `XMLHttpRequest`. Chrome, Internet Explorer, Safari and Opera 15+ refuse to load a data-URL via XMLHttpRequest. So, with respect to recovering data, `blob:` URLs are also superior over `data:`-URLs.

If you want to display the result of a File in a different frame on the same origin, definitely use a `blob:` URL. If you want to manipulate data contained in a `Blob` in a differerent frame (possibly on a different origin), do not use blob or data URLs, send the data directly using `postMessage`.

`blob:`-URLs are generally better than `data:`-URLs for representing (binary) data. For small data (max 20kb), `data:` URLs might be a better choice because of the higher range of supported browsers: Compare Can I use Blob URLs with Can I use Data URIs (though if you're writing a complex HTML5 application, odds are that you're not going to support IE9-).

Html5's File API - BLOB usages?

Solution

Problem