How to use FileReader() to generate data URLs

These days, the lines between the web and the local environment can be very blurry.  There is a web API called FileReader() that nicely adds to that blurriness.  It lets you asynchronously read the contents of a file on the user’s computer.  I am going to show you one way of using it.



So, what am I doing, here?  There is an input tag that is set up to accept images.  It triggers openFile() onChange.  The openFile() function looks at the first (and only) file supplied and reads it as a data URL.  The function then changes the innerHTML of the “TheImageContents” div to contain an img tag that uses the data URL as the source.

The code behind this demo is available on jsFiddle and Github Gist or you could just test the final result on jsFiddle.

The Lonesome Gods Paperback

Joe’s New “Life Hack”: Getting Rid of One Thing Per Day

Anybody who knows me well enough knows that I am a bit of a packrat.  I have been trying to work on that.  I think I have settled on a good plan.  I am going to get rid of one thing per day.  “Get rid” could mean donating, selling, or simply tossing.  This plan does not mean that I am going to be visiting the Goodwill every day.  I can batch this.  I am going to try to stick to it, though. Continue reading


Coworking in Milwaukee

As you may know, I have recently joined the ranks of the remote knowledge worker.  When Quality Matters hired me, I made the decision to get an office outside of the house.  Since QM does not reimburse for office space, my budget was limited.  I decided that it made sense to aim for a solution within the $100-$150 per month price range.  After a brief session of searching Duck Duck Go for options, I identified six potential solutions. Continue reading


A responsive, AngularJS “movie picker”

So, I have been working on a little side-hustle and I figured that I would share the most recent chunk of it.  I needed a way of allowing a person to uniquely select a movie.  You don’t want to just give the user a free-form box because of the 52 different ways you could input some movie titles.  So, what do you do?  I created a search box, to query IMDB by title.  The API returns a single result, so I displayed it below the search box, as the user types.

I wouldn’t call this an “official” API, so I would be careful.

View in Plunker

Run in Plunker

View in jsFiddle

Run in jsFiddle


New Year, New Job

I have accepted a web application developer position at The Quality Matters Program.  Quality Matters is “a faculty-centered, peer review process that is designed to certify the quality of online and blended courses.”  Put simply, they provide a seal of approval for quality online courses.  Their business systems are written in ColdFusion, so I will be working within the mother language, again.

I will be starting with them in January.  I will be telecommuting from here in Milwaukee.  For the time being, I will be doing so from The Hudson, in the Third Ward.