tinybeans/multi-file-upload.html

## multi-file-upload.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi file uploader</title>
    <style type="text/css">
    body {
      background-color: black;
      font-family: 'Source Code Pro', Monaco, Consolas, 'Courier New', Courier, monospace;
      color: white;
      text-align: center;
    }
    </style>
</head>
<body>
<h1>Multi file uploader</h1>
<form id="itemUpload">
<p><input type="file" id="itemUploadFile" multiple></p>
<p><input id="itemUploadBtn" type="button" value="Upload" class="button"></p>
</form>
<div id="results"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath>data-api/v1/js/mt-data-api.min.js"></script>
<script type="text/javascript">
(function($){

  var uploadDirImages = "upload/img";
  var uploadDirFiles = "upload/file";

  var api = new MT.DataAPI({
    baseUrl:  "<mt:CGIPath><mt:Var name= "config.DataAPIScript">",
    clientId: "WBf8rxuf48"
  });
  var siteId = <mt:BlogId>;
  var $results = $("#results");

  api.getToken(function(response) {
    if (response.error) {
      if (response.error.code === 401) {
        location.href = api.getAuthorizationUrl(location.href);
      }
      else {
        alert("Error:" + response.error.message);
      }
    }
    else {

      $("#itemUploadBtn").on("click", function(){
        var count = 0;
        var l = document.getElementById("itemUploadFile").files.length;
        for (var i = 0; i < l; i++) {
          var fileObj = document.getElementById("itemUploadFile").files[i];
          var data = {
            file: fileObj,
            path: "upload",
            autoRenameIfExists: true,
            normalizeOrientation: true
          };
          if (fileObj.type.indexOf("image") !== -1) {
            data.path = uploadDirImages;
          }
          else {
            data.path = uploadDirFiles;
          }
          api.uploadAsset(siteId, data, function(response) {
            if (response.error) {
              $results.append('<p style="font-weight:bold;color:red;">Error Code: ' + response.error.code + ':' + response.error.message + '</p>');
              return;
            }
            count++;
            $results.append('<p>' + response.filename + ' was uploaded![' + count + ']</p>');
          });
        }
      });
  }
});

})(jQuery);
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Multi file uploader</title>
	<style type="text/css">
	body {
	background-color: black;
	font-family: 'Source Code Pro', Monaco, Consolas, 'Courier New', Courier, monospace;
	color: white;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<h1>Multi file uploader</h1>
	<form id="itemUpload">
	<p><input type="file" id="itemUploadFile" multiple></p>
	<p><input id="itemUploadBtn" type="button" value="Upload" class="button"></p>
	</form>
	<div id="results"></div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="<mt:StaticWebPath>data-api/v1/js/mt-data-api.min.js"></script>
	<script type="text/javascript">
	(function($){

	var uploadDirImages = "upload/img";
	var uploadDirFiles = "upload/file";

	var api = new MT.DataAPI({
	baseUrl: "<mt:CGIPath><mt:Var name= "config.DataAPIScript">",
	clientId: "WBf8rxuf48"
	});
	var siteId = <mt:BlogId>;
	var $results = $("#results");

	api.getToken(function(response) {
	if (response.error) {
	if (response.error.code === 401) {
	location.href = api.getAuthorizationUrl(location.href);
	}
	else {
	alert("Error:" + response.error.message);
	}
	}
	else {

	$("#itemUploadBtn").on("click", function(){
	var count = 0;
	var l = document.getElementById("itemUploadFile").files.length;
	for (var i = 0; i < l; i++) {
	var fileObj = document.getElementById("itemUploadFile").files[i];
	var data = {
	file: fileObj,
	path: "upload",
	autoRenameIfExists: true,
	normalizeOrientation: true
	};
	if (fileObj.type.indexOf("image") !== -1) {
	data.path = uploadDirImages;
	}
	else {
	data.path = uploadDirFiles;
	}
	api.uploadAsset(siteId, data, function(response) {
	if (response.error) {
	$results.append('<p style="font-weight:bold;color:red;">Error Code: ' + response.error.code + ':' + response.error.message + '</p>');
	return;
	}
	count++;
	$results.append('<p>' + response.filename + ' was uploaded![' + count + ']</p>');
	});
	}
	});
	}
	});

	})(jQuery);
	</script>
	</body>
	</html>