Using Plupload With Amazon S3 And Imgix In AngularJS

Yesterday, I took a look at using Imgix for "web scale" thumbnail generation in ColdFusion. That was fun to see in a one-off manor; but, today, I wanted to look at something a little more real-world oriented. In this exploration, I'm using Plupload to upload images directly from the client to Amazon S3. Then, I'm using Imgix to generate thumbnails using the pre-signed Amazon S3 URL as the "origin". And, for extra awesome funzies, I'm allowing the thumbnail style to be changed on-the-fly as well.

The power of Imgix is a real one-two punch. Not only does it generate thumbnails very fast (much faster than what I typically see in ColdFusion, especially for large images); it also enables thumbnail styles, such as size, crop, and rotation, to be changed on the fly as well. Not only does this mean that thumbnail processing can be offloaded, it also means that the entire set of your application thumbnails can be regenerated with no effort on your part.

That last part - the near effortless regeneration of thumbnails - that's the part that really gets my heart racing. I deal with millions upon millions of thumbnails. And, the idea that I could, at any moment, start using different sized thumbnails - well, I can't even express how awesome that sounds.

There's too much code to review in this post, so I'll just look two parts - the original generate of the image URLs (S3 pre-signed URLs, and Imgix thumbnail URLs) and then the updating of the image URLs, on-the-fly.

When the user selects images to upload, we first save the "records" to the server. This request will save the "eventually valid" image URLs and return data that Plupload can subsequently use to upload the image binary directly from the client to Amazon S3:

// Prepare API response. This needs to contain information about the image record

// we just created, the location to which to post the form data, and all of the form

// data that we need to match our policy.

response.data = {

"image" = {

"id" = image.id,

"clientFile" = image.clientFile,

"imageUrl" = image.imageUrl,

"thumbnailUrl" = image.thumbnailUrl

},

"formUrl" = settings.url,

"formData" = {

"acl" = "private",

"success_action_status" = 201,

"key" = s3Key,

"Filename" = s3Key,

"Content-Type" = "image/#listLast( form.name, "." )#",

"AWSAccessKeyId" = application.aws.accessID,

"policy" = settings.policy,

"signature" = settings.signature

}

};

</cfscript>

In this code, the first URL I generate is the pre-signed Amazon S3 URL. Then, after that, I create an Imgix Web Proxy url that will use the pre-signed URL as the origin. That's all I have to do to create the thumbnail!

And, if I ever what to change the thumbnail style in my application, it's just a matter of updating the thumbnail URLs. In the demo, the user can apply different styles to the existing thumbnails by calling the following "update" page:

<cfscript>

// Require the form fields.

param name="form.style" type="string";

// Update each image with the new thumbnail url.

for ( image in application.images.getImages() ) {

switch ( form.style ) {

// Apply monochromatic thumbnail style.

case "mono":

newThumbnailUrl = application.imgix.getWebProxyUrl(

image.imageUrl,

{

w = 148,

fit = "crop",

mono = "FF33CC"

}

);

break;

// Apply pixelated thumbnail style.

case "pixelate":

newThumbnailUrl = application.imgix.getWebProxyUrl(

image.imageUrl,

{

w = 148,

fit = "crop",

px = 10

}

);

break;

// Apply sepia tone thumbnail style.

case "sepia":

newThumbnailUrl = application.imgix.getWebProxyUrl(

image.imageUrl,

{

w = 148,

fit = "crop",

sepia = 50

}

);

break;

// Revert back to normal thumbnail style.

default:

newThumbnailUrl = application.imgix.getWebProxyUrl(

image.imageUrl,

{

w = 148,

fit = "crop"

}

);

break;

} // END: Switch.

application.images.updateThumbnailUrl( image.id, newThumbnailUrl );

} // END: For.

// Prepare API response.

response.data = true;

</cfscript>

As you can see, there is no image processing happening here. All I'm doing is regenerating the Imgix Web Proxy URL and saving it to the repository.

When I actually see this on-the-fly thumbnail generation come to life, I am kind of blown away and my mind starts to race with fantasies of code restructuring. Now, I should point out that you don't have to use pre-signed S3 urls - I just happen to use those because I am used to them. Imgix also allows for more direct S3 integration (using stored IAM access credentials) and even public-folder integration. Definitely more to explore!

Reader Comments

Imgix is great but I'd like to throw out a shout to blitline.com , I create my own "imgix" like services with ColdFusion for in house customers that are not comfortable relying on someone else for image processing or if images need to be secure. I don't work for them, but they have been great and they have a really good free plan.

Seems like a interesting service as well. I like the fact that it can do screenshots as well - that's something that always seems useful and very hard to do on your own. Plus, JpegMini support is kind of player as well.

I am the co-founder and lead engineer at InVision App, Inc — the world's leading prototyping,
collaboration & workflow platform. I also rock out in JavaScript and ColdFusion 24x7 and I dream about
promise resolving asynchronously.