読者です 読者をやめる 読者になる 読者になる

html5で複数ファイルアップロード(SAStruts)その1

前回変なテンションでSAStruts環境を構築したけども、 本当にやりたかったことはこれ。

チュートリアルに存在するファイルアップロードをベースとして

Super Agile Struts - Tutorial

機能を拡充していく。

今回は導入編

改修前の画面がこちら。

f:id:negiblog:20160612234749j:plain

既存のコードは、fileのmultipleに対応していない。 これを対応させるのが今回の目的。

とりあえず邪魔なコードを掃除し、単一のinput要素のみ残してみる。

input.jsp

<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>Tutorial: Upload</title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/sa.css')}" />
</head>
<body>
    <h1>Tutorial: Upload</h1>
    <html:errors />
    <s:form enctype="multipart/form-data">
        <input type="file" name="formFile" />
        <br/>
        <input type="submit" name="upload" value="アップロード" />
    </s:form>
</body>
</html>

UploadForm.java

package tutorial.form;

import org.apache.struts.upload.FormFile;
import org.seasar.struts.annotation.Required;

public class UploadForm {

    @Required
    public FormFile formFile;

}

UploadAction.java

package tutorial.action;

import javax.annotation.Resource;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts.upload.FormFile;
import org.seasar.struts.annotation.ActionForm;
import org.seasar.struts.annotation.Execute;
import org.seasar.struts.util.UploadUtil;

import tutorial.form.UploadForm;

public class UploadAction {

    @ActionForm
    @Resource
    protected UploadForm uploadForm;

    @Resource
    protected HttpServletRequest request;

    @Resource
    protected ServletContext application;

    @Execute(validator = false)
    public String index() {
        UploadUtil.checkSizeLimit(request);
        return "index.jsp";
    }

    @Execute(input = "index.jsp")
    public String upload() {
        upload(uploadForm.formFile);
        return "index.jsp";
    }

    protected void upload(FormFile file) {
        String path = application.getRealPath("/WEB-INF/work/"
            + file.getFileName());
        UploadUtil.write(path, file);
    }
}

こんな風になりました。

f:id:negiblog:20160612234813j:plain

このままでは複数ファイルの選択すら不可能なので、 とりあえず、htmlタグ(jsp)を修正

input.jsp

<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>Tutorial: Upload</title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/sa.css')}" />
</head>
<body>
    <h1>Tutorial: Upload</h1>
    <html:errors />
    <s:form enctype="multipart/form-data">
        <input type="file" name="formFile" multiple/>
        <br/>
        <input type="submit" name="upload" value="アップロード" />
    </s:form>
</body>
</html>

f:id:negiblog:20160612234824j:plain

f:id:negiblog:20160612234829j:plain

複数選択可能になったけど...

f:id:negiblog:20160612234836j:plain

容量超過で怒られるのでルールを緩和。

ルールはstruts-config.xmlに記載されているので、これを修正 今回は容量なんて気にしないので1Mから1Gまで極端に最大サイズを変更

struts-config.xml

    <controller
        maxFileSize="1024M"
        bufferSize="1024"
        processorClass="org.seasar.struts.action.S2RequestProcessor"
        multipartClass="org.seasar.struts.upload.S2MultipartRequestHandler"/>

これで怒られなくなったし、動かしてみると正常に動作したように見える!

f:id:negiblog:20160612234847j:plain

f:id:negiblog:20160612234851j:plain

だがしかし! 実は複数ファイルが対象フォルダに上がっていない!

f:id:negiblog:20160612235003j:plain

あ、そうだ、Formクラスを修正していないからに違いない。 そこさえ直せばきっと正常に動いてくれるはず!

次にフォームも複数格納できるように配列にしてみる。

UploadForm.java

package tutorial.form;

import org.apache.struts.upload.FormFile;
import org.seasar.struts.annotation.Required;

public class UploadForm {

    @Required
    public FormFile[] formFile;

}

よぅし、動作確認するぞぉ!アップロードボタンをクリィィィック!

f:id:negiblog:20160612235022p:plain

何故だぁぁぁぁぁぁ!!

というところで導入終わり、次回へ続く。