springmeyer/s3-index.html

## s3-index.html
<html>
<head>
</head>
<body bgcolor="white">

<h1 id="h1"></h1>
<hr>
<div id="listing">loading...</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
var loc;
var url;
jQuery(function($) {
  if (typeof BUCKET_URL != 'undefined') {
    url = BUCKET_URL;
  } else {
    url = location.protocol + '//' + location.hostname;
    console.log('url : ' + location);
    loc = location;
  }
  document.getElementById('h1').innerHTML = 'Index of ' + location.href;
  $.get(url)
    .done(function(data) {
      var xml = $(data);
      var files = $.map(xml.find('Contents'), function(item) {
        item = $(item);
        return {
          Key: item.find('Key').text(),
          LastModified: item.find('LastModified').text(),
          Size: item.find('Size').text(),
        }
      });
      renderTable(files);
    })
    .fail(function(error) {
      alert('There was an error');
      console.log(error);
    });
});

function getReadableFileSizeString(fileSizeInBytes) {
    var i = -1;
    var byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
    do {
        fileSizeInBytes = fileSizeInBytes / 1024;
        i++;
    } while (fileSizeInBytes > 1024);

    return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
};

function renderTable(files) {
  var cols = [ 55, 45, 15 ];
  var content = '';
  var first_subdir = true;
  $.each(files, function(idx, item) {
    if (item.Key.indexOf('index.html') <= -1) {
        var key = item.Key;
        var row = '';
        row += padRight(new Date(item.LastModified).toString(), cols[1]) + '  ';
        row += padRight(getReadableFileSizeString(item.Size), cols[2]);
        // if subdir req
        var subdir = loc.search && loc.search.split("=")[1];
        if (subdir) {
          if (first_subdir) {
              content += '<pre><a href="../index.html">../</a>\n';
              first_subdir = false;
          }
          if (key.indexOf(subdir) > -1 && key[key.length-1] != '/') {
              row += '<a href="' + key + '">' + item.Key.replace(subdir,'') + '</a>';
              content += row + '\n';
          }
        }
        // if directory
        else if (key[key.length-1] == '/') {
          row += '<a href="' + url + "/index.html?path=" + key + '">' + item.Key + '</a>';
          content += row + '\n';
        }
        // if file
        else if (key.indexOf('/') <= -1) {
          row += '<a href="' + key + '">' + item.Key + '</a>';
          content += row + '\n';
        }
    }
  });

  document.getElementById('listing').innerHTML = '<pre>' + content + '</pre>';
}

function padRight(padString, length) {
  var str = padString.slice(0, length-3);
  if (padString.length > str.length) {
    str += '...';
  }
  while (str.length < length) {
    str = str + ' ';
  }
  return str;
}
</script>
</body>
</html>
	<html>
	<head>
	</head>
	<body bgcolor="white">

	<h1 id="h1"></h1>
	<hr>
	<div id="listing">loading...</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
	var loc;
	var url;
	jQuery(function($) {
	if (typeof BUCKET_URL != 'undefined') {
	url = BUCKET_URL;
	} else {
	url = location.protocol + '//' + location.hostname;
	console.log('url : ' + location);
	loc = location;
	}
	document.getElementById('h1').innerHTML = 'Index of ' + location.href;
	$.get(url)
	.done(function(data) {
	var xml = $(data);
	var files = $.map(xml.find('Contents'), function(item) {
	item = $(item);
	return {
	Key: item.find('Key').text(),
	LastModified: item.find('LastModified').text(),
	Size: item.find('Size').text(),
	}
	});
	renderTable(files);
	})
	.fail(function(error) {
	alert('There was an error');
	console.log(error);
	});
	});

	function getReadableFileSizeString(fileSizeInBytes) {
	var i = -1;
	var byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
	do {
	fileSizeInBytes = fileSizeInBytes / 1024;
	i++;
	} while (fileSizeInBytes > 1024);

	return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
	};

	function renderTable(files) {
	var cols = [ 55, 45, 15 ];
	var content = '';
	var first_subdir = true;
	$.each(files, function(idx, item) {
	if (item.Key.indexOf('index.html') <= -1) {
	var key = item.Key;
	var row = '';
	row += padRight(new Date(item.LastModified).toString(), cols[1]) + ' ';
	row += padRight(getReadableFileSizeString(item.Size), cols[2]);
	// if subdir req
	var subdir = loc.search && loc.search.split("=")[1];
	if (subdir) {
	if (first_subdir) {
	content += '<pre><a href="../index.html">../</a>\n';
	first_subdir = false;
	}
	if (key.indexOf(subdir) > -1 && key[key.length-1] != '/') {
	row += '<a href="' + key + '">' + item.Key.replace(subdir,'') + '</a>';
	content += row + '\n';
	}
	}
	// if directory
	else if (key[key.length-1] == '/') {
	row += '<a href="' + url + "/index.html?path=" + key + '">' + item.Key + '</a>';
	content += row + '\n';
	}
	// if file
	else if (key.indexOf('/') <= -1) {
	row += '<a href="' + key + '">' + item.Key + '</a>';
	content += row + '\n';
	}
	}
	});

	document.getElementById('listing').innerHTML = '<pre>' + content + '</pre>';
	}

	function padRight(padString, length) {
	var str = padString.slice(0, length-3);
	if (padString.length > str.length) {
	str += '...';
	}
	while (str.length < length) {
	str = str + ' ';
	}
	return str;
	}
	</script>
	</body>
	</html>