​

​

👋,

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.

Edgar Allan @EdgarAllanCo Our next product is designed to make you say... DAM!! ...as in Digital Asset Management. Welcome to Figdam - manage sales and marketing assets in @figma and auto-sync ✨them to @webflow https://figdam.com/ Here is the story: 3:40 PM • May 17, 2024 6 Retweets 31 Likes Read 3 replies

​

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 = 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:

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 str8fire.io.

​

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.