[Spring][쇼핑몰 프로젝트][26] 업로드 이미지 삭제 - 2

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

이미지 삭제 기능 구현

 뷰에서 이전 포스팅에서 작성한 서버 단계에서의 파일 메서드를 호출할 수 있도록 작업할 것입니다.

 

 

순서

1. 삭제 버튼 태그 data 속성 삽입

2. 삭제 메서드 작성

3. 메서드 적용

4. 테스트

 

 

1. 삭제 버튼 태그 data 속성 삽입

 업로드 이미지 출력 포스팅에서 이미지를 업로드를 하면 태그가 추가되어 썸네일 이미지가 뷰에 출력되도록 했습니다. 새로 출력되는 태그들 중 이미지 삭제를 위해 만든 class 속성 값이 imgDeleteBtn 인 <div> 태그가 있는데, 해당 태그에 파일 경로 데이터를 심어 놓을 것입니다. 이를 위해 data 속성을 활용하겠습니다. 

 

그림 1-1

 

  해당 <div> 태그에 data-file 속성을 추가해줄 것인데, 속성 값은 출력되는 파일의 경로입니다. 파일의 경로는 이미 UTF-8로 인코딩해둔 fileCallPath 변수에 저장을 해두었기 때문에 이 값을 그대로 사용하겠습니다. (이전 포스팅에서 뷰에서 전달 해준 파일 경로 값을 굳이 디코딩해주었던 이유가 이 데이터를 전달할 것이기 때문입니다.)

 

*data 속성 :  아래의 링크로 이동을 하시면 data 속성에 대한 자세한 정보를 얻을 실 수 있습니다.

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

 

 기존 <div> 태그 문자열 값을 아래의 코드로 수정해줍니다.

 

str += "<div class='imgDeleteBtn' data-file='" + fileCallPath + "'>x</div>";

 

그림 1-2

 

 

 

2. 삭제 메서드 작성

 미리 보기 이미지 제거 및 서버에 이미지 파일 삭제 요청을 수행하는 코드를 작성할 차례입니다. 이 기능이 수행되어야 할 곳이 한 곳이라면 코드를 바로 작성해도 되지만, 해당 기능이 적용되어야 할 상황이 두 가지입니다.

 

 첫 번째는 미리 보기 이미지의 'x'를 클릭하였을 때 삭제가 수행되어야 합니다. 두 번째는 이미지를 삭제하지 않은 상태에서 파일 <input> 태그를 클릭하여 업로드할 파일을 선택하였을 때입니다. 두 번째 상황에서 파일 삭제 처리를 해주지 않는다면 두 가지의 파일이 저장되게 되고 미리 보기 이미지도 두 가지가 출력됩니다. 이는 한 개의 파일만 올릴 수 있도록 하고자 하는 의도와 반대되는 상황이기 때문에 사용자가 이미지를 선택할 경우 파일 삭제 처리를 해주도록 하겠습니다.

 

 두 상황 모두 동일한 삭제처리 필요로 하기 때문에 중복된 코드를 피하기 위하여 삭제를 처리하는 메서드를 선언한 및 구현하여 이를 호출하는 방식으로 처리하겠습니다.

 

---

 메서드가 처리할 작업 순서는  '서버에 파일 삭제 요청' => '서버로부터 응답에 따른 처리'입니다.

'서버로부터 응답에 따른 처리'는 성공의 경우 파일이 삭제되었기 때문에 미리 보기 태그를 지우는 작업을 수행하도록 할 것이고, 실패의 경우 실패하였다는 경고가 뜨게 할 것입니다.

 

---

 

<script> 코드 내에 삭제처리를 위한 메서드를 선언합니다.

 

	/* 파일 삭제 메서드 */
	function deleteFile(){
		
	}

 

 두 개의 변수를 선언하고 하나의 변수에는 삭제 <div> 태그에 심어둔 썸네일 파일 경로 데이터를 대입하고, 나머지 변수에는 이미지 파일 업로드 시 출력되는 미리 보기 이미지를 감싸고 있는 result_card <div> 태그를 대입합니다.(<div> 태그는 접근을 용이하게 하고자 변수를 선언하였습니다.)

 

	/* 파일 삭제 메서드 */
	function deleteFile(){
		
		let targetFile = $(".imgDeleteBtn").data("file");
		
		let targetDiv = $("#result_card");
		
	}

 

 파일의 삭제를 요청하는 ajax 코드를 작성합니다.

 

  url : 이전 포스팅에서 작성한 파일 삭제를 수행하는 url을 작성하였습니다.

  data : 객체 초기자를 활용하여 fileName 속성명에 targetFile(이미지 파일 경로) 속성 값을 부여하였습니다. 서버의 메서드 파라미터에 String fileName을 선언하였기 때문에 스프링에서 해당 데이터를 매핑해 줄 것입니다.

 type : 서버 요청 방식입니다. 'POST'를 지정해주었습니다.

 dataType : 전송하는 targetFile은 문자 데이터이기 때문에 'text'를 지정해주었습니다.

 success : 성공할 경우 실행되는 속성입니다.

 error : 요청이 실패 혹은 에러일 경우 실행되는 속성입니다.

 

	/* 파일 삭제 메서드 */
	function deleteFile(){
		
		let targetFile = $(".imgDeleteBtn").data("file");
		
		let targetDiv = $("#result_card");
		
		$.ajax({
			url: '/admin/deleteFile',
			data : {fileName : targetFile},
			dataType : 'text',
			type : 'POST',
			success : function(result){
				console.log(result);
			},
			error : function(result){
				console.log(result);
			}
       });
		
	}

 

 파일 삭제를 성공한 경우 미리 보기 이미지를 삭제해 주고 파일 <input> 태그를 초기화해주어야 합니다. success 속성의 속성 값인 콜백 함수 구현부에 result_card <div> 태그를 지워주고 <input> 태그를 초기화해주는 코드를 작성합니다.

 

 더불어 파일 실패의 경우 경고창을 띄우기 위해 error 속성 속성 값인 콜백 함수 구현부에 경고창을 띄우는 코드를 작성합니다.

 

	/* 파일 삭제 메서드 */
	function deleteFile(){
		
		let targetFile = $(".imgDeleteBtn").data("file");
		
		let targetDiv = $("#result_card");
		
		$.ajax({
			url: '/admin/deleteFile',
			data : {fileName : targetFile},
			dataType : 'text',
			type : 'POST',
			success : function(result){
				console.log(result);
				
				targetDiv.remove();
				$("input[type='file']").val("");
				
			},
			error : function(result){
				console.log(result);
				
				alert("파일을 삭제하지 못하였습니다.")
			}
		});
	}

 

그림 2-1

 

 

3. 메서드 적용

 앞서 말한 첫 번째 경우니 'x' 버튼을 클릭한 경우 '파일 삭제'가 동작하도록 작업하겠습니다.

 

  'x'가 작성된 태그를 클릭하였을 경우 동작하는 메서드를 작성해줍니다. 한 가지 주의할 점은 아래와 같은 메서드는 'x'를 클릭하였을 때 동작을 하지 않습니다. 

 

$(".imgDeletBtn").click(function(){

});

 

 'x'가 출력되어 있는 <div> 태그는 웹 페이지가 완전히 렌더링 된 이후 Javascript 코드를 통해 새롭게 출력된(동적으로 출력된) 태그이기 때문입니다. 따라서 on()을 사용하여 아래와 같이 작성을 해주어야 합니다.

 

	/* 이미지 삭제 버튼 동작 */
	$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
		
	});

 약간의 해석을 덧 붙이자면 기존 렌더링 될 때 추가되어 있는 '#uploadReulst" <div> 태그를 식별자로 하여 그 내부에 있는 'imgDeleteBtn' <div> 태그를 클릭(click) 하였을 때 콜백 함수가 호출된다는 의미입니다.

 

 콜백 함수 구현부에 앞서 작성한 파일 삭제를 수행하는 메서드를 호출합니다.

 

	/* 이미지 삭제 버튼 동작 */
	$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
		
		deleteFile();
		
	});

 

그림 3-1

 

---

 

 두 번째 경우 이미지가 등록될 때 파일이 이미 존재를 한다면 삭제를 처리한 후 서버에 이미지 업로드 요청을 수행하도록 해주어야 합니다. 

 

 따라서 이미지 등록을 수행하는 메서드인  $("input[type='file']").on("change", function(e){ 의 구현부 최상단에 삭제에 대한 코드를 적용해 줄 것입니다.

 

그림 3-2

 

 기존 이미지 파일이 저장되었을 때 삭제가 이루어져야 합니다. 그렇다면 업로드가 앞서 이루어졌는지 어떻게 판단을 할까요? 이는 미리 보기 태그가 존재 하는지 하지 않는지를 통해서 판단을 할 수 있다고 생각합니다. 따라서 if문을 활용하여 미리보기 이미지 태그의 존재 유무에 따라서 deleteFile()메서드를 호출하도록 아래와 같이 코드를 작성해주었습니다.

 

		/* 이미지 존재시 삭제 */
		if($(".imgDeleteBtn").length > 0){
			deleteFile();
		}

 

그림 3-3

 

4. 테스트

 두 가지 상황 모두 처리가 잘 되는지 테스트를 하여 확인합니다.

 

그림 4-1

 

그림 4-2

 

그림 4-3

 

그림 4-4

 

그림 4-5

 

그림 4-6

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)
•  

 

 

 

DATE

• 2020.06.02