Continuing on Mashup Guide :: listing keys with S3Ajax, here I present a Chickenfoot script to create a bucket and upload a file (specifically, it creates a bucket by the name of raymondyeetest and uploads a file (D:\Document\PersonalInfoRemixBook\examples\ch16\Exported Items.rdf from my WinXP machine) to the key exportitems.rdf in the bucket:

include("D:\\document\\JavaScriptLib\\sha1.js");
include("D:\\document\\JavaScriptLib\\S3Ajax.js");

var AWSAccessKeyId = "[AWSAccessKeyId]";
var AWSSecretAccessKey = "[AWSSecretAccessKey]";

S3Ajax.URL = 'http://s3.amazonaws.com';
S3Ajax.DEBUG = true;
S3Ajax.KEY_ID = AWSAccessKeyId;
S3Ajax.SECRET_KEY = AWSSecretAccessKey;

// function to read contents from a file

function read_file_contents(aFileURL) {
  // https://developer.mozilla.org/en/Code_snippets/File_I%2f%2fO#Binary_File

  var ios = Components.classes["@mozilla.org/network/io-service;1"]
                      .getService(Components.interfaces.nsIIOService);
  var url = ios.newURI(aFileURL, null, null);

  if (!url || !url.schemeIs("file")) throw "Expected a file URL.";
  var bFile = url.QueryInterface(Components.interfaces.nsIFileURL).file;
  var istream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                          .createInstance(Components.interfaces.nsIFileInputStream);
  istream.init(bFile, -1, -1, false);
  var bstream = Components.classes["@mozilla.org/binaryinputstream;1"]
                          .createInstance(Components.interfaces.nsIBinaryInputStream);
  bstream.setInputStream(istream);
  var bytes = bstream.readBytes(bstream.available());
  return bytes;

}

// create a bucket

var newBucketName = 'raymondyeetest';

S3Ajax.createBucket(newBucketName, function() {
    output("created a buicket: " + newBucketName);
    s3_list();
}, function () {
      output ("error in createBucket");
   }
);

// add a key to a bucket

var fileURL = 'file:///D:/Document/PersonalInfoRemixBook/examples/ch16/Exported%20Items.rdf'
var content = read_file_contents(fileURL);
alert(content);

S3Ajax.put(newBucketName , "exportitems.rdf", content,
    {
       content_type: "application/xml; charset=UTF-8",
       meta:  {'creator':'Raymond Yee'},
       acl:    "public-read",
    },
    function(req) {
        output("Upload succeeded");
    },
    function(req, obj) {
        output("Upload failed");
    }
);

A few things to note about this code:

• read_file_contents() doesn't strike me as a terribly elegant way of reading contents from a file -- but that's what I have working for now
• a tricky part of getting this to work was to note that in FF 3.x,  charset=UTF-8 is automatically tacked on to content-type HTTP request header in a xmlhttprequest -- I don't know how to change the charset or whether you can -- and why UTF-8 is being tacked on.  But figuring out the charset was crucial to getting this working since the content-type HTTP header is used in the calculation of the Amazon S3 signature.

In a previous post (learning how to use S3Ajax to access Amazon S3), I show how to use Chickenfoot and S3Ajax to list S3 buckets. Here is a slight elaboration of the code to list the keys within buckets (in addition to the buckets):

include("D:\\document\\JavaScriptLib\\sha1.js");
include("D:\\document\\JavaScriptLib\\S3Ajax.js");

var AWSAccessKeyId = "[AWSAccessKeyId]";
var AWSSecretAccessKey = "[AWSSecretAccessKey]";

S3Ajax.DEBUG = true;
S3Ajax.KEY_ID = AWSAccessKeyId;
S3Ajax.SECRET_KEY = AWSSecretAccessKey;

function s3_listKeys(bucket) {
  S3Ajax.listKeys(bucket,null,
    function(req, obj) {
        var contents = obj.ListBucketResult.Contents;
        for (var i=0, item; item=contents[i]; i++) {
           output("key: " + bucket + ": " + item.Key +
            " [" + item.LastModified + '] ' +
             " (" + item.Size + ")");
        }
    },
     function(req,obj) {
        output("s3_listKeys failed at " + (new Date()));
     }
  )
} // s3_listKeys

S3Ajax.listBuckets(
    function(req, obj) {
        if (obj.ListAllMyBucketsResult) {
            var buckets = obj.ListAllMyBucketsResult.Buckets.Bucket;
            for (var i=0, bucket; bucket=buckets[i]; i++) {
              output (
                    "bucket: " + bucket.Name + ' ['+
                      bucket.CreationDate+']'
              );
              s3_listKeys(bucket.Name);
            }
        }
    },
    function(req) {
        output ("Buckets list failed at "+(new Date()));
    }
);

Starting today, I will be writing much more often on this weblog to narrate the progress of my mashup book. The writing has been going well, but needless to say, there's so much more to do. This week, I am working on two fronts: cleaning up Chapter 1, an overview of mashups, and drafting, Chapter 8 on the programmable Web browser, Javascript, and AJAX. Although I am writing many, many words in a word processor -- many of which I hope will make it into the final draft of my book, I long to write shorter pieces, which will facilitate the development of the book. That's why am I'm taking time out of the book to weblog a bit.

Let me tell you a bit about Chapter 8, whose working title is "Learning Ajax/JavaScript widgets and their APIs." In thinking about the chapter today, I realize that the big idea I want to get at is that the modern web browser is programmable and hence, is a rich platform for mashing up data and services. As a connoisseur of mashups, I would want to figure out all the different ways in which I could extend, change, subvert, and customize the web browser, which is the dominant client-side platform for exchanging information on the Internet. The possibilities are astounding for customization both in how a web server host communicates with others and how you as an end-user could process communications coming at you.

A specific example, and certainly not a surprising one, to cover in Chapter 8 is Google Maps, which I call (without great precision of wording) an Ajax widget. Ajax, because it involves the constant and fluid interchange of data between the browser and the server executed through JavaScript -- and a widget because one can use Google maps without knowing all the inner workings of Ajax. That is, you can use it at a high level of abstraction. (I do use Google maps as a specific instance of Ajax widgets but I cover Google maps again in greater detail in other chapters to emphasize the mapping (functional) aspect of it -- instead of the technical implementation part of it.)

Ajax is a rich subject, as can be seen in by the myriad books that have been published recently on the subject. I would like to put Ajax in the larger context of the programmable Web browser. Here I will admit to struggling with how to piece together a chapter that I believe should at least mention, if not plumb the depths of the following:

• both how an "ideal" W3C DOM-standards compliant browser works and how various browsers actually work in various areas: how javascript is implemented, object models behavior, CSS, events, etc.
• Javascript-based APIs, widgets such as Google maps -- what are they, how to use any all.
• non-browser environments for Javascript, such as Google Gadgets, Yahoo Widgets, Adobe Acrobat
• extension mechanisms in browsers (Firefox addons, Safari , IE , Opera)
• Javascript and browser debugging tools like Firebug
• Javascript libraries: how they relate and what can be intermixed -- and which ones are tied to which web programming frameworks.
• what people have done already on all these fronts using Javascript and remixing the browser
• how to write Javascript and Javascript widgets that can be reused by other people, including cross-platform Javascript
• ideas of what you can do in terms of mashups

I obviously would not be to cover all these topics, nor should I even try! What I plan to actually cover as a way into this big list of topics is the following:

• the lastest versions of Firefox, instead of looking in depth at all browers -- old and new
• the Yahoo UI Library, as a specific example of a packaged javascript library
• a walk-through of how to use Firefox + Firebug / Javascript Shell + YUI Connection Manager
• to build a Google Map example, as a way to get into Ajax widgets in general
• how to build a basic AJAX call to Flickr
• how to write a simple Greasemonkey script to lay the foundation of understanding Google Maps in Flickr , a major example in the book).