Photo-1 Photo-2 Photo-3 Photo-4 Photo-5 Photo-6

@brentmc79

@brentmc79

Full-time web developer. Part-time smart ass.

I'm Brent Collier.

After a year and a half as an engineer on Twitter's Trust & Safety team, I'm looking for my next gig. Contact me if you know of something interesting.

#

Ajax image uploads with attachment_fu + s3

Posted on 01/14/2008

I started off following this post about file uploads using attachment_fu and Amazon's S3 by Mike Clark.  Before I could start on the image uploads, I needed an image processor, so I chose to go with ImageScience.  Their directions for installing one of the prerequisites, FreeImage via MacPorts didn't exactly work for me, so I ended up building it from source as seen in this post.

Once ImageScience was all set up, I followed the rest of Mike's write-up.  After a few minutes I had image uploads up and running, but they were still being saved to the file system.  The only thing left was to tie in Amazon's S3 web service, which is really easy.  I installed the gem, edited the s3 yaml with my info, and updated my model to specify s3 as my storage option.  The bummer came when I tested it out.  I kept getting "Access Denied" errors.  I checked and double-check my s3 keys.  Everything was right, and I couldn't figure out what was going on.  I thougth maybe I should try testing my s3 account another way, so I installed the s3 extension for Firefox.  I was able to upload file using the same key I had specified in my app.  Then it occurred to me, maybe I needed to create the bucket before I could use it...   Duh!

I had been using the default bucket name "appname-bucket", and since s3 bucket names have to be totally unique, this was causing my problem.  I'm sure someone else like myselft, who was too lazy to change the bucket name, had already claimed that name.  So, I changed the bucket name in the yaml and created the bucket in Firefox, and Viola!  It worked!

There was only one problem.  My image upload form is on the post-creation page, which looks like this:
 post-creation page

 I needed the image uploads to be ajaxified, in case you wanted to upload an image while you were in the middle of writing a post.  I remembered encountering this issue back when Brendan and I were working on Yappd.  After a quick google search, I found this post by Khamsouk Souvanlasy that had exactly what I needed.  I followed his how-to and with only a few modifications, I had everything working in no time.

So there you have it...   Ajaxified image uploads via attachment_fu, aws-s3, imagescience, responds_to_parent, and a few lines of code.