[Spring] Ajax 파일 업로드 후, 업로드된 파일 데이터 반환

[Spring] Ajax 파일 업로드 후, 업로드된 파일 데이터 반환

 

글을 쓸 때 파트별로 나누어서 쓰는 부분이 있다보니, 이전 글 링크를 추가합니다.

 

이전 글

2021.08.24 - [Spring] - [Spring] 썸네일 이미지 생성

2021.08.24 - [Spring] - [Spring] 파일 업로드, 파일명 중복 방지를 위한 UUID 적용

2021.08.24 - [Spring] - [Spring] 년월일 폴더 생성, 날짜 폴더 생성

2021.08.24 - [Spring] - [Spring] 파일 확장자, 파일 사이즈 확인하여 파일 업로드 제한하기

2021.08.23 - [Spring] - [Spring] Ajax를 이용하는 파일 업로드

2021.08.22 - [Spring] - [Spring] 파일 업로드 설정하기 (xml방식, Java방식)

 

파일 업로드는 완료되었지만, 브라우저 쪽에는 데이터를 전달하지 않았기 때문에 브라우저에서는 어떠한 피드백도 받지 않는 상황입니다. 서버에서 Ajax의 결과로 전달해야 하는 데이터는 업로드된 파일의 경로가 포함된 파일의 이름입니다. 

 

반환할 데이터

- 업로드된 파일의 이름과 원본 파일의 이름

- 파일이 저장된 경로

- 업로드된 파일이 이미지인지 아닌지에 대한 정보

 

pom.xml에 jackson-databind 관련 라이브러리를 포함합니다.

com.project.domain 패키지 아래 AttachFileDTO 클래스를 생성합니다.

 

 

UploadController 클래스에서 uploadAjaxPost 메서드는 AttachFileDTO의 리스트를 반환하는 구조로 변경합니다.

 

UploadController 클래스의 uploadAjaxPost 메서드 수정

 

1. 어노테이션 수정

1.1. Mapping 파라미터 수정 value, produces 적용

1.2. ResponseBody 어노테이션 추가

2. 반환값 수정

2.1. ResponseEntity<List<AttachFileDTO>>

3. AttachFileDTO 활용하여 데이터를 저장한 뒤 ResponseEntity<list<AttachFileDTO>>

@PostMapping(value = "/uploadAjaxAction",
			produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
	@ResponseBody
	public ResponseEntity<List<AttachFileDTO>>
		uploadAjaxPost(MultipartFile[] uploadFile) {
		List<AttachFileDTO> list = new ArrayList<AttachFileDTO>();
		String uploadFolder = "C:\\storage";

		String uploadFolderPath = getFolder();
		// make folder
		File uploadPath = new File(uploadFolder, getFolder());
		log.info("upload path : "+uploadPath);
		
		if(uploadPath.exists() == false) {
			uploadPath.mkdirs();
		} // make yyy/MM/dd folder
		
		for(MultipartFile multipartFile : uploadFile) {
			/*log.info("---------------------------------------");
			log.info("Upload File Name : "+multipartFile.getOriginalFilename());
			log.info("Upload File Size : "+multipartFile.getSize());*/
			AttachFileDTO attachDTO = new AttachFileDTO();
			
			String uploadFileName = multipartFile.getOriginalFilename();
			// IE has file path
			uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\")+1);
			log.info("only file name : " + uploadFileName);
			attachDTO.setFileName(uploadFileName);
			
			UUID uuid = UUID.randomUUID();
			uploadFileName = uuid.toString() + "_" + uploadFileName;

			try {
				//File savefile = new File(uploadFolder, uploadFileName);
				File saveFile = new File(uploadPath, uploadFileName);
				
				multipartFile.transferTo(saveFile);
				
				attachDTO.setUuid(uuid.toString());
				attachDTO.setUploadPath(uploadFolderPath);
				
				// check image type file
				if (checkImageType(saveFile)) {
					attachDTO.setImage(true);
					FileOutputStream thumbnail = new FileOutputStream( 
									new File(uploadPath, "s_"+uploadFileName) );
					Thumbnailator
					.createThumbnail(multipartFile.getInputStream(), thumbnail, 100, 100);
				}
				
				// add to List
				list.add(attachDTO);
				
			} catch (Exception e) {
				log.error(e.getMessage());
			} // end catch
		} // end for
		return new ResponseEntity<List<AttachFileDTO>>(list, HttpStatus.OK);
	}

uploadAjaxPost( )는 기존과 달리 ResponseEntity<List<AttachFileDTO>>를 반환하는 형태로 수정하고, JSON 데이터를 반환하도록 변경됩니다. 내부에서는 각 파일에 맞게 AttachFileDTO를 생성해서 전달하는 구조로 변경됩니다.

 

uploadAjax.jsp의 일부 ajax 수정

파일 저장 후, 반환 받은 파일 정보 콘솔창에서 확인하기

 

---

[Spring] Ajax 파일 업로드 후, 업로드된 파일 데이터 반환에 대해 알아보았습니다. (server side)