My favourite part of SendGrid is the Parse Webhook for incoming email. The webhook posts new emails right to your server. Since it includes attachments, I often show that off at hackathons. I usually share a classic use case: the expense application that needs to get images of receipts. That’s perfect for the Parse Webhook. But then I also like to have a little fun. That’s when I show the audience “Selfies with Buscemeyes.”

Getting Steve Buscemeyed

The idea behind this hack came from a rather funny Tumblr blog of women Photoshopped to have the eyes of actor Steve Buscemi. After seeing this, I decided it would be cool to make a Steve Buscemeyes generator in which a user can upload a photo of themselves and get Buscemeyed. What better way to receive that photo than with the Parse Webhook?

So, our hack idea is thus:

  • A user takes a selfie with their smartphone
  • They then email said selfie as an attachment to our preset email address
  • Our application accepts the POST on our route /inbound
  • We parse the email and store the user’s email address and the image
  • Using some JavaScript, we Steve Buscemeye the image

Below, I’ll share the code used for this app, which includes the following technologies:

  • Rails
  • SQLite
  • HTML5 Canvas
  • Inbound Parse Webhook
  • Fabric.js

Fabric.js is an HTML5 Canvas Javascript library that we will use to overlay the Steve Buscemeyes on the selfie. Fabric allows us to simply drop an image over the canvas, and gives us excellent features such as maneuverability and the ability to resize images. Let’s dive on in and get creative!

Set up Your Rails App

Starting from the bottom up, let’s generate a Rails app and name it stevebuselfy.

It’s your choice of database, but for speed and the sake of this app, I’m using SQLite. We’ll also use ActiveRecord for speedy development. Once you’ve generated the app and bundled the relevant gems, you can generate the Model and Controller named selfy.

Open up models/selfy.rb and have it reflect the following:

class Selfy < ActiveRecord::Base

Once you’ve done that, let’s generate a DB Migration to add the fields we need in our app. As I said above, we are going to collect the user’s email address as a string, and we need a second string to store the exact location of the selfie image. Go ahead and run the following Generator command:
rails g migration CreateSelfies email:string pic:string

Once you’ve done that, migrate the database and let the fun begin.

Set Up the Inbound Parse Webhook

We need to make sure our Parse Webhook settings within our SendGrid account point to our application, so we can accept the selfies! My fellow evangelist Scott Motte has a great introduction to the Parse Webhook that goes through this in detail. You’ll want your settings to look something like this:

For local development, I like to use ngrok to test webhooks. Otherwise you need to deploy your code every time you test, because any webhook needs a live web address to send data.

Once we’ve added our MX Records on our relevant domain, set the settings in our Parse Settings within SendGrid, and entered our Ngrok URL including the /inbound route that we will set up next, we can move back to our app, and write some code.

Create the Route and Accept Some Selfies

We need to create a route in our app that accepts POST requests, which I have called /inbound. Let’s write some controller code to accept us some selfies. Open up selfies_controller.rb and have it reflect the following:

def inbound

		if !params['attachment1'].nil? and params['attachment1'].content_type == "image/jpeg"
			tempselfie = params['attachment1']
			sid =
			felfie ="public/selfies/buscemi-" + sid.rand(9999).to_s + ".jpg", "w+"), 'wb') {|wr| wr.write(tempselfie) }
			selfiepath = felfie.to_path.to_s.split('/').drop(1).join('/')

			Selfy.create!({ pic: selfiepath, email: params['from'] })

			render :json => { "message" => "OK" }, :status => 200

			render :json => { "message" => "NOPE." }, :status => 200

			puts "\n\n ** REJECTED. ** \n\n"	



Let’s break down what we’re doing here. The first thing we need to do is wrap up this method in an “if statement.” The “if statement” is going to firstly, check to see if the incoming email has an attachment. We then check to see if said attachment has a content type of image/JPEG. If not, we will send a rejected message, but still return a status of 200. The reason for that is, if SendGrid receives anything but a 200, it will continue to retry the email send until it gets one.

Once we’ve verified that the email has a selfie attached, we can process it. If we were to use an image processing gem such as MiniMagick we could write the enormous inbound method in a couple of lines. Without using one, we end up with a massively convoluted method such as the one above. It does, however, clearly show what’s happening with the Inbound Parse Webhook, and that’s why I’m fine with it. So let’s break it down somewhat:

When an email gets posted to /inbound we receive a JSON blob of that email’s data. This can also include attachments of many content types. We can target attributes of the email, extract them, and store them! As you can see, we are grabbing the attachment selfie using params[‘attachment1’].

The massively convoluted code is basically just creating a temporary file in the public directory, reading the binary from the attachment selfie image and copying it into our new temporary file. We are then saving the file in the aforementioned public directory so we can access the selfie images from the frontend of our app.

Once we’ve done that we run:
Selfy.create!({ pic: selfiepath, email: params['from'] })

This statement is creating a selfie, storing the path of the created selfie image in the pic parameter and then extracting the from property from the incoming email to store, too. And just like that, we’ve accepted an incoming email in our application, and stored some of its attributes.

Apply the Buscemeyes

Now we’ve set up our backend, let’s add some JavaScript to apply our Steve Buscemi features. Make sure your selfies_controller.rb reflects this file here.

Check out this GitHub repo to grab the code for our frontend views.

The last thing to do is include Fabric.js and set up our Ccnvas to apply the Buscemeyes to the selfie. Open up app/assets/javascripts/application.js and have it reflect the following:

var canvas = new fabric.Canvas('canvass');

fabric.Image.fromURL('/buscemeyes.png', function(img) {
	var oImg = img.set({ left: 330, top: 170, angle: -4 });
fabric.Image.fromURL('/buscemouth.png', function(img) {
	var oImg = img.set({ left: 450, top: 450, angle: -4 }); 


Try it Out

Take a selfie and email it in to the email address you set in your Inbound Parse settings. When you do that, you will see the JSON blob come in as a POST in your Ngrok log and you will see a selfie appear on your index page. Click on the Selfie and voila, you’ve just been Buscemeyed!

Here’s a photo of Lander, a SendGrid and Steve Buscemi fan who had the privilege of being Buscemeyed!

As you can see, the Parse Webhook is a super fun feature to play around with and quite frankly, the possibilities are endless. But aside from being super fun, it’s also incredibly useful and being utilised by many of our enterprise clients (albeit NOT for Buscemi selfies!).

For more details on the feature behind this tool, download the Parse Webhook Guide for free now.

SendGrid Devangelist. London based polyglot hacker, mainly playing with Golang and Ruby. Musical Hacker, Hardware hacker, Hackathon lover, API abuser and NoSQL user.