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

jihun Choi·2023년 5월 6일
0

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

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

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

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을 통해 파일을 해당 폴더로 전송해줍니다

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

profile
성장을 위해 열심히 노력하는 개발자 입니다

0개의 댓글

Powered by GraphCDN, the GraphQL CDN