Javascript 101: JS & the File API

Jared Malan

Director Of Technology

Edgar Allan

Let's continue our focus on images and discuss the File API. We can write code to preview the image before the user uploads it.

Ok, The File API is a set of APIs that allows web applications to work with file objects in the browser. It provides a way to handle file upload operations and access the contents of selected files. The File API consists of the following main interfaces and methods:

‍File object: Represents a file that has been selected by the user or obtained from other sources like drag and drop operations or the <input type="file"> element.‍
FileList object: A list of File objects, usually obtained from a file input element or a drag and drop event.‍
FileReader object: Allows you to read the contents of a File object asynchronously. It provides methods like readAsText(), readAsDataURL(), readAsArrayBuffer(), and readAsBinaryString() to access the file content in various formats.‍
Blob object: A raw data type that represents a binary large object (BLOB). It can be used to create File objects or handle binary data.

Here's an example of how you can work with the File API to display an image before file upload:

<!-- HTML -->
<input type="file" id="fileInput" accept="image/*">
<div id="imageContainer"></div>

// JavaScript
const fileInput = document.getElementById('fileInput');
const imageContainer = document.getElementById('imageContainer');

fileInput.addEventListener('change', (event) => {

	const file = event.target.files[0];
  
	if (file && file.type.startsWith('image/')) {
  
  	const reader = new FileReader();
    
    reader.onload = () => {
    
    	const img = new Image();
      img.src = reader.result;
      img.onload = () => {
      	imageContainer.innerHTML = '';
        imageContainer.appendChild(img);
      };
    };
    
    reader.readAsDataURL(file);
  }
});

In this example:

We add an accept="image/*" attribute to the file input element to allow only image files to be selected.
We create a <div> element with an id imageContainer where we'll display the image.
Inside the change event listener, we first check if a file has been selected and if it's an image file.
We create a new FileReader instance and set up an onload event listener.
Inside the onload event listener, we create a new Image object and set its src to the result of the FileReader (which is a data URL representing the image data).
We set up another onload event listener for the Image object.
Inside this second onload event listener, we clear the contents of the imageContainer div and append the Image element to it, displaying the image.

This code will display the image on the webpage without any manipulation. If you want to perform any image manipulation, you can add that logic inside the second onload event listener before appending the Image element to the imageContainer.

Note that the readAsDataURL() method is used here because it converts the image file into a data URL, which can be directly set as the src of an Image object. This approach works well for displaying images.

‍

Button Text