What's the difference between Blob objects and File objects in JS?

Question

As said from the MDN Web Docs:

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.

I also know that a File object inherits some of the properties of a Blob and it can be used pretty much everywhere that Blob can. But, if File can be used in the same context as Blob, how should I choose between them? Are there some cases that one is preferable from another?

Answer 1

As said on the very page you linked:

The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

The File docs show that in addition to the blob properties, files also do have a lastModified date, a name, and possibly a path. It also states that

File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the <input> element [or] from a drag and drop operation's DataTransfer object

Whenever you can actually choose which one to use, that means you are constructing them yourself. In contrast to the Blob constructor, the File constructor takes a non-optional name argument. So whenever you're constructing something that you'd give a file name to, use File.