[JAVA] 드래그 앤 드랍으로 파일 저장하기

안녕하세요 오늘은 드래그 앤 드랍으로 파일을 저장하는 로직을 구현해 보도록 하겠습니다

일단 파일을 저장 할 폴더 하나를 만들어 줍니다

다음과 같이 코드를 구성해 줍니다

JS

const dropbox = document.querySelector('.file_box');
const input_filename = document.querySelector('.file_name');

//박스 안에 drag 하고 있을 때
dropbox.addEventListener('dragover', function (e) {
    e.preventDefault();

    let valid = e.dataTransfer.types.indexOf('Files') >= 0;

    if(valid){
        this.style.backgroundColor = 'rgb(13 110 253 / 25%)';
    }
});

//박스 밖으로 drag가 나갈 때
dropbox.addEventListener('dragleave', function (e) {
    this.style.backgroundColor = 'white';
});

//박스 안에 drop 했을 때
dropbox.addEventListener('drop', function (e) {
    e.preventDefault();
    this.style.backgroundColor = 'white';

    //파일 이름을 text로 표시
    let filename = e.dataTransfer.files[0].name;
    let file = e.dataTransfer.files[0];
    console.log(file);
    input_filename.innerHTML = filename;

    const formData = new FormData();
    formData.append('uploadFile', file);

    $.ajax({
        type: "POST",
        url: "/fileio/upload",
        data: formData,
        contentType : false,
        processData : false,
        enctype : "multipart/form-data",
        success: () => {
            alert("파일 저장이 완료되었습니다");
        }
    });
});

파일을 backend 단에 보내줄 때 ajax 호출시 formdata안에 file을 넣어주고 contenttype, processData 파라미터에 false 값을 넣어주고 enctype에 "multipart/form-data"값을 넣어주어야 파일을 전송할수 있습니다

JAVA

public void fileUpload(MultipartFile file){
    String filePath = "/Users/choejihun/desktop/무제 폴더/";

    try (
         FileOutputStream fos = new FileOutputStream(filePath + file.getOriginalFilename());
            // 파일 저장할 경로 + 파일명을 파라미터로 넣고 fileOutputStream 객체 생성하고
         InputStream is = file.getInputStream();) {
            // file로 부터 inputStream을 가져온다.

         int readCount = 0;
         byte[] buffer = new byte[1024];
            // 파일을 읽을 크기 만큼의 buffer를 생성하고
            // ( 보통 1024, 2048, 4096, 8192 와 같이 배수 형식으로 버퍼의 크기를 잡는 것이 일반적이다.)

         while ((readCount = is.read(buffer)) != -1) {
                //  파일에서 가져온 fileInputStream을 설정한 크기 (1024byte) 만큼 읽고

             fos.write(buffer, 0, readCount);
                // 위에서 생성한 fileOutputStream 객체에 출력하기를 반복한다
         }
     } catch (Exception ex) {
         throw new RuntimeException("file Save Error");
     }


 }

ajax로 프톤트에서 파일을 전달 받을시 multipartfile으로 전달 받아야 합니다 이후 fileoutputstream을 통해 파일을 해당 폴더로 전송해줍니다

실행결과 정상으로 동작하는것을 확인할수 있었습니다