Simple image uploads in Meteor

While working on a simple online yearbook for my high school class of '16 in Meteor, I ran into the issue of uploading images to Meteor. Turns out, it's not uncomplicated at all.

I messed around with CollectionFS, but unfortunately had the issue of images not loading and returning 503s, or taking a long while to load.

I decided to turn to the most popular and developer-friendly image host I know: Imgur.

I used the simple:imgur package. The upload() function takes two arguments, options and callback.

The options require an apiKey, the Imgur Client ID and image, the base64-encoded image data string. The callback function receives two arguments, the first being a Meteor.Error object and the latter being an object containing the response from Imgur.

apiKey: Registering an Imgur Application

The first step is to get an apiKey by registering your application at Imgur's OAuth 2 page. We need to choose 'OAuth 2 authorization without a callback URL', and once done, get the client ID (You'll get an email about it, too).

image: Converting file to base 64

In the submit event of my upload form, I add a line to get the file that the user uploaded:

var file = $form.find('input[type="file"]')[0].files[0]

I also check if the file is an image or not:

if ( file && !file.type.match('image.*') ) return alert('Upload must be an image')

We're now going to use the FileReader API to get the base-64 representation of the image.

We'll need to create a new reader and add a function to it's onload event, where we handle the image upload logic.