Image previews with the FileReader API
Tags: images, alt, a11y, previews
Published: 2022-05-25 09:33:28

---
title: Image previews with the FileReader API
published: true
date: 2022-05-15 13:46:37 UTC
tags: images,alt,accessibility,previews
canonical_url: https://adactio.com/journal/19080
---

I added a “notes” section to this website [eight years ago](https://adactio.com/notes/6803). I set it up so that notes could be syndicated to Twitter. Ever since then, that’s the only way I post to Twitter.

A few months later [I added photos to my notes](https://adactio.com/notes/6978). Again, this would get syndicated to Twitter.

Something’s bothered me for a long time though. I initially thought that if I posted a photo, then the accompanying text would serve as a decription of the image. It could effectively act as the `alt` text for the image, I thought. But in practice it didn’t work out that way. The text was often a _commentary_ on the image, which isn’t the same as a description of the contents.

I needed a way to store `alt` text for images. To make it more complicated, it was possible for one note to have multiple images. So even though a note was one line in my database, I somehow needed a separate string of text with the description of each image in a single note.

I eventually settled on using the file system instead of the database. The images themselves are stored in separate folders, so I figured I could have an accompanying `alt.txt` file in each folder.

Take [this note](https://adactio.com/notes/19077) from yesterday as an example. Different sizes of the image are stored in the folder `/images/uploaded/19077`. Here’s [a small version of the image](https://adactio.com/images/uploaded/19077/small.jpg) and here’s [the original](https://adactio.com/images/uploaded/19077/original.jpg). In that same folder is [the `alt` text](https://adactio.com/images/uploaded/19077/alt.txt).

This means I’m reading a file every time I need the `alt` text instead of reading from a database, which probably isn’t the most performant way of doing it, but it seems to be working okay.

Here’s another example:

- [the original image](https://adactio.com/images/uploaded/19074/original.jpg),
- [the `alt.txt` file](https://adactio.com/images/uploaded/19074/alt.txt), and 
- [the note itself](https://adactio.com/notes/19074).

In order to add the `alt` text to the image, I needed to update [my posting interface](https://dribbble.com/shots/2744316-Notes-posting-interface). By default it’s a little `textarea`, followed by a file upload `input`, followed by a toggle (a checkbox under the hood) to choose whether or not to syndicate the note to Twitter.

The interface now updates automatically as soon as I use that `input type="file"` to choose any images for the note. Using [the `FileReader` API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), I show a preview of the selected images right after the file input.

[Here’s the code](https://gist.github.com/adactio/0e406cbc2ff0d3eed7a0ffcd0d932aab) if you ever need to do something similar. I’ve abstracted it somewhat in that gist—you should be able to drop it into any page that includes `input type="file" accept="image/*"` and it will automatically generate the previews.

I was pleasantly surprised at how easy this was. The `FileReader` API worked just as expected without any gotchas. I think I always assumed that this would be quite complex to do because once upon a time, it _was_ quite complex (or impossible) to do. But now it’s wonderfully straightforward. Story of the web.

My own version of the script does a little bit more; it also generates another little `textarea` right after each image preview, which is where I write the accompanying `alt` text.

I’ve also updated my server-side script that handles the syndication to Twitter. I’m using [the `/media/metadata/create` method](https://developer.twitter.com/en/docs/twitter-api/v1/media/upload-media/api-reference/post-media-metadata-create) to provide the `alt` text. But for some reason [it’s not working](https://github.com/abraham/twitteroauth/issues/954#issuecomment-974870119). I can’t figure out why. I’ll keep working on it.

In the meantime, if you’re looking at an image I’ve posted on Twitter and you’re judging me for its lack of `alt` text, my apologies. But each tweet of mine includes a link back to the original note on this site and you will most definitely find the `alt` text for the image there.