14 | 2月 | 2017 | ESORO system design

テキストファイルをサーバへアップロードしたいという要件があり、Web画面からファイルをドラッグアンドドロップできるようにして、それをJAX-RSで処理する事にしてみました。

下記の参考にさせて頂き、それらを組合わせただけと言えばだけですが。。

Jersey(JAX-RS)でファイルアップロード
 HTML5 の File API でドラッグ＆ドロップする

まず、JAX-RSのルートパスを指定します

import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("/api")
public class RestApplication extends Application {
//何も書く事はありません・・・
}

import javax.ws.rs.ApplicationPath;

import javax.ws.rs.core.Application;

@ApplicationPath("/api")

public class RestApplication extends Application {

//何も書く事はありません・・・

}

次にファイルを処理するJAX-RS部分を作ります

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.stream.Stream;

import javax.enterprise.context.RequestScoped;
import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

import com.sun.jersey.core.header.FormDataContentDisposition;
import com.sun.jersey.multipart.FormDataParam;

@RequestScoped
@Path("/upload")
public class FileUploader {
	
	@POST
	@Consumes(MediaType.MULTIPART_FORM_DATA)
	public Response post(@FormDataParam("file") InputStream fileStream,
					@FormDataParam("file") FormDataContentDisposition fileDisposition) {

		int statusCode = 200;
		String out = "";

		//テキストファイルの読み込み
		try (BufferedReader br = new BufferedReader(new InputStreamReader(fileStream))) {
			try(Stream<String> lines = br.lines()){
				//１行毎の処理は省略
			}
        } catch (IOException e) {
			statusCode = 400;
			out = e.getMessage();
		}
		return Response.status(statusCode).type("text/html;charset=Shift-JIS").
			entity(out).
			build();
	}
}

import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStream;

import java.io.InputStreamReader;

import java.util.stream.Stream;

import javax.enterprise.context.RequestScoped;

import javax.ws.rs.Consumes;

import javax.ws.rs.POST;

import javax.ws.rs.Path;

import javax.ws.rs.core.MediaType;

import javax.ws.rs.core.Response;

import com.sun.jersey.core.header.FormDataContentDisposition;

import com.sun.jersey.multipart.FormDataParam;

@RequestScoped

@Path("/upload")

public class FileUploader {

@POST

@Consumes(MediaType.MULTIPART_FORM_DATA)

public Response post(@FormDataParam("file") InputStream fileStream,

@FormDataParam("file") FormDataContentDisposition fileDisposition) {

int statusCode = 200;

String out = "";

//テキストファイルの読み込み

try (BufferedReader br = new BufferedReader(new InputStreamReader(fileStream))) {

try(Stream<String> lines = br.lines()){

//１行毎の処理は省略

}

} catch (IOException e) {

statusCode = 400;

out = e.getMessage();

}

return Response.status(statusCode).type("text/html;charset=Shift-JIS").

entity(out).

build();

}

これでファイルアップローダーのJAX-RSパスは、{コンテンツルート}/api/uploadになりました。

続いてJavaScriptの部分（殆ど上記参考から持ってきただけです。。）

$(function() {
   var droppable = $("#droppable");

    // イベントをキャンセルするハンドラです.
    var cancelEvent = function(event) {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }

    // dragenter, dragover イベントのデフォルト処理をキャンセルします.
    droppable.bind("dragenter", cancelEvent);
    droppable.bind("dragover", cancelEvent);

    // ドロップ時のイベントハンドラを設定します.
    var handleDroppedFile = function(event) {

	    var dropfile = event.originalEvent.dataTransfer.files[0];
	    
	    var formData = new FormData();
	    formData.append( 'file', dropfile );
	      
	    var hostUrl= 'api/upload';
	    $.ajax({
	       url: hostUrl,
	       method: 'post',
	       dataType: 'json',
	       data: formData,
	       processData: false,
	       contentType: false,
	       timeout:100000
	    }).done(function(data) {
        	alert( '正常に終了しました');
	    }).fail(function( jqXHR, textStatus, errorThrown ) {
	         alert( 'エラーが発生しました\n'+ jqXHR.responseText);
	    });
	
	    // デフォルトの処理をキャンセルします.
	    cancelEvent(event);
	    return false;
    }
    // ドロップ時のイベントハンドラを設定します.
    droppable.bind("drop", handleDroppedFile);
});

$(function() {

var droppable = $("#droppable");

// イベントをキャンセルするハンドラです.

var cancelEvent = function(event) {

event.preventDefault();

event.stopPropagation();

return false;

}

// dragenter, dragover イベントのデフォルト処理をキャンセルします.

droppable.bind("dragenter", cancelEvent);

droppable.bind("dragover", cancelEvent);

// ドロップ時のイベントハンドラを設定します.

var handleDroppedFile = function(event) {

var dropfile = event.originalEvent.dataTransfer.files[0];

var formData = new FormData();

formData.append( 'file', dropfile );

var hostUrl= 'api/upload';

$.ajax({

url: hostUrl,

method: 'post',

dataType: 'json',

data: formData,

processData: false,

contentType: false,

timeout:100000

}).done(function(data) {

alert( '正常に終了しました');

}).fail(function( jqXHR, textStatus, errorThrown ) {

alert( 'エラーが発生しました\n'+ jqXHR.responseText);

});

// デフォルトの処理をキャンセルします.

cancelEvent(event);

return false;

}

// ドロップ時のイベントハンドラを設定します.

droppable.bind("drop", handleDroppedFile);

});

最後にHTML部分のドラッグアンドドロップ部分です。
ここにドロップされたファイルがJAX-RSの処理箇所のInputStream に繋がります。

<div class="droppable" id="droppable" style="border:gray solid 1em; width:100px; padding:2em;">アップロードするファイルはココにドロップしてください。</div>

1	<div class="droppable" id="droppable" style="border:gray solid 1em; width:100px; padding:2em;">アップロードするファイルはココにドロップしてください。</div>

これでとりあえずはJAX-RSでファイル処理が出来ることが確認出来ました。

最後にPOM。

<dependency>
    <groupId>javax.ws.rs</groupId>
    <artifactId>javax.ws.rs-api</artifactId>
    <version>2.0.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.sun.jersey.contribs/jersey-multipart -->
<dependency>
    <groupId>com.sun.jersey.contribs</groupId>
    <artifactId>jersey-multipart</artifactId>
    <version>1.19.3</version>
</dependency>

<groupId>javax.ws.rs</groupId>

<artifactId>javax.ws.rs-api</artifactId>

</dependency>

<groupId>com.sun.jersey.contribs</groupId>

<artifactId>jersey-multipart</artifactId>

</dependency>

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

ESORO system design

日別アーカイブ: 2017年2月14日

JAX-RSでWeb画面にドラッグアンドドロップされたファイルを読み込む