Image previews with the FileReader API

I added a ���notes��� section to this website eight years ago. 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. 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 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 and here���s the original. In that same folder is the alt text.

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,the alt.txt file, and the note itself.

In order to add the alt text to the image, I needed to update my 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, I show a preview of the selected images right after the file input.

Here���s the code 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 to provide the alt text. But for some reason it���s not working. 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.