DRAG&DROP で複数ファイルを取得したい

Question

いま目指すゴールは、画面にドラッグアンドドロップしたファイルを、ControllerでMultipartFileのリストまたは配列で受け取ること。

ちょっとしたヒントで構いませんので、教えていただけるとありがたいです。

※追記
ajaxを使ったパターンに差し替えました。（ほぼ昨日の状態…）
contorollerに届かないところでとん挫しています。まだ糸口は見つかっていません。
（プロジェクト内ではもちろんajax使っている箇所はたくさんあり、パス指定による単ファイルアップロードもできています。が、なぜか、どのパターンをここに応用してもうまくいかない…）←ajaxを深く理解しないまま流用しつづけているからですが…。

ブラウザのエラーメッセージ：
Object
jquery-1.11.0.min.js:4 Uncaught TypeError: Illegal invocation
at e (jquery-1.11.0.min.js:4)
at Wc (jquery-1.11.0.min.js:4)
at Function.n.param (jquery-1.11.0.min.js:4)
at Function.ajax (jquery-1.11.0.min.js:4)
at sendFiles (dropfile.js:114)
at HTMLTextAreaElement.<anonymous> (dropfile.js:102)
at HTMLTextAreaElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLTextAreaElement.r.handle (jquery-1.11.0.min.js:3)

ひとまずここから、formDataの使い方などをもういちど確認していきたいと思っています。

<div id="dropArea">ここにファイルをドラッグ&ドロップしてください</div>

$("#dropArea").on('dragenter', function (e) {
	e.stopPropagation();
	e.preventDefault();
	})
.on('dragover', function (e) {
	e.stopPropagation();
	e.preventDefault();
	})
.on('drop', function(e) {
	e.preventDefault();
	sendFiles(e.originalEvent.dataTransfer.files, '/dropUpload1');
});

function sendFiles(files, url) {
	if(!confirm("ファイルをフォルダに追加しますか？")) return;

	var formData = new FormData();
	for (var i = 0; i < files.length; i++){
		alert(i); //←ファイル個数分表示される
		formData.append('files', files[i]);
	}

	$.ajax({
		type: "POST",
		url : url,
		data: formData,
		success : function(data, status, xhr) {
			// 処理など
		},
		error : function(XMLHttpRequest,
				textStatus, errorThrown) {
			// 処理など
		}
	});
}

@RestController
public class DropInController {
	@RequestMapping(value = "/dropUpload1", method = RequestMethod.POST)
	public String dropUpload1(@RequestParam("files") List<MultipartFile> files, Model model) {
			// 処理など
	}
}

Answer 1

input[type="file"] の中身をJavaScriptで変更はできないと思いますので、FormDataオブジェクトを使ってAjaxで送ってみてください。

【FormData】
https://ja.javascript.info/formdata#ref-45

【FormData オブジェクトの利用 - 開発者ガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects

【JavaScriptプログラミング講座【FormData クラスについて】】
https://hakuhin.jp/js/form_data.html

【jQuery Ajaxでファイルを送りたい！ - かもメモ】
https://chaika.hatenablog.com/entry/2014/04/12/001012

Comments

[tohmey]

ありがとうございます。
これまでも複数のサイトを参照してajaxで送ることも試みていたのですが、うまくいきませんでした。
しかし、ご紹介いただいたサイトは、私がajaxを試したとき、何がいけなかったのか、の答えが書いてあるような気がします。
もういちど、ajaxを使う方向でチャレンジしてみます。

[yambejp]

formDataはいまはajaxでなくても普通にsubmitに利用できます

[tohmey]

なるほど。それもやってみます。
ありがとうございます。

[kei344]

To: yambejpさん
おお、そうだったんですね。

【FormData を form で送信できるようになった】
http://var.blog.jp/archives/80397929.html

[tohmey]

サイトのご紹介いただきありがとうございます。この機会にFormDataの正しい使い方をマスターしようと思います。

Answer 2

動作としては、ファイルをある場所にドラッグアンドドロップしたら
サブミットされるというのでよいのですか？
それならtype=fileに落とすようにして、changeイベントを拾ってsubmitすればいいでしょう

Comments

[tohmey]

すみません。何をどうすればいいのかわかりません。
htmlのtextareaをinput type=fileに変えると、そこにファイルをドロップすればchangeイベントが発生するということですか？

[yambejp]

javaのインタフェースはわからないのでうまく読み替えてほしいのですが
ざっくりこんな感じ(PHPバージョン)

<?PHP
print_r($_FILES);
?>
<style>
.droppable{
border:1px solid;
position:relative;
height:200px;
background-Color:yellow;
}
.droparea{
position:absolute;
top:0;
width:100%;
height:100%;;
opacity:0;
background-Color:lime;
}
</style>
<form method="post" enctype="multipart/form-data">
<div class="droppable">
<div>ドロップして</div>
<input type="file" class="droparea" name="myfile[]" multiple onchange="this.form.submit()">
</div>
<input type="submit">
</form>

[tohmey]

やってみます。ありがとうございます。

[tohmey]

ありがとうございました！
画面的にはまだだいぶ調整が必要ですが、無事、java側のcontorollerで複数ファイルを受け取ることができました！
感動しました…。