• Home
  • Movable Type
  • Data API
  • インデックステンプレートで手っ取り早く複数ファイルアップローダーを作っちゃおう

インデックステンプレートで手っ取り早く複数ファイルアップローダーを作っちゃおう

タイトルの通りですが、プラグイン無しで、とりあえず複数ファイルアップローダーを使いたい人のためのインデックステンプレートです。Data API を使うので Movable Type 6 限定です。

テンプレートは以下のとおり。これをインデックステンプレートで書き出して、そのページにアクセスすればOKです。出力されたページにアクセスすると、最初にログインを求められます。

<!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>

インデックステンプレートで作る Multi file uploader(Data API 版)

アイテムはインデックステンプレートを作ったブログの配下にアップロードされ、そのブログのアイテムに登録されます。

アップロードしたアイテムが画像の場合は upload/img、それ以外の場合は upload/file に入ります。変更したい場合は、テンプレートの27、28行目を編集しましょう。

使い終わったらこのテンプレートは非公開にしておきましょうね。

実際に使った様子は以下の通り。最後の方はカットして短くしてあります。

以上です。