업로드 파일 삭제

• 업로드된 파일의 삭제는 파일의 URL로 쉽게 처리할 수 있습니다.
• 파일의 URL 자체가 '년/월/일/uuid_파일명'으로 구성되어 있으므로 이를 활용하여 삭제할 파일의 위치를 찾아서 삭제할 수 있습니다.
• UploadController에서는 removefile() 메서드를 추가해줍니다.
• removeFile()은 경로와 UUID가 포함된 파일 이름을 파라미터로 받아 삭제 결과를 Boolean 타입으로 만들어서 전송합니다.
• removeFile()에서 주의해야 할 것은 원본 파일과 함께 섬네일 파일도 같이 삭제해야한다는 점입니다.
• removeFile()은 원본파일의 이름을 파라미터로 전송받은 후에 File 객체를 이용하여 원본과 ㅅ머네일을 같이 삭제해줍니다.

 /** 업로드 파일 삭제
     */
    @PostMapping("/removeFile")
    public ResponseEntity<Boolean> removeFile(String fileName){

        String srcFileName = null;

        try{
            srcFileName = URLDecoder.decode(fileName,"UTF-8");
            //UUID가 포함된 파일이름을 디코딩해줍니다.
            File file = new File(uploadPath +File.separator + srcFileName);
            boolean result = file.delete();

            File thumbnail = new File(file.getParent(),"s_"+file.getName());
            //getParent() - 현재 File 객체가 나태내는 파일의 디렉토리의 부모 디렉토리의 이름 을 String으로 리턴해준다.
            result = thumbnail.delete();
            return new ResponseEntity<>(result,HttpStatus.OK);
        }catch (UnsupportedEncodingException e){
            e.printStackTrace();
            return new ResponseEntity<>(false,HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

브라우저에서 파일 삭제

• 브라우저에서는 각 파일을 삭제할 수 있도록 버튼을 추가해줍니다.
• 버튼과 이미지를 하나의 <div>로 묶는 작업이 필요합니다.
• 이를 통해서 한번의 버튼과 이미지를 같이 삭제할 수 있도록 처리할 수 있습니다.
• 업로드된 경과를 처리하는 부분은 버튼을 추가하도록 UploadEx.html을 수정합니다.

  // 추가 
     // Ajax 업로드 이후 이미지들을 호출하는 함수 
     function showUploadedImage(arr){

        console.log(arr);

        var divArea = $(".uploadResult");

        var str = "";

        for(var i =0; i<arr.length; i++){
                str += "<div>";
                str += "<img src='/display?fileName="+arr[i].thumbnailURL+"'>";   
                str += "<button class='removeBtn' data-name='"+arr[i].imageURL+"'>Remove</button>";
                str += "</div>";   
        }
        divArea.append(str);

• 함수의 내부에는 <div>태그를 생성하고, <img>,<button>태그를 <div>안쪽으로 추가합니다.
• 추가된 <button>태그는 'data-name'이라는 커스텀 속성을 지정해서 버튼을 클릭했을 때 삭제해야 하는 파일의 이름을 알아내는 용도로 사용합니다.
• 브라우저에서 파일을 업로드하면 아래 그림과 같이 버튼이 추가된 것을 확인할 수 있고, 서버에서는 원본과 섬네일 파일이 생성된 것을 확인할 수 있습니다.

• 화면에서 'Remove'버튼을 클릭하면 동작하는 부분은 다음과 같이 작성해줍니다.

     $(".uploadResult").on("click",".removeBtn",function(e){

        var target = $(this);
        var fileName = target.data("name");
        var targetDiv = $(this).closest("div");

        console.log(target);
        console.log(fileName);
        console.log(targetDiv);

        $.post('/removeFile',{fileName : fileName}, function(result){

            console.log(result);
            if(result === true){
                targetDiv.remove();
            }
        })
     })

• 업로드 결과로 만들어지는 <div>는 동적으로 생성되기 때문에 바로 클릭 이벤트 처리를 할 수 없으므로, 위임(delegate)하는 방식으로 이벤트를 처리해야 합니다.
• 삭제 작업은 POST방식으로 호출하고 정상적으로 서버에서 원본 파일과 섬네일 파일이 삭제된 후에는화면에서 해당 이미지가 포함된 <div>를 삭제합니다.
• 위에서 순서대로 $(this), $(this).data("name"), $(this).closest("div)
  

File객체

File 객체를 써보고 공부해보니 File객체를 생성하는 방법이 여러개가 있어서 정리해 보았습니다.

File객체의 정의

• File 객체는 하드디스크에 존재하는 실제 파일이나 디렉토리가 아니라 그것에 대한 경로(Pathname) 또는 참조(Reference)를 추상화한 객체입니다.
• 파일 객체는 새 파일에 대한 경로나 만들고자하는 디렉토리를 캡슐화 한것 입니다.

File 객체의 용도

• 물리적 파일 시스템에 대해 캡슐화한 경로명을 확인하고 실제의 파일이나 디렉토리와 대응하는지 알아볼 때
• 파일 스트림객체를 생성하고자 할 때

File 객체 생성

• 인자로 String 객체를 전달합니다.
  -Ex) File mtDir = new File("/Data/User/JDK 1.3.0/src/java/io");
  -File클래스의 생성자는 인자로 전달된 경로를 확인하지 않습니다.
• 첫번쨰 인자로 부모 디렉토리를 가진 File객체 전달, 두번쨰 인자로 String 객체 전달
  -부모디렉토리-해당파이를 가지고 있는 디렉토리
  Ex) File thumbnail = new File(file.getParent(),"s_"+file.getName());
• 첫번째 인자로 부모 디렉토리의 경로를 String 객체로 전달, 두번째 인자로 String 객체
• URL 이용

절대경로와 상대경로

• 절대경로 : 접두사 (C:\ , c://)를 포함하는 경로.
  -Ex)cd c:/java/API 이런 식의 경로 이동을 하는 방법이 정대경로
• 상대 경로 : 접두사가 없는 경로
  -Ex)cd java 이런 식의 경로 이동을 하는 방법이 상대 경로

File객체에 대한 정보를 얻을 수 있는 메서드

- getName() : 경로를 제외한 파일의 이름. 즉, 경로의 가장 마지막 부분을 String 객체로 리턴합니다.
- getPath() : 파일이나 디렉토리 이름을 포함한 File 객체의 경로를 String으로 리턴합니다.

• isAbsolute() : File 객체가 절대경로를 참조하고 있다면 true, 아니라면 false를 리턴합니다.
• getParent() : 현재 File객체가 나타내는 파일 디렉토리의 부모디렉토리의 이름을 String으로 리턴합니다. 이때 리턴되는 경로는 파일이름을 포함하지 않은 순수한 경로명입니다.
  -만약 File객체가 현재 디렉토리에서 단순히 파일이름만을 사용하여 만들어져 부모 디렉토리가 명시되어 있지 않을 경우 null을 리턴합니다.

파일과 디렉토리를 생성하고 수정하는 메서드

• mkdir() : 현재의 File 객체에 의해 지정된 경로로 디렉토리를 생성한다. 이 메소는 생성
  하려는 디렉토리의 부모 디렉토리가 미리 존재하지 않으면 실패할 것이다.
  -이 메소드는 성공하면 true를 리턴하고, 그렇지 않으면 false를 리턴한다.
• mkdirs() : 현재 File 객체가 나타내는 디렉토리를 생성하며, 이때 필요한 모든 부모 디렉토리도 함께 생성한다. 새로운 디렉토리가 성공적으로 생성되었다면 true를 그렇지 않으면 false를 리턴한다.
  -메소드가 false를 리턴한 경우에도 부모경로중 일부가 생성되었을 수도 있다.
• delete() : 현재 File객체가 나타내고 있는 파일 또는 디렉토를 삭제하여 성공적으로 삭제한다면 true 를 리턴합니다.
  -이 메서드는 비어있지 않는 디렉토리는 지우지 않습니다.
  -그러므로 디렉토리를 삭제하려면 디렉토리 내의 모든 파일을 먼저 지워야 합니다.