JavaScript Canvas - Blobs & Files
Written by Ian Elliot   
Monday, 26 October 2020
Article Index
JavaScript Canvas - Blobs & Files
The File


The File

A JavaScript File is just a Blob with a few additional read only properties to indicate the file’s characteristics:


  • File.lastModified
    Returns the last modified time of the file, in milliseconds since the UNIX epoch (January 1st, 1970 at Midnight). Defaults to a value of

  • File.lastModifiedDate
    Returns the last modified date of the file referenced by the file object

    Returns the name of the file referenced by the file object.


Being a Blob, a File also has size and type. There is a File constructor, but it essentially the same as the Blob constructor:

var myBlob=new File([data],name, options);

where data is an array of strings, ArrayBuffer, ArrayBufferView and blobs, name is the name of the file and the options object has the same two properties as a blob, size and type The only method a File object has is also inherited from Blob, i.e. slice.

You might think that File isn’t much of an improvement on Blob, but other APIs return File objects from both the client and the server and in this case the extra information mirrors the physical files properties. Similarly, when you use a File object to create a physical file, its properties are used to set the physical file’s properties.

Notice that anywhere you can use a Blob you can use a File and in many cases vice versa. Also notice that like a Blob a File cannot be constructed to get its data from an external source – using the constructor a Blob and a File can only be created using an existing string, ArrayBuffer, ArrayBufferView or blob, i.e. data already internal to the program. However, you can create a File object which gets its data from a local file using the <input> tag:

 <input type="file" id="files">

This displays a standard file input button and, if the user clicks it, a file picker dialog box appears and the user has to select the file to load.
There are ways of hiding this default UI and substituting your own, and you can use drag-and-drop, but the basic mechanism of working with the file remains the same.

If the user clicks on the file picker they can pick a single file. If you add the attribute multiple to the tag then the user can select multiple files:

<input type="file" multiple id="files">

You can retrieve the list of file names using the input object’s files property. Of course, there is no point examining this before the user has selected a file so you have to define an event handler for the input’s change event. For example:

files.addEventListener("change", handleFiles, false);
function handleFiles(e){
    var file=this.files[0];

will report the size of the file that the user selects.

At this point the usual question is, can I read any file on the user’s machine?”

The answer should be obvious – for security reasons only files that the user selects can be read by your program. If you find a way to read any file, and some have, you will have created malware and your application is likely to attract some unwanted attention. The only files on the local machine your program can read are ones that the user selects.

In Chapter but not in this extract

  • FileReader
  • Reading a Local File
  • Writing a Local File
  • Response
  • Working with the Server - Basic Fetch
  • Request Object
  • Downloading Graphics from the Server
  • Uploading Local Graphics
  • Using FormData
  • Upload Without a Form
  • Direct Binary Upload
  • The Data URL
  • SVG To Canvas – HTML To Canvas




  • The Blob is essentially a file but without a filename or other properties. You can consider it an unstructured stream of data.

  • A File is a blob with a filename and date and time of creation and use.

  • The FileReader object can be used to read the data associated with a File or a Blob.

  • You can open and read a file in the local file system but only if the user selects it via a File Open dialog box.

  • You can write a file to the local file system but only if the user is made aware of it via a File Save dialog box.

  • The Response object provides a stream-oriented and promise-based way of reading a file. For graphics data in most cases you would use the typed “read to the end” methods.

  • The Fetch API is a promise-based replacement for XMLHttpRequest.

  • The Request object customizes the request made by the Fetch API.

  • In most cases the simplest and fastest way to download graphics from a server is to use the Image object to download and decode the file format.

  • You can upload graphics data to the server with the help of a form and/or the FormData object. According to the MIME type you use this provides a great deal of automatic processing at the client and the server.

  • If you want to be in complete control of what is happening, you can use a direct binary upload of a file, but then you usually have to do more work at the server to retrieve the file.

  • A Data URL stores text or binary data within the URL itself. Binary data is stored as base64 encoded text.

  • You can use a Data URL to establish a link to render both SVG and HTML onto a canvas object.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas




  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths 
      Extract: Bezier Curves 
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes 
  5. Transformations
      Extract: Transformations 
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode 
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing 
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation **NEW!
  9. WebWorkers & OffscreenCanvas
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
  11. Typed Arrays
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files 
  13. Image Processing
      Extract: ImageData
      Extract: The Filter API
  14. 3D WebGL
  15. 2D WebGL
    Extract: WebGL Convolutions 






To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.





or email your comment to:


Last Updated ( Monday, 09 November 2020 )