Ajax File Upload

Code

package com.u2ware.springfield.sample.others.multipart;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.u2ware.springfield.support.multipart.MultipartFileController;
import com.u2ware.springfield.support.multipart.MultipartFileHandler;

@Controller
@RequestMapping("/others/multipart")
public class AjaxUploadController extends MultipartFileController{
	
	@Autowired 
	private MultipartFileHandler multipartFileHandler;
	
	public MultipartFileHandler getMultipartFileHandler() {
		return multipartFileHandler;
	}

	@RequestMapping(value = "/upload", method = RequestMethod.GET)
	public String uploadForm() throws Exception {
		return "/others/multipart/uploadForm";
	}
}

RequestMapping

Controller HTTP Method 예제 매핑 경로 Response
com.u2ware.springfield.sample.others.multipart.AjaxUploadController GET /others/multipart/upload Ajax fileupload Page
POST /others/multipart/upload json
POST /others/multipart/delete json

MultipartFileController

Note:
@Springfield 는 비동기 파일 업로드를 위해 com.u2ware.springfield.view.multipart. MultipartFileController 를 제공한다. 
public abstract class MultipartFileController {

	@RequestMapping(value="/upload", method=RequestMethod.POST)
	public View upload(HttpServletRequest request, HttpServletResponse response, @RequestParam("multipartFile")MultipartFile[] multipartFile, Model model) throws Exception{
		.
		.
		.
	}

	@RequestMapping(value="/delete", method=RequestMethod.POST)
	public View delete(HttpServletRequest request, HttpServletResponse response, @RequestParam("multipartFile")String[] multipartFile, Model model) throws Exception{
		.
		.
		.
	}
}

Ajax fileupload Page

Note:
Ajax fileupload 를 위한 HTML Page 작성 예제이다. kendoui Asynchronous Upload 이 사용되었다. 
<form>
	<input type="file" name="multipartFile" id="multipartFile" multiple="multiple"/>
</form>

<script>
	$(document).ready(function() {
		$("#multipartFile").kendoUpload({
			async: {
				saveUrl: "/others/multipart/upload",
				removeUrl: "/others/multipart/delete",
				autoUpload: true
			},  
			cancel: onCancel,
			complete: onComplete,
			error: onError,
			progress: onProgress,
			remove: onRemove,
			select: onSelect,
			success: onSuccess,
			upload: onUpload
		});
	});
		
	function onSelect(e) {
		console.log("Select :: " + getFileInfo(e));
	}
	
	function onUpload(e) {
		console.log("Upload :: " + getFileInfo(e));
	}
	
	function onSuccess(e) {
		e.files[0]['contentFile'] = e.response.contentFile;
		console.log("Success :: " + getFileInfo(e));
	}
	
	function onError(e) {
		console.log("Error (" + e.operation + ") :: " + getFileInfo(e));
	}
	
	function onProgress(e) {
		console.log("Progress (" + e.operation + ") :: " + getFileInfo(e));
	}
	
	function onComplete(e) {
		console.log("Success :: " + getFileInfo(e));
	}
	
	function onCancel(e) {
		console.log("Cancel :: " + getFileInfo(e));
	}
	
	function onRemove(e) {
		e.data = {"multipartFile" : e.files[0]['contentFile']}
		console.log("Remove :: " + getFileInfo(e));
	}		
	
	function getFileInfo(e) {
		return e;
	}        
</script>