13. 공지사항 게시판 (첨부파일 수정)

첨부파일 수정

첨부파일 수정 기능은 기존 파일(유지 or 삭제) + 새로운 파일(없음 or 등록) 으로 생각하면 된다.

 

 

 

게시글 수정 버튼을 누르면 첨부파일 칸에 현재 글에 첨부된 파일이 뜬다. (게시글 상세보기 기능과 같음)

우측에 삭제 버튼을 클릭하면 해당 태그를 포함하는 div 태그를 삭제하고, 파일의 pk인 fileNum을 hidden 타입의 input 태그에 담아 추가한다.

 

 

+) 기존 글 등록 페이지와 같이 파일 추가 버튼을 누르면 파일을 선택할 수 있는 input 태그가 생긴다.

 

 

notice_update.html

<button type="button" class="btn btn-primary btn-sm" onclick="addFileInputDiv(this);">파일 추가</button>
<div class="mb-1" th:if="${#lists.size(notice.boardFileList) != 0}"
			th:each="file : ${notice.boardFileList}">
	<a th:href="@{/notice/download(fileNum=${file.fileNum})}" style="color: black; text-decoration:underline; text-underline-offset : 5px;">
	[[${file.originFileName}]]
	</a>
	 ([[${file.fileSize}]])
	<button class="btn btn-primary btn-sm" type="button" th:onclick="deleteAttachedFile([[${file.fileNum}]], this);">삭제</button>
</div>
<!-- 첨부파일 -->

 

notice_update.js

//첨부된 파일 삭제 버튼
function deleteAttachedFile(fileNum, attachedFileBtn) {
	if(confirm('해당 파일을 삭제하시겠습니까?')) {
		const hiddenDiv = document.querySelector('#hiddenDiv');
		
		const str = `<input type="hidden" name="deleteFileNum" value="${fileNum}">`;
		hiddenDiv.insertAdjacentHTML('beforeend', str);
	
		const attachedFileDiv = attachedFileBtn.parentElement;
		attachedFileDiv.remove();
	}
};

 

 

삭제할 파일의 pk를 deleteFileNum이라는 이름으로 받아주었다. 여러 개를 삭제할 수 있기 때문에 배열로 받아준다.

 

 

먼저 새로 추가된 첨부파일은 글 등록 시 첨부파일 처리와 같다.

새로 추가된 첨부파일이 있다면(넘어온 files가 null이 아니라면) UploadUtil을 이용해 파일을 업로드 하고, updateBoard 메소드로 넘길 boardVO에 파일 정보를 저장한 list를 넣어준다.

기존 파일 삭제 + 새로운 파일 등록 + 글 수정 쿼리는 트랜잭션 처리를 위해 serviceImpl에서 함께 수행한다.

 

 

NoticeController.java

//글 수정
@PostMapping("/update")
public String noticeUpdate(BoardVO boardVO, String[] deleteFileNum, MultipartFile[] files) {
    //새로 추가된 첨부파일 처리
    if(files != null) {
        List<BoardFileVO> attachedBoardFileList = UploadUtil.multiFileUpload(files);

        // 첨부파일 등록 쿼리 실행 시 빈 값을 채워줄 데이터를 저장할 리스트에 boardNum 데이터 추가
        for(BoardFileVO boardfile : attachedBoardFileList) {
            boardfile.setBoardNum(boardVO.getBoardNum());
        }

        // boardVO에 리스트 set
        boardVO.setBoardFileList(attachedBoardFileList);
    }

    //중요글 체크 해제 시 null값 체크
    if(boardVO.getIsImportant() == null) {
        boardVO.setIsImportant("N");
    }

    noticeService.updateBoard(boardVO, deleteFileNum);

    return "redirect:/notice/detail?boardNum=" + boardVO.getBoardNum();
}

 

넘겨 받은 삭제할 파일 번호로 첨부된 파일명을 조회한다.

 

file.delete()로 해당 파일을 삭제해주고, db에 저장된 정보도 삭제한다.

 

NoticeServiceImpl.java

//글 수정
@Override
@Transactional(rollbackFor = Exception.class)
public void updateBoard(BoardVO boardVO, String[] deleteFileNumArr) {
    //삭제된 파일 처리
    if(deleteFileNumArr != null) {
        for(String deleteFileNum : deleteFileNumArr) {
            BoardFileVO fileVO =  sqlSession.selectOne("boardMapper.getDownloadFileVO", deleteFileNum);
            String attachedFileName = fileVO.getAttachedFileName();

            File file = new File(ConstVariable.BOARD_UPLOAD_PATH + attachedFileName);
            file.delete();

            sqlSession.delete("boardMapper.deleteFile", deleteFileNum);
        }
    }

    //새로운 첨부파일 등록
    if(boardVO.getBoardFileList() != null) {
        sqlSession.insert("boardMapper.regFiles", boardVO);
    }

    //글 수정
    sqlSession.update("boardMapper.updateBoard", boardVO);
}