P E N C I L
Login
File vs Blob

Basic

File and Blob have the same interface.

- File references to a physical file on disk. It's created by drag/drop or user select a file.

There is no API to create a file object

- Blob can reference an in-memory only or can be internally stored in file by browser.

Blob URL:

It's : blob://.... is a just a reference to a Blob or File but it can be used the same as file:// or http://....myfile
(ex: blob:http://localhost:9000/794559f3-20ae-48a6-8f3e-283c82aa0127)

Data URL:

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.
(Ex: "data:,Hello%2C%20World!")

API

Create:

- File: get result from drag/drop or user select a file

- Blob:

var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});

Read:

- Use FileReader

- Convert to Blob URL (blob://....) and use it as a hyper link (ex: image)

image.src=URL.createObjectURL(blobOrFile)

Examples

Read image file from clipboard, convert to Blob URL, assign to HTML DOM.

https://codepen.io/tmrDevelops/pen/YxGQaW

Reference

http://qnimate.com/an-introduction-to-javascript-blobs-and-file-interface/