More and more sites are written in flat HTML. Hosted on GitHub pages, S3, etc. The advantages are clear: ridiculously low to no hosting costs, it can hardly ever break, and with things like Jekyll and Octopress it can still be fun to maintain. And with JavaScript frameworks such as Angular you could build entire apps clientside. The downsides are clear too: no central point of knowledge makes interaction between users hard.

However with services like Disqus, and (my own startup) Transloadit, it gets more and more feasible to just run a flat site and have external services cover for not running serverside code and a database yourself.

In this post I'm going to show you how easy it is to make file uploading possible even if your site is just a single page of HTML.

Not Super Secure

Now this certainly is not very secure. Although your S3 credentials will be encrypted inside Transloadit's account, very little will stop wrong-doers from filling up your S3 bucket by re-using references they can find in the HTML code. They won't be able to delete or change existing files in your bucket, but it's still annoying-to-extremely-harmful, depending on what you are building.

For a few usecases (a 4chan clone / intranet page / etc) it might be an okay tradeoff. If not, you'll have to enrich this example with signatures, but that will require serverside code to shield off secret keys from prying eyes.

Storage

In this example, we'll use Amazon S3 buckets to store the files, but Transloadit also supports Rackspace Cloudfiles and (s)FTP as storage targets.

Let's do it

First of all

  1. Sign up for Amazon AWS
  2. Create an S3 bucket at Amazon. Write down your Bucket Name
  3. Generate Security Keys at Amazon. Write down both the Access Key ID and the Secret Access Key
  4. Signup for Transloadit. Write down your API Key found here
  5. Create a Template, name it just_save_to_s3, write down the template_id, and save the following content in it:
{
  "steps": {
    "export": {
      "robot" : "/s3/store",
      "key"   : "AMAZON_ACCESS_KEY_ID",
      "secret": "AMAZON_SECRET_ACCESS_KEY",
      "bucket": "AMAZON_BUCKET_NAME"
    }
  }
}

As you can see, this Transloadit Template now knows how to store any uploads thrown at it.

Now just create the HTML page and refer to the template_id that contains the encoding / uploading instructions:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Transloadit Demo</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Transloadit Demo</h1>

    <p>
      This method works without any serverside code, so you could also just store a flat
      HTML page on S3. However, please note that this is <strong>not very secure</strong>.
    </p>

    <!-- Transloadit code starts here -->
    <form id="transloadit" action="index.html?upload=complete" enctype="multipart/form-data" method="POST">
      <input type="file" name="my_file" />
    </form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script>
    <script type="text/javascript">
       $(function() {
         $('form#transloadit').transloadit({
            triggerUploadOnFileSelection: true,
            wait: true,
            params: {
              auth: {
                key: "TRANSLOADIT_AUTH_KEY"
              },
              template_id: "TRANSLOADIT_TEMPLATE_ID"
            }
         });
       });
    </script>
    <!-- Transloadit code ends here -->

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </div>
</body>
</html>

And that's it. An upload button will appear and all files uploaded will be added to your bucket!

Now if you need to perform extra operations on the uploads (like extracting thumbnails from video, extracting the contents of a zip, etc), just add some steps to your template. Here are some examples.

Again, note that this is not the best/recommended way to use Transloadit, but after hearing from customers who had a usecase for this, I thought I'd share :)