A couple of posts back, I walked through uploading an image to AWS S3 without the need for a server of your own. This has the advantage of being a fully standalone, browser client only solution. Of course images by themselves aren’t very useful. Likely we want to collect some additional information.
Browser to S3 uploads have the downside risk of creating a world writable S3 bucket. Why take that risk? Scale. With S3, Amazon has built out a huge amount of infrastructure that’s Not Your Problem™. And their economies of scale mean they’ve done it more cheaply than you could, which translates into the cost being lower than you could achieve on your own.
(Don’t take this as an commercial for AWS, there are many situation where I feel your are overpaying for convenience. However, we you need large scale infrastructure on demand, it’s a clear win.)
For this example, let’s say we are responsible for collecting entries for a photo contest. It’s going to run during a highly watched TV show and we’re going to get slammed with responses over a fairly small window.
Before you get started, review the bucket settings you need to allow direct uploads.
We’re going to collect name, email, caption and the photo thusly:
1 2 3 4 5 6 7
Hopefully, your form is prettier (labels would be nice).
And our image uploader code becomes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
id will be the S3 filename, our UUID. We’ll get why we’re returning
$.ajax call in a minute.
Now we need to upload the rest of the form:
1 2 3 4 5 6 7 8
Unlike with the image upload, where the filename is inferred from the
path here needs to be the full bucket path, including
the filename with the .json extention. S3 will simply write that
data string into the file.
data is just an object that we can turn in to JSON. To get the form
into that data object, I use this snippet which I got long ago I
believe from this post
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
That code has some limitation on how the fields are named, see the stackoverflow post or just do a little Googling on the topic if you run in to issues.
Given our uploaders, we can glue it all together like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
The reason we are returning the results of the
$.ajax calls in our
functions is so that we can pass them to
$.when. You can read up on the
details, but for our purposes
$.when will fire the done callback
only when both of our
$.ajax have completed, allowing us to do
whatever comes next.
r1 is the result of the first function we
r2 the second. You will want some smarter error handling,
This is running a bit long, so I’ll save the question of what to do with the data for next time.