Html5's File API - BLOB usages?

Question

I have a file input : (jsbin)

Answer 1

Here's the main differences in how you can use the two types of URLs:

Data URLs:

Pros:

• you can get data out of them very easily
• you can send them to another user or across HTTP, and the data's still there
• It doesn't matter where or how they were created, if the data is valid, you'll see the content in any browser, on any OS, anywhere

Cons:

• Data URLs are often prohibitively long, so that IE might not be able to handle them and it can get annoying to handle in any browser
• They are less efficient than BLOB URLs (you have to read the file to create it, you don't with BLOBs, etc)

BLOB URLs:

Pros:

• They are much shorter than Data URLs, making them far more manageable
• you can access their data, but since the URL is only an opaque reference to the data, the data must be accessed using a FileReader and the data cannot be extracted directly from the URL, as in Data URLs
• because they have a reasonable length, they are easier to deal with and have better IE support

Cons:

• The data isn't accessible in the URL itself (the URL is an opaque reference) and it isn't stored in the cloud
• Because of con #1, you can't send the URL to the server/a different user, as they will be unable to access the data. So the URL's only for you.
• You also can't access the data from the BLOB URL in a different browser (even on the same machine)
• Also, you are unable to access a BLOB URL from a different origin, even on the same browser

This list makes it seem like data URLs are an obvious advantage, but BLOB urls are faster to create, and, unless you need to send the url to other users or to the server, you should use them because they are faster, easier to use, more manageable, and better for IE. But if you do need to send a url to the server or to another user, I would recommend somehow transmitting the blob directly using XHR2. Data urls aren't that great.