後日丁寧に書く予定。とりあえず箇条書き
前提
・jQuery.upload利用
・コントローラ側は「アップロードURL返す」「Blobstoreアップロードからの戻り直後」「戻り直後からリダイレクトされJSON生成」の３段階用意
１，アップロードボタン押す
２，UploadUrlリクエスト、Jsonで取得しそのままアップロード
３，戻りURLをコントローラを指定しておいて、そこに戻す。そのタイミングではRedirectでなければ戻せない約束事なので一旦別のコントローラにリダイレクト（画像URLを一緒に渡す）
４，別のコントローラは画像URLをJSON化してクライアントに戻す
５，クライアントはAJAXな動きでBLOBSTOREを利用することができる
リクエスト用HTML＆JavaScript
<!--
BlobStore直接アップロード検証コード
-->
<script type = "text/javascript" src="/jquery.upload-1.0.2.js"></script>
<input type="file" name="newprofileimage" id="newprofileimage" />
<input type="button" name="entry" value="登録" onclick='javascript:submitUpload("newprofileimage");' />
<br />
<br />
<script type="text/javascript">
function submitUpload(targetid)
{
var jsonUrl = "/image/getdirectupdurl";
var uploadurl = "";
$.getJSON(jsonUrl, function(urldata) {
if(urldata)
{
uploadurl = urldata.url;
$('#' + targetid ).upload(
uploadurl,
function(data)
{
alert('File uploaded[' + data[0].imageurl + ']');
$('#imagearea').html('<img src="' + data[0].imageurl + '" />');
},
'json'
);
}
});
}
</script>
<div id="imagearea">アップロード後の画像が表示される場所</div>
サーバサイドコード
/**
* BlobStoreへの直接アップロード用URLを取得する.
* JSON形式にて返す
* @return
*/
@ActionPath("getdirectupdurl")
public Navigation getDirectUploadUrl()
{
Navigation nav = null;
String returnUrl = "/image/dupdcomplete";
String uploadUrl = service.createUploadUrl(returnUrl); //BlobstoreServiceのcreateUploadUrlを呼び出している
Map<String,String> jsonData = new HashMap<String,String>();
jsonData.put("url", uploadUrl);
try
{
nav = this.responseJson(jsonData);
}
catch (IOException e)
{
e.printStackTrace();
nav = this.redirect("errorurl");
}
return nav;
}
/**
* Blobstoreに直接アップロードした後、リダイレクトされる場所
* @param blobUrl
* @return
*/
@ActionPath("dupdcomplete")
public Navigation directUploadComplete()
{
Navigation nav = null;
BlobKey blobKey = service.getBlobKey(request, "newprofileimage");
nav = this.redirect( "/image/dupdrd?bloburl=" + service.getServingUrl(blobKey));
return nav;
}
/**
* Blobstoreに直接アップロードした後リダイレクトされたものをさらにリダイレクトされる場所.
* @param blobUrl
* @return
*/
@ActionPath("dupdrd")
public Navigation forDirectUploadRedirect(
@RequestParam("bloburl") String blobUrl
)
{
Navigation nav = null;
if(blobUrl != null && blobUrl.isEmpty() == false )
{
List<Map<String,String>> jsonDataList = new ArrayList<Map<String,String>>();
Map<String,String> jsonData = new HashMap<String,String>();
jsonData.put("imageurl", blobUrl);
jsonDataList.add(jsonData);
try
{
nav = this.responseForImageJson(jsonDataList);//この前のエントリの内容
}
catch (IOException e)
{
e.printStackTrace();
}
}
return nav;
}
