You probably know that the team at Edgar Allan is behind Slater. But did you know that we work on other products in between our client work? You use Slater. You may have heard about Wes. And you probably don't know about our latest product, Figdam.

Do you know what a DAM is? a Digital Asset Manager? We are building one. Figdam helps users manage all of their images in one place, in Figma. If an image needs to be updated, swap it out in Figma, and it will be updated across the web. Figdam also supports image manipulation and analytics. It can even generate a PDF from a series of images or Figma frames.

Demo coming next week!

Javascript 101: JS & the File API

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:

  1. 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.
  2. FileList object: A list of File objects, usually obtained from a file input element or a drag and drop event.
  3. 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.
  4. 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 =[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 = '';


In this example:

  1. We add an accept="image/*" attribute to the file input element to allow only image files to be selected.
  2. We create a <div> element with an id imageContainer where we'll display the image.
  3. Inside the change event listener, we first check if a file has been selected and if it's an image file.
  4. We create a new FileReader instance and set up an onload event listener.
  5. 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).
  6. We set up another onload event listener for the Image object.
  7. 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.


Your projects, supported by Slater

​Dennis Snellenberg created this GSAP digital experience. Amazing! Go check it out at


Are you working on something worth sharing? Please share!


Happy coding!

πŸ€™ the Slater Team


If Slater helps you create better websites, please support the team behind it.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects....

We're adding new community library scripts each week. Let's take a look at some of them. πŸ‘Ύ An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: Review the code:...